Skip to content

Instantly share code, notes, and snippets.

@lorenzopub

lorenzopub/.block

Created April 6, 2017 05:48
Show Gist options
  • Save lorenzopub/7b4dccda02f1b2c7f290343d78f4ca97 to your computer and use it in GitHub Desktop.
Save lorenzopub/7b4dccda02f1b2c7f290343d78f4ca97 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Small Multiples - Step 5
Raw
.block
license: mit
Raw
askmefi_category_year.tsv
year category n
2004 clothing, beauty, & fashion 141
2004 computers & internet 2489
2004 education 151
2004 food & drink 275
2004 grab bag 285
2004 health & fitness 379
2004 home & garden 344
2004 human relations 245
2004 law & government 292
2004 media & arts 825
2004 pets & animals 127
2004 religion & philosophy 63
2004 science & nature 133
2004 shopping 345
2004 society & culture 250
2004 sports, hobbies, & recreation 241
2004 technology 446
2004 travel & transportation 491
2004 work & money 400
2004 writing & language 241
2005 clothing, beauty, & fashion 203
2005 computers & internet 2200
2005 education 201
2005 food & drink 324
2005 grab bag 248
2005 health & fitness 590
2005 home & garden 476
2005 human relations 376
2005 law & government 264
2005 media & arts 987
2005 pets & animals 153
2005 religion & philosophy 74
2005 science & nature 195
2005 shopping 242
2005 society & culture 296
2005 sports, hobbies, & recreation 324
2005 technology 617
2005 travel & transportation 660
2005 work & money 515
2005 writing & language 285
2006 clothing, beauty, & fashion 195
2006 computers & internet 2114
2006 education 190
2006 food & drink 353
2006 grab bag 263
2006 health & fitness 612
2006 home & garden 379
2006 human relations 411
2006 law & government 291
2006 media & arts 838
2006 pets & animals 132
2006 religion & philosophy 85
2006 science & nature 203
2006 shopping 208
2006 society & culture 273
2006 sports, hobbies, & recreation 360
2006 technology 528
2006 travel & transportation 631
2006 work & money 572
2006 writing & language 227
2007 clothing, beauty, & fashion 296
2007 computers & internet 2402
2007 education 352
2007 food & drink 541
2007 grab bag 394
2007 health & fitness 890
2007 home & garden 634
2007 human relations 678
2007 law & government 360
2007 media & arts 1141
2007 pets & animals 202
2007 religion & philosophy 100
2007 science & nature 227
2007 shopping 311
2007 society & culture 361
2007 sports, hobbies, & recreation 472
2007 technology 743
2007 travel & transportation 935
2007 work & money 861
2007 writing & language 347
2008 clothing, beauty, & fashion 432
2008 computers & internet 2852
2008 education 441
2008 food & drink 687
2008 grab bag 560
2008 health & fitness 986
2008 home & garden 733
2008 human relations 947
2008 law & government 523
2008 media & arts 1449
2008 pets & animals 269
2008 religion & philosophy 120
2008 science & nature 284
2008 shopping 389
2008 society & culture 452
2008 sports, hobbies, & recreation 615
2008 technology 917
2008 travel & transportation 1116
2008 work & money 1137
2008 writing & language 447
2009 clothing, beauty, & fashion 489
2009 computers & internet 2592
2009 education 521
2009 food & drink 844
2009 grab bag 580
2009 health & fitness 1207
2009 home & garden 897
2009 human relations 1140
2009 law & government 500
2009 media & arts 1577
2009 pets & animals 285
2009 religion & philosophy 119
2009 science & nature 294
2009 shopping 355
2009 society & culture 429
2009 sports, hobbies, & recreation 662
2009 technology 963
2009 travel & transportation 1206
2009 work & money 1353
2009 writing & language 466
2010 clothing, beauty, & fashion 410
2010 computers & internet 2046
2010 education 488
2010 food & drink 724
2010 grab bag 535
2010 health & fitness 1132
2010 home & garden 774
2010 human relations 1154
2010 law & government 420
2010 media & arts 1283
2010 pets & animals 251
2010 religion & philosophy 92
2010 science & nature 272
2010 shopping 337
2010 society & culture 386
2010 sports, hobbies, & recreation 532
2010 technology 783
2010 travel & transportation 1022
2010 work & money 1048
2010 writing & language 398
2011 clothing, beauty, & fashion 406
2011 computers & internet 1777
2011 education 426
2011 food & drink 689
2011 grab bag 491
2011 health & fitness 1110
2011 home & garden 769
2011 human relations 1184
2011 law & government 385
2011 media & arts 1279
2011 pets & animals 272
2011 religion & philosophy 90
2011 science & nature 249
2011 shopping 385
2011 society & culture 406
2011 sports, hobbies, & recreation 479
2011 technology 749
2011 travel & transportation 971
2011 work & money 1133
2011 writing & language 369
2012 clothing, beauty, & fashion 485
2012 computers & internet 1671
2012 education 448
2012 food & drink 645
2012 grab bag 510
2012 health & fitness 1167
2012 home & garden 791
2012 human relations 1466
2012 law & government 419
2012 media & arts 1247
2012 pets & animals 288
2012 religion & philosophy 84
2012 science & nature 250
2012 shopping 343
2012 society & culture 375
2012 sports, hobbies, & recreation 492
2012 technology 729
2012 travel & transportation 962
2012 work & money 1256
2012 writing & language 380
2013 clothing, beauty, & fashion 379
2013 computers & internet 1101
2013 education 306
2013 food & drink 498
2013 grab bag 394
2013 health & fitness 887
2013 home & garden 606
2013 human relations 1115
2013 law & government 276
2013 media & arts 952
2013 pets & animals 221
2013 religion & philosophy 53
2013 science & nature 177
2013 shopping 258
2013 society & culture 306
2013 sports, hobbies, & recreation 335
2013 technology 551
2013 travel & transportation 761
2013 work & money 913
2013 writing & language 296
2014 clothing, beauty, & fashion 256
2014 computers & internet 686
2014 education 220
2014 food & drink 344
2014 grab bag 286
2014 health & fitness 587
2014 home & garden 482
2014 human relations 753
2014 law & government 233
2014 media & arts 716
2014 pets & animals 130
2014 religion & philosophy 34
2014 science & nature 132
2014 shopping 190
2014 society & culture 205
2014 sports, hobbies, & recreation 235
2014 technology 338
2014 travel & transportation 570
2014 work & money 682
2014 writing & language 222
Raw
index.html
<!DOCTYPE html>
<script src="https://unpkg.com/d3@4.6.0"></script>
<script src="https://unpkg.com/d3fc@12.1.0"></script>
<style>
body {
font: 12px sans-serif;
}
.area {
fill: #cec6b9;
}
#small-multiples > div {
display: inline-block;
height: 185px;
width: 50%
}
@media (min-width: 600px) {
#small-multiples > div {
width: 33%
}
}
@media (min-width: 800px) {
#small-multiples > div {
width: 25%
}
}
@media (min-width: 1000px) {
#small-multiples > div {
width: 20%
}
}
.tooltip .x-axis .tick {
display: none;
}
.x-axis .domain, .x-axis .tick path,
.y-axis .domain, .y-axis .tick path {
display: none;
}
.plot-area {
overflow: visible !important;
}
.x-axis {
height: 1.5em !important;
}
.gridline-x {
stroke: white;
}
.point {
fill: black;
}
.point text {
text-anchor: middle;
transform: translateY(-10px);
font-size: 10px;
stroke: none;
}
.bottom-handle {
text-anchor: middle;
alignment-baseline: hanging;
font-size: 10px;
transform: translateY(1.5em);
}
.top-handle {
display: none;
}
.annotation-line line {
display: none;
}
</style>
<div id='small-multiples'></div>
<script>
d3.tsv('askmefi_category_year.tsv')
.row(r => ({category: r.category, n: Number(r.n), year: Number(r.year)}))
.get(data => {
var nested = d3.nest()
.key(k => k.category)
.entries(data);
nested.forEach(g => {
g.tip = [];
});
var yExtent = fc.extentLinear()
.accessors([function(d) { return d.n; }])
.pad([0, 0.2])
.include([0]);
var xExtent = fc.extentLinear()
.accessors([function(d) { return d.year; }]);
var area = fc.seriesSvgArea()
.crossValue(function(d) { return d.year; })
.mainValue(function(d) { return d.n; });
var line = fc.seriesSvgLine()
.crossValue(function(d) { return d.year; })
.mainValue(function(d) { return d.n; });
var gridlines = fc.annotationSvgGridline()
.xTicks(0)
.yTicks(3);
var point = fc.seriesSvgPoint()
.crossValue(function(d) { return d.year; })
.mainValue(function(d) { return d.value; })
.size(25)
.decorate(function(selection) {
selection.enter()
.append('text');
selection.select('text')
.text(d => d.value)
})
var line = fc.annotationSvgLine()
.orient('vertical')
.value(function(d) { return d.year; })
.decorate(function(selection) {
selection.enter()
.select('.bottom-handle')
.append('text');
selection.select('.bottom-handle text')
.text(d => d.year)
})
var multi = fc.seriesSvgMulti()
.series([area, line, gridlines, line, point])
.mapping((data, index, series) => {
switch (series[index]) {
case point:
case line:
return data.tip;
default:
return data.values;
}
});
var xScale = d3.scaleLinear();
// create a chart
var chart = fc.chartSvgCartesian(
xScale,
d3.scaleLinear())
.yDomain(yExtent(data))
.xDomain(xExtent(data))
.xLabel(d => d.key)
.yTicks(3)
.xTicks(2)
.xTickFormat(d3.format('0'))
//.xTickValues([2004, 2014])
.yOrient('left')
.plotArea(multi);
function render() {
// render
var container = d3.select('#small-multiples')
var update = container.selectAll('div.multiple')
.data(nested);
update.enter()
.append('div')
.classed('multiple', true)
.merge(update)
.call(chart)
.classed('tooltip', d => d.tip.length);
// add the pointer component to the plot-area, re-rendering
// each time the event fires.
var pointer = fc.pointer()
.on('point', function(event) {
// determine the year
if (event.length) {
var year = Math.round(xScale.invert(event[0].x));
// add the point to each series
nested.forEach(group => {
var value = group.values.find(v => v.year === year);
group.tip = [{
year: year,
value: value.n
}];
})
} else {
nested.forEach(g => {
g.tip = [];
})
}
render();
});
d3.selectAll('#small-multiples .plot-area')
.call(pointer);
}
render();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment