Getting multiple columns to show up for D3 Heat Map

Getting multiple columns to show up for D3 Heat Map
0.0 0


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 =    "    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 ="body")
  .attr("width", w )
  .attr("height", h)
  .attr("transform", "translate( 5 , 5 )");
  .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});;



D3 gives you the ability to create scales which will allow you to hit what you’re aiming for with little fuss. I doubt I could explain them well here, so check out some of these videos to get started. The fundamental idea is that you’re defining a function that will take an input and give an output based on a range and domain you give it. For instance, you tell the scale that it’s going to receive years in the range of 1900 and 2000, then you tell it that you’ll want a number between 0 and 1200 in return (we’ll say the width of your graph is 1200px), it will map the year 1900 to 0, the year 2000 to 1200, and the year 1950 will be 600. This will also work for colors.


I watched a few of those over the weekend and that cleared things up for me. Thanks!