Skip to content

Instantly share code, notes, and snippets.

@sxywu

sxywu/.block

Last active October 4, 2016 05:20
Show Gist options
  • Save sxywu/b83005282e24377b953adf96b41b4f66 to your computer and use it in GitHub Desktop.
Save sxywu/b83005282e24377b953adf96b41b4f66 to your computer and use it in GitHub Desktop.
Download ZIP
d3unconf 2016, v1
Raw
.block
license: mit
Raw
data.csv
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
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment