CODEWITHSUNDEEP
javascriptjsonangularjsd3.jsdc.js
user4029378
user4029378

Reputation:

HeatMap - dc.js and d3.js using JSON data

I can create a HeatMap using d3.js, dc.js and crossfilter, using data in a CSV file.

code:

var chart = dc.heatMap("#test");
d3.csv("morley.csv", function(error, experiments) {
  var ndx    = crossfilter(experiments),
      runDim = ndx.dimension(function(d) { return [+d.Run, +d.Expt]; }),
      runGroup = runDim.group().reduceSum(function(d) { return +d.Speed; });
  chart
    .width(45 * 20 + 80)
    .height(45 * 5 + 40)
    .dimension(runDim)
    .group(runGroup)
    .keyAccessor(function(d) { return +d.key[0]; })
    .valueAccessor(function(d) { return +d.key[1]; })
    .colorAccessor(function(d) { return +d.value; })
    .title(function(d) {
        return "Run:   " + d.key[0] + "\n" +
               "Expt:  " + d.key[1] + "\n" +
               "Speed: " + (299000 + d.value) + " km/s";})
    .colors(["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"])
    .calculateColorDomain();
  chart.render();
});

but i want to do this same thing using JSON data, perhaps an array with some json data. This seems like a noob question but I was unable to find any example which uses JSON data for heatmap.

Upvotes: 3

Views: 1917

Answers (1)

Razzildinho
Razzildinho

Reputation: 2584

If you're using a JSON file then the code is going to be largely the same just replace d3.csv with d3.json.

If the data is already loaded in the browser then you can remove this function and just run:

var experiments = JSON.parse(json_object) //if json_object is still a string
var ndx = crossfilter(experiments)

and the rest of the code will be the same.

Upvotes: 4

Related Questions