score:5
sure, you can use the indices of a 2d array to draw a heatmap. i put together a quick example at http://jsfiddle.net/uarga/4/.
assuming that your data looks like this:
var data = [[3,5],[9,2]];
first i set up some basic scales to calculate the x
and y
offsets based on the size of the data and the size of the chart. this makes it easy to resize the chart by changing the height
and width
without having to manually recalculate how big each of the cells should be.
var x = d3.scale.linear()
.range([0, width])
.domain([0,data[0].length]);
var y = d3.scale.linear()
.range([0, height])
.domain([0,data.length]);
you can then add each row to the heat map
var row = svg.selectall(".row")
.data(data)
.enter().append("svg:g")
.attr("class", "row");
and then add each cell to the row using a subselect. there might be a cleaner way to do this but i basically just capture the row number alongside the data for each cell. i then use the scales to figure out the x
, y
, height
, and width
for each cell.
var col = row.selectall(".cell")
.data(function (d,i) {return d.map(function(a){return {value: a, row: i};})})
.enter().append("svg:rect")
.attr("class", "cell")
.attr("x", function(d, i) { return x(i); })
.attr("y", function(d, i) { return y(d.row); })
.attr("width", x(1))
.attr("height", y(1))
.style("fill", function(d) { return colorscale(d.value); });
Source: stackoverflow.com
Related Query
- D3 heatmap without explicitly storing row and column
- Trying to find a way to get the row and column names of csv in html/js by using d3 , any other ways?
- Simple graph of nodes and links without using force layout
- D3 Collapsible Tree only drag without zoom and jump and scroll
- Angular UI-Grid and D3 graph in a row
- HeatMap - dc.js and d3.js using JSON data
- Sum of multiple column values for each row in d3.js
- Linked tooltip on heatmap and sparkline
- Driving a D3 chart with and without d3.json()
- how to add nodes and links do d3-force without enter
- dc.js Using two reducers without a simple dimension and second grouping stage
- Loading in multiple CSVs and storing them each in an individual array
- D3: How do I parse a CSV string into an object where keys are column names and values are arrays of data?
- storing dc.js filters in URI and restoring them
- Updating D3 column chart with different values and different data sizes
- NodeJs MongoDb Result without getters and setters
- dc.js - Chart not rendering (single row bar chart - horizontal row), with the exception of legend, axes and tick marks/values (which do render)
- HeatMap fixed box size (resize heatMap size based on rows and columns)
- Tooltip on heatmap and sparkline
- d3 heatmap column headers as yaxis
- dc.js with crossfilter and d3, how to load multiple csv files at once, without knowing how many files the user will upload
- Heavy calculations and displaying data without blocking UI
- dc.js Row chart default view sorted and not reorder while onclick
- Scale path to fit SVG height without blind trial and error
- Uncaught Error: [$injector:modulerr] - Heatmap using d3 and AngularJS
- How to display different column elements on X-Axis and Group in different column for xScale in D3.js Version 5
- How can I access all keys and values in an array of objects without looping
- D3.js Heatmap: How to read from a nested json and create a Heatmap using D3
- Cypher, get all nodes with and relationships for a given label without duplicates, empty relationships or empty nodes
- D3 - Load in and display data, row by row with set delay
More Query from same tag
- Element doesn't appear when appended in D3
- create same size of arcs with different labels/text on it
- D3.JS treemap inconsistent zoom behavior
- Replace data with new set
- D3 Calendar View using Associative Array
- D3 Stacked bar graph works in Tributary but nowhere else
- Bar chart not showing complete dataset
- storing dc.js filters in URI and restoring them
- Why is the third variable in d3 anonymous function undefined when transitioning?
- Line chart: points over ticks
- change initial zoom in D3.js node graph
- D3 4.0 Graph with directed edges and labels
- What does it mean to include an assignment in the d3 .classed() operator?
- Tree drawing orientation
- D3.js horizontal bar chart and data from json file
- D3.js: Updating the stops in a linearGradient
- d3 axis label cut off in chrome and firefox
- D3 - loading xml data from file, using scales for barchart
- Why do white spaces get removed from label name?
- d3 5+ - Appending circles about a semi-circle or arc
- Limit zoom to a 'maximum' in d3 geo tiles
- Legend to D3.js scatterplot
- How to add text to d3.js nodes?
- Reading csv data file with c3.js
- Adding context menu to nodes
- D3 albersUsa projection funtion return null
- Get d3 Extent (Min/Max) from multiple line data array
- Why is my angular-nvd3 multiChat chart not rendering here?
- My d3.scaleLinear function won't scale past 9
- d3 v4 drag and drop with TypeScript