Built with blockbuilder.org
forked from sxywu‘s block: d3.unconf 2016, v6
forked from sxywu‘s block: d3.unconf 2016, v7
<!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="//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: 1000px;
height: 1000px
}
</style>
</head>
<body>
<svg></svg>
<script>
var colors = chroma.cubehelix()
// .start(200)
// .rotations(1.5)
.gamma(0.7)
.lightness([0.3, 0.8]);
var midpoint = -2/3;
var halfSide = Math.sqrt(1 / 3);
var triangle = [
(-halfSide) + ',-1',
(halfSide) + ',-1',
'0,0'
];
var favoritesScale = d3.scaleLinear()
.range([-.95, midpoint - .01]);
var versionsScale = d3.scaleOrdinal()
.domain(_.range(1, 5)).range(_.rangeRight(3, 7));
var firstsScale = d3.scaleOrdinal();
var hexScale = 25;
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
colors = colors.scale() // convert to chroma.scale
.correctLightness()
.colors(firsts.length);
firstsScale.domain(firsts).range(colors);
versionsScale.domain(versions);
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 + 1.5) * hexSize;
if (row % 2) {
x += 1.5 * hexSize;
}
var y = (row + 1) * hexScale;
return 'translate(' + [x, y] + ')scale(' + hexScale + ')';
});
var triangles = hex.selectAll('triangle')
.data(d => {
var start = _.random(6);
return _.times(versionsScale(d.version), i => {
if (!favorites[d.favorite]) debugger
return {
angle: ((i + start) % 6) * 60,
midpoint: favoritesScale(favorites[d.favorite]),
color: firstsScale(d.first),
};
});
}).enter().append('g')
.classed('triangle', true)
.attr('transform', d => 'rotate(' + d.angle + ')');
triangles.append('polygon')
.attr('points', triangle.join(' '))
.attr('fill', d => d.color);
triangles.selectAll('.subtri')
.data(d => _.times(3, i => {
return Object.assign({
subangle: i * 120,
}, 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', '#fff');
});
</script>
</body>
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