Built with blockbuilder.org
forked from ColinEberhardt's block: Interactive Small Multiples - Step 1
forked from ColinEberhardt's block: Interactive Small Multiples - Step 2
license: mit |
Built with blockbuilder.org
forked from ColinEberhardt's block: Interactive Small Multiples - Step 1
forked from ColinEberhardt's block: Interactive Small Multiples - Step 2
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 |
<!DOCTYPE html> | |
<script src="https://unpkg.com/d3@4.6.0"></script> | |
<script src="https://unpkg.com/d3fc@12.1.0"></script> | |
<style> | |
.area { | |
fill: #cec6b9; | |
} | |
#small-multiples > div { | |
display: inline-block; | |
width: 240px; | |
height: 185px; | |
} | |
.x-axis .domain, .x-axis .tick path, | |
.y-axis .domain, .y-axis .tick path { | |
display: none; | |
} | |
.x-axis { | |
height: 1.5em !important; | |
} | |
.gridline-x { | |
stroke: white; | |
} | |
</style> | |
<div id='small-multiples'></div> | |
<script> | |
d3.tsv('askmefi_category_year.tsv') | |
.row(function(r) { | |
return { | |
category: r.category, | |
n: Number(r.n), | |
year: Number(r.year) | |
} | |
}) | |
.get(function(data) { | |
var nested = d3.nest() | |
.key(function(k) { return k.category; }) | |
.entries(data); | |
var yExtent = fc.extentLinear() | |
.accessors([function(d) { return d.n; }]) | |
.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 multi = fc.seriesSvgMulti() | |
.series([area, line, gridlines]) | |
.mapping(function(data, index, series) { | |
return data.values; | |
}); | |
// create a chart | |
var chart = fc.chartSvgCartesian( | |
d3.scaleLinear(), | |
d3.scaleLinear()) | |
.yDomain(yExtent(data)) | |
.xDomain(xExtent(data)) | |
.xLabel(function(d) { return d.key; }) | |
.yTicks(3) | |
.xTicks(2) | |
.xTickFormat(d3.format('0')) | |
.yOrient('left') | |
.plotArea(multi); | |
// render | |
d3.select('#small-multiples') | |
.selectAll('div') | |
.data(nested) | |
.enter() | |
.append('div') | |
.call(chart); | |
}); | |
</script> |