Skip to content

Instantly share code, notes, and snippets.

@sxywu
Last active April 25, 2017 19:42
Show Gist options
  • Save sxywu/4892f8fa5555a453058e964ddbcff065 to your computer and use it in GitHub Desktop.
Save sxywu/4892f8fa5555a453058e964ddbcff065 to your computer and use it in GitHub Desktop.
d3.unconf 2016, v9
license: mit
First Name Last Name Ticket Type version first favorite
Alan McLean General Admission v1 Scatter plot d3.timer
alanna scott General Admission v3 Bar chart, Line chart
Alastair Dant General Admission v1 Treemap d3.forceSimulation
Alex Macy General Admission v3 Line chart d3.transition
Amit Patel General Admission v1 N/A d3.behavior.zoom
Andrew Wong Invited v3 Radial plot d3.scale
Angela Pablo Invited v2 Scatter plot
Anna Smylie General Admission v3 Bar chart
Anna Vital Invited v2 Tree d3.line
Anuja Verma Scholarship v3 Tree d3.hierarchy
Bo Ericsson General Admission v3 Line chart selection.data
Brad Lyon General Admission v2 Chord diagram d3.selectAll
Brent Cohn General Admission v3 Bar plot d3.forceSimulation
Brian Bailey Scholarship v4 Bar chart d3.voronoi
Casey Haber Scholarship v3 Bar chart d3.force
Chris Polis General Admission v3 Time series d3.transition
christophe viau Invited v1 Tooltip d3.axis
Daniel Overstreet General Admission v3 Scatter plot d3.nest
Daniel Wolfe General Admission v3 Map d3.transition
David Richards General Admission v3 Force d3.interpolate
David Schnurr General Admission v3 Charting library d3.voronoi
David Lin General Admission v3 Bar chart selection.data
Don McCurdy General Admission v3 Choropleth d3.voronoi
Eric Socolofsky General Admission v3 Map d3.transition
Erik Cunningham General Admission v3 Scatter plot selection.data
Erik Hazzard General Admission v1 Radar chart d3.voronoi
Francois Chabbey General Admission v3 Bar chart d3.scale
Marcos Iglesias General Admission v3 Bar chart d3.selectAll
Hourann Bosci General Admission v3 Map, Bubble chart d3.scaleOrdinal
Ian Johnson Invited v1 Bar chart d3.scaleLinear
Ivy Wang General Admission v1 Network graph nest.rollup
James Womack Invited v3 Scatter plot d3.scale
James Wenzel Scholarship v3 Line chart nest.map
Jamie Popkin General Admission v2 Map transform
Janine Heiser Invited v3 Bar chart d3.selection
Jay Mahabal General Admission v3 Bar chart d3.scale
Jeff Zerger Invited v2 Map d3.geoProjection
Jeffrey Catania General Admission v2 Line chart d3.voronoi
Jennifer Lee Invited v3 Bar chart d3.transition
Jeremy Wong General Admission v3 Line Chart d3.geoProjection
Jeremy Wildfire General Admission v2 Bar chart d3.scale
Jim Vallandingham General Admission v2 Bubble chart d3.nest
Jing Lu Scholarship v4 Scatter plot d3.brush
John Schulz General Admission v2 Area chart d3.histogram
John Huynh Scholarship v3 Scatter plot d3.transition
Jon Sadka Invited v4 Bar chart d3.transition
Jon Nguyen General Admission v2 Bar chart d3.extent
Jonathan Nesci General Admission v2 Bar chart scale.invert
Kai Chang Invited v1 Chord diagram d3.interpolateMagma
Ken Penn General Admission v3 Bar chart d3.forceSimulation
Kerry Rodden Invited v1 Chord diagram d3.scale
Krist Wongsuphasawat General Admission v3 Scatter plot d3.selection, d3.scale
Kristen Judd General Admission v3 Pie chart d3.transition
Kristin Henry Invited v2 Chloropleth d3.scale
Leland Lee Scholarship v3 Bar chart arcTween
Logan Carter General Admission v4 Pie chart, Donut chart d3.pie
Ludwig Schubert Scholarship v3 Tree projection.fitSize
Marie Swarzenski Scholarship v3 Line chart d3.transition
Mark Vital General Admission v2 Tree d3.line
Matthew Isanuk Invited v4 Scatter plot d3.scale
Mauro Perez Scholarship v3 Sunburst selection.data
Micah Stubbs Invited v3 Map d3.request
Michael Freeman General Admission v2 Bar chart d3.pack
Mike Bostock Invited v1 N/A d3.pack
Minwei Xu Scholarship v4 bar chart d3.layout.force
Naoya Kanai Scholarship v3 bar chart d3.scale
Noah Veltman Invited v2 Line chart d3.transition
Patrick Sun General Admission v3 Scatter Plot selection.attr
Paul Rosenzweig General Admission v4 Scatter plot d3.selectAll
Paul Van slembrouck Invited v1 Bar chart d3.scale
Philippe Rivière Invited v3 Map d3.geoProjection
Phillip Mispagel General Admission v4 Donut chart d3.scale, d3.zoom
Ramesh Sampath General Admission v4 Scatter plot d3.scale
Ric Cheng Scholarship v3 Line chart d3.brush
Robert Crocker Invited v3 Bar chart d3.nest
Robert Harris General Admission v2 Force d3.scale
Roger Fischer Invited v3 Map d3.geo
Rumman Chowdhury Invited v3 Line chart d3.voronoi
Saniya Jesupaul Scholarship v3 Scatter plot d3.color
Sara Quigley Invited v2 Circle pack d3.nest
Sara Schnadt General Admission v3 Scatter plot
Sarah Kwak Scholarship v4 Donut chart d3.transition
Seemant Kulleen Invited v3 Donut chart d3.nest
Shan Carter Invited v2 Bubble chart d3.scaleLinear
Shelby Sturgis Invited v3 Scatter plot d3.scale
Shirley Wu Invited v2 Tree d3.forceSimulation
Siu-Mei Man Invited v4 Bar chart d3.voronoi
Susie Lu Invited v2 Bar chart d3.nest
Tarek Rached General Admission v2 Bar chart d3.layout.pack
Tim Hyon Hyon General Admission v3 Parallel coordinates d3.scale
Tony Chu Invited v3 Bubble chart d3.scale
Toshiyuki Hayashi General Admission v3 Network graph selection.enter, selection.exit
Vasco Asturiano General Admission v2 Force selection.data
Victor Powell General Admission v4 Scatter plot d3.geo.path
Visnu Pitiyanuvath General Admission v2 Bar chart d3.nest
Xianlin Hu General Admission v3 Force d3.transition
Yukiko Steineman General Admission v3 Bar chart d3.color
Zack DeSario Invited 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="https://cdn.rawgit.com/gka/chroma.js/master/chroma.min.js"></script>
<style>
body {
/* background-color: #000; */
}
svg {
width: 2000px;
height: 2000px
}
</style>
</head>
<body>
<svg></svg>
<script>
var midpoint = -2/3;
var halfSide = Math.sqrt(1 / 3);
var triangle = [
(-halfSide) + ',-1',
(halfSide) + ',-1',
'0,0'
];
var favoritesScale = d3.scaleLinear()
.range([midpoint - .05, -.85]);
var versionsScale = d3.scaleOrdinal()
.range(_.rangeRight(3, 7));
var firstsScale = d3.scaleOrdinal();
var hexScale = 75;
var hexSize = hexScale * 2 / Math.sqrt(3);
d3.csv('data.csv', data => {
/**************************************
** process data and add them to scales as domain
**************************************/
var attendees = _.map(data, d => {
return {
name: d['First Name'],
first: d.first.split(', ')[0],
favorite: d.favorite.split(', ')[0],
version: parseInt(d.version.replace('v', '')),
};
});
var firsts = _.chain(attendees)
.map('first').flatten()
.countBy().toPairs()
.sortBy(d => -d[1])
.map(0).value();
var favorites = _.chain(attendees)
.map('favorite').flatten()
.countBy().value();
var versions = _.chain(attendees)
.map('version').flatten()
.countBy().toPairs()
.sortBy(d => -d[1])
.filter(d => d[1] > 1)
.map(0).value();
// update colors with number of classes
var colors = chroma.cubehelix()
.start(280)
// .rotations(-1 / firsts.length)
.gamma(0.5)
.lightness([0.3, 0.4])
.scale() // convert to chroma.scale
// .correctLightness()
.colors(firsts.length);
firstsScale.domain(firsts).range(colors);
versionsScale.domain(_.range(1, 5));
var maxFavorites = _.max(_.values(favorites));
favoritesScale.domain([1, maxFavorites]);
/**************************************
** draw the hexagons
**************************************/
var svg = d3.select('svg').append('g');
var perRow = 5;
var hex = svg.selectAll('.hex')
.data(attendees).enter().append('g')
.classed('hex', true)
.attr('transform', (d, i) => {
var row = Math.floor(i / perRow);
var x = (i % perRow * 3.2 + 1.5) * hexSize;
if (row % 2) {
x += 1.6 * hexSize;
}
var y = (row * 1.05 + 2) * hexScale;
return 'translate(' + [x, y] + ')scale(' + hexScale + ')';
}).on('mouseover', d => console.log(d));
var triangles = hex.selectAll('triangle')
.data((d, j) => {
return _.times(versionsScale(d.version), i => {
if (!favorites[d.favorite]) debugger
return {
angle: i * 60,
midpoint: favoritesScale(favorites[d.favorite]),
color: firstsScale(d.first),
// color: colors[j],
};
});
}).enter().append('g')
.classed('triangle', true)
.attr('transform', d => 'rotate(' + d.angle + ')');
triangles.append('polygon')
.attr('points', triangle.join(' '))
.attr('fill', d => chroma(d.color).darken(2.5));
// .attr('fill', '#fff');
triangles.selectAll('.subtri')
.data(d => _.times(3, i => {
return Object.assign({
subangle: i * 120,
subcolor: chroma(d.color).saturate(1.5).brighten(i),
}, d);
})).enter().append('polygon')
.classed('subtri', true)
.attr('transform', d => 'rotate(' + d.subangle + ' 0 ' + midpoint + ')')
.attr('points', d => {
return [
(-halfSide) + ',-1',
'0,' + d.midpoint,
halfSide + ',-1'
].join(' ');
}).attr('fill', d => d.subcolor);
/**************************************
** put in the text
**************************************/
var textY = svg.node().getBoundingClientRect().bottom;
var textX = svg.node().getBoundingClientRect().right;
var fontSize = 60;
svg.append('text')
.attr('x', textX - fontSize * .75)
.attr('y', textY - fontSize * .85)
.attr('text-anchor', 'end')
.attr('dy', '.35em')
.attr('font-size', fontSize)
.style('font-family', 'courier')
.text('d3.unconf 2016')
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment