Skip to content

Instantly share code, notes, and snippets.

@denjn5

denjn5/.block

Last active December 14, 2017 13:48
Show Gist options
  • Save denjn5/bb835c4fb8923ee65a13008832d2efed to your computer and use it in GitHub Desktop.
Save denjn5/bb835c4fb8923ee65a13008832d2efed to your computer and use it in GitHub Desktop.
Download ZIP
Simple Treemap (d3 v4; CSV; 52 Lines)
Raw
.block
license: gpl-3.0
height: 200
border: no
Raw
README.md

This is the simplest treemap diagram I could create. Let me know if you think I can make it tighter.

Build notes:

  • It pulls data from a csv file. It uses d3.stratify() to reform links into a hierarchy. (NOTE: I ran into a challenge with d.size when moving from json to csv. While size is a feature of my data, I had to now access it from d.data.size.)
  • To differentiate between local variables and framework objects, I prefix variables with lowercase 'v'.
  • The .paddingOuter(5) highlights the hierachical grouping. Normally this is achieved via different colors in treemaps.

From https://bl.ocks.org/denjn5/bb835c4fb8923ee65a13008832d2efed

Raw
data.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 3 columns, instead of 2 in line 1.
id,parentId,size
cars,
owned,cars
traded,cars
learned,cars
pilot,owned,40
325ci,owned,40
accord,owned,20
chevette,traded,10
odyssey,learned,20
maxima,learned,10
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Simple Treemap (d3 v4; CSV; 52 Lines)</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style>
rect {
stroke: white;
fill: #05668D;
opacity: 0.3;
stroke-width: 2px;
}
</style>
<svg>
<g></g>
</svg>
<script>
var vWidth = 300;
var vHeight = 200;
// Prepare our physical space
var g = d3.select('svg').attr('width', vWidth).attr('height', vHeight).select('g');
// Get the data from our CSV file
d3.csv('data.csv', function(error, vCsvData) {
if (error) throw error;
vData = d3.stratify()(vCsvData);
drawViz(vData);
});
function drawViz(vData) {
// Declare d3 layout
var vLayout = d3.treemap().size([vWidth, vHeight]).paddingOuter(5);
// Layout + Data
var vRoot = d3.hierarchy(vData).sum(function (d) { return d.data.size; });
var vNodes = vRoot.descendants();
vLayout(vRoot);
var vSlices = g.selectAll('rect').data(vNodes).enter().append('rect');
// Draw on screen
vSlices.attr('x', function (d) { return d.x0; })
.attr('y', function (d) { return d.y0; })
.attr('width', function (d) { return d.x1 - d.x0; })
.attr('height', function (d) { return d.y1 - d.y0; });
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment