Built with blockbuilder.org
forked from sxywu's block: d3unconf 2016, v1
license: mit |
Built with blockbuilder.org
forked from sxywu's block: d3unconf 2016, v1
First Name | version | first | favorite | |
---|---|---|---|---|
Alan | v1 | Scatter plot | d3.timer | |
Alanna | v3 | Bar chart, Line chart | ||
Alastair | v1 | Treemap | d3.forceSimulation | |
Alex | v3 | Line chart | d3.transition | |
Amit | v1 | N/A | d3.behavior.zoom | |
Andrew | v3 | Radial plot | d3.scale | |
Angela | v2 | Scatter plot | ||
Anna | v3 | Bar chart | ||
Anna | v2 | Tree | d3.line | |
Anuja | v3 | Tree | d3.hierarchy | |
Bo | v3 | Line chart | selection.data | |
Brad | v2 | Chord diagram | d3.selectAll | |
Brent | v3 | Bar plot | d3.forceSimulation | |
Brian | v4 | Bar chart | d3.voronoi | |
Casey | v3 | Bar chart | d3.force | |
Chris | v3 | Time series | d3.transition | |
Christophe | v1 | Tooltip | d3.axis | |
Daniel | v3 | Scatter plot | d3.nest | |
Daniel | v3 | Map | d3.transition | |
David | v3 | Force | d3.interpolate | |
David | v3 | Charting library | d3.voronoi | |
David | v3 | Bar chart | selection.data | |
Don | v3 | Choropleth | d3.voronoi | |
Eric | v3 | Map | d3.transition | |
Erik | v3 | Scatter plot | selection.data | |
Erik | v1 | Radar chart | d3.voronoi | |
Francois | v3 | Bar chart | d3.scale | |
Marcos | v3 | Bar chart | d3.selectAll | |
Hourann | v3 | Map, Bubble chart | d3.scaleOrdinal | |
Ian | v1 | Bar chart | d3.scaleLinear | |
Ivy | v1 | Network graph | nest.rollup | |
James | v3 | Scatter plot | d3.scale | |
James | v3 | Line chart | nest.map | |
Jamie | v2 | Map | transform | |
Janine | v3 | Bar chart | d3.selection | |
Jay | v3 | Bar chart | d3.scale | |
Jeff | v2 | Map | d3.geoProjection | |
Jeffrey | v2 | Line chart | d3.voronoi | |
Jennifer | v3 | Bar chart | d3.transition | |
Jeremy | v3 | Line Chart | d3.geoProjection | |
Jeremy | v2 | Bar chart | d3.scale | |
Jim | v2 | Bubble chart | d3.nest | |
Jing | v4 | Scatter plot | d3.brush | |
John | v2 | Area chart | d3.histogram | |
John | v3 | Scatter plot | d3.transition | |
Jon | v4 | Bar chart | d3.transition | |
Jon | v2 | Bar chart | d3.extent | |
Jonathan | v2 | Bar chart | scale.invert | |
Kai | v1 | Chord diagram | d3.interpolateMagma | |
Ken | v3 | Bar chart | d3.forceSimulation | |
Kerry | v1 | Chord diagram | d3.scale | |
Krist | v3 | Scatter plot | d3.selection, d3.scale | |
Kristen | v3 | Pie chart | d3.transition | |
Kristin | v2 | Chloropleth | d3.scale | |
Leland | v3 | Bar chart | arcTween | |
Logan | v4 | Pie chart, Donut chart | d3.pie | |
Ludwig | v3 | Tree | projection.fitSize | |
Marie | v3 | Line chart | d3.transition | |
Mark | v2 | Tree | d3.line | |
Matthew | v4 | Scatter plot | d3.scale | |
Mauro | v3 | Sunburst | selection.data | |
Micah | v3 | Map | d3.request | |
Michael | v2 | Bar chart | d3.pack | |
Mike | v1 | N/A | d3.pack | |
Minwei | v4 | bar chart | d3.layout.force | |
Naoya | v3 | bar chart | d3.scale | |
Noah | v2 | Line chart | d3.transition | |
Patrick | v3 | Scatter Plot | selection.attr | |
Paul | v4 | Scatter plot | d3.selectAll | |
Paul | v1 | Bar chart | d3.scale | |
Philippe | v3 | Map | d3.geoProjection | |
Phillip | v4 | Donut chart | d3.scale, d3.zoom | |
Ramesh | v4 | Scatter plot | d3.scale | |
Ric | v3 | Line chart | d3.brush | |
Robert | v3 | Bar chart | d3.nest | |
Robert | v2 | Force | d3.scale | |
Roger | v3 | Map | d3.geo | |
Rumman | v3 | Line chart | d3.voronoi | |
Saniya | v3 | Scatter plot | d3.color | |
Sara | v2 | Circle pack | d3.nest | |
Sara | v3 | Scatter plot | ||
Sarah | v4 | Donut chart | d3.transition | |
Seemant | v3 | Donut chart | d3.nest | |
Shan | v2 | Bubble chart | d3.scaleLinear | |
Shelby | v3 | Scatter plot | d3.scale | |
Shirley | v2 | Tree | d3.forceSimulation | |
Siu-Mei | v4 | Bar chart | d3.voronoi | |
Susie | v2 | Bar chart | d3.nest | |
Tarek | v2 | Bar chart | d3.layout.pack | |
Tim Hyon | v3 | Parallel coordinates | d3.scale | |
Tony | v3 | Bubble chart | d3.scale | |
Toshiyuki | v3 | Network graph | selection.enter, selection.exit | |
Vasco | v2 | Force | selection.data | |
Victor | v4 | Scatter plot | d3.geo.path | |
Visnu | v2 | Bar chart | d3.nest | |
Xianlin | v3 | Force | d3.transition | |
Yukiko | v3 | Bar chart | d3.color | |
Zack | v2 | Bar chart | selection.enter |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script> | |
<script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script> | |
<script type="text/javascript" src="http://gka.github.io/chroma.js/vendor/chroma-js/chroma.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { | |
width: 100%; | |
height: 100%; | |
} | |
/* blend options taken from visual cinnamon tutorial: http://www.visualcinnamon.com/2016/05/beautiful-color-blending-svg-d3.html */ | |
/*Set isolate on the group element*/ | |
svg {isolation: isolate;} | |
/*Set blend mode on SVG element: e.g. screen, multiply*/ | |
path { mix-blend-mode: multiply; } | |
</style> | |
</head> | |
<body> | |
<svg></svg> | |
<script type="text/babel"> | |
var width = 600; | |
var height = 600; | |
var colors = chroma.cubehelix() | |
.start(230) | |
.rotations(-.25) | |
// .gamma(0.7) | |
.lightness([0.3, 0.8]) | |
.scale() // convert to chroma.scale | |
.correctLightness() | |
.colors(6); | |
d3.csv('data.csv', (data) => { | |
var attendees = _.map(data, d => { | |
return { | |
firstName: d['First Name'], | |
lastName: d['Last Name'], | |
ticket: d['Ticket Type'], | |
first: d.first.split(', '), | |
favorite: d.favorite.split(', '), | |
version: d.version, | |
}; | |
}); | |
// create links between the different types | |
// of firsts, favorites, and versions | |
var firsts = _.chain(attendees) | |
.map('first').flatten() | |
.countBy().toPairs().sortBy(1) | |
.filter(d => d[0] !== 'N/A') | |
.map(d => { | |
return {type: 'first', value: d[0]} | |
}).value(); | |
var favorites = _.chain(attendees) | |
.map('favorite').flatten() | |
.countBy().toPairs() | |
.sortBy(1).filter(d => d[0]) | |
.map(d => { | |
return {type: 'favorite', value: d[0]} | |
}).value(); | |
var versions = _.chain(attendees) | |
.map('version').flatten() | |
.countBy().toPairs().sortBy(1) | |
.filter(d => d[1] > 1) | |
.map(d => { | |
return {type: 'version', value: d[0]} | |
}).value(); | |
/************************************** | |
** calculate nodes and links | |
**************************************/ | |
function findAddLinks(attendee, links, category, targets) { | |
_.each(targets, (target) => { | |
var target = _.find(category, (c) => c.value === target); | |
if (!target) return; | |
links.push({ | |
source: attendee, | |
target, | |
}); | |
}); | |
} | |
var links = _.chain(attendees) | |
.map(attendee => { | |
var attendeeLinks = []; | |
findAddLinks(attendee, attendeeLinks, favorites, attendee.favorite); | |
findAddLinks(attendee, attendeeLinks, firsts, attendee.first); | |
findAddLinks(attendee, attendeeLinks, versions, [attendee.version]); | |
return attendeeLinks; | |
}).flatten().value(); | |
var nodes = _.chain(attendees) | |
.union(favorites).union(firsts).union(versions).value(); | |
var simulation = d3.forceSimulation(nodes) | |
.force("charge", d3.forceManyBody()) | |
.force("link", d3.forceLink(links).distance(75).strength(1)) | |
.force("x", d3.forceX()) | |
.force("y", d3.forceY()) | |
.force("center", d3.forceCenter(width / 2, height / 2)) | |
.on("tick", ticked); | |
var voronoi = d3.voronoi() | |
.x(d => d.x) | |
.y(d => d.y); | |
/************************************** | |
** draw the circles and links | |
**************************************/ | |
var svg = d3.select('svg'); | |
var gray = '#666'; | |
// var circles = svg.selectAll('circle') | |
// .data(nodes).enter().append('circle') | |
// .attr('fill', gray) | |
// .attr('r', 2); | |
// var lines = svg.selectAll('line') | |
// .data(links).enter().append('line') | |
// .attr('stroke', gray); | |
var paths, triangles; | |
function ticked() { | |
// circles.attr('cx', (d) => d.x) | |
// .attr('cy', (d) => d.y); | |
// lines.attr('x1', (d) => d.source.x) | |
// .attr('y1', (d) => d.source.y) | |
// .attr('x2', (d) => d.target.x) | |
// .attr('y2', (d) => d.target.y) | |
triangles = voronoi.triangles(attendees); | |
// now create the triangles | |
paths = svg.selectAll('path') | |
.data(triangles); | |
paths.exit().remove(); | |
paths.enter().append('path') | |
.merge(paths) | |
.attr('d', d => { | |
return 'M' + _.map(d, function(point) { | |
return point.x + ',' + point.y; | |
}).join(' L') + 'Z'; | |
}).attr('fill', (d, i) => colors[i % 6]) | |
.attr('stroke', (d, i) => colors[i % 6]) | |
.attr('opacity', .85); | |
} | |
}); | |
</script> | |
</body> |