Skip to content

Instantly share code, notes, and snippets.

@denjn5

denjn5/.block

Last active October 5, 2017 15:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save denjn5/6914f73f8bc3f009a875fa2bd11f81d8 to your computer and use it in GitHub Desktop.
Save denjn5/6914f73f8bc3f009a875fa2bd11f81d8 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Hierarchical Force (d3 v4; CSV; 72 Lines)
Raw
.block
license: gpl-3.0
height: 200
border: no
Raw
README.md

This is the simplest network force 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'.

Not really thes simplest:

  • I bring data in hiararchically via d3.stratify and translate it back to links--but that's for the benefit of the d3-unconf class I'm teaching.
  • I've also included tick functionality because it makes me happy to watch it warble into place.

from https://bl.ocks.org/denjn5/6914f73f8bc3f009a875fa2bd11f81d8

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 Hierarchical Force (d3 v4; CSV; 72 Lines)</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style>
circle {
fill: #05668D;
opacity: 0.6;
stroke-width: 2px;
}
line {
stroke: #05668D;
stroke-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.forceSimulation()
.force('link', d3.forceLink().id(function (d) { return d.id; }))
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(vWidth / 2, vHeight / 2));
// Layout + Data
var vRoot = d3.hierarchy(vData);
var vNodes = vRoot.descendants();
var vLinks = vRoot.links();
var vLines = g.selectAll('line').data(vLinks).enter().append('line');
var vCircles = g.selectAll('circle').data(vNodes).enter().append('circle')
.attr('r', 7);
// Draw on screen
vLayout.nodes(vNodes).on('tick', ticked);
vLayout.force('link').links(vLinks);
// Animate on entry.
function ticked() {
vLines.attr('x1', function (d) { return d.source.x; })
.attr('y1', function (d) { return d.source.y; })
.attr('x2', function (d) { return d.target.x; })
.attr('y2', function (d) { return d.target.y; });
vCircles.attr('cx', function (d) { return d.x; })
.attr('cy', function (d) { return d.y; });
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment