Hello, fellow campers.
I am in day three of struggling to get a grid to populate for the D3 Heat Map challenge.
I can get all of the data to appear in a single row, but cannot figure out how to go get them render in a periodic format?
I can get the first twelve svg’s for the 12 months of the very first year to render but how to I get that to replicate out for the rest of the 261 columns I need?
If I can get this, I think the rest will be easy. I can add axis, link the rest of the data to each cell, add tool tips, etc… But I cannot figure out how to get all of the data to display as svg’s that “wrap” in a periodic format. I have spent hours researching this but no answers have been found yet.
The CodePen for this is here
var dataURL = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global- temperature.json";
$(document).ready(function() {
$.getJSON(dataURL, function (dataset) {
var w = 1900;
var h = 700;
var barPadding = 1;
var baseTemp = dataset.baseTemperature;// baseTemp = "8.66"
var earliestYear = dataset.monthlyVariance[0].year; // returns the first year in the dataset
var totalYears = Math.floor((dataset.monthlyVariance.length)/12);// this will return roughly how many years the data represents (262)
var latestYear = totalYears + earliestYear; // returns the most recent year in the dataset
var subdataset = dataset.monthlyVariance;
var totalDataPoints = totalYears*12;
var svg = d3.select("body")
.append("svg")
.attr("width", w )
.attr("height", h)
.append("g")
.attr("transform", "translate( 5 , 5 )");
svg.selectAll("rect")
.data(subdataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
if(i<12){return 0;}
else{return 100;}
})
.attr("y", function(d, i) { return i*(h/12 );})
.attr("width", 10)
.attr("height", 58)
.attr( "fill", "teal")
.attr("stroke", "orange")
.attr("stroke-width", function(d) { return d/2});;
})
});