Skip to content

Instantly share code, notes, and snippets.

@bshiro

bshiro/README.md

Last active September 8, 2016 12:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bshiro/bbafe0fd778818f80b0455b191d9ddb7 to your computer and use it in GitHub Desktop.
Save bshiro/bbafe0fd778818f80b0455b191d9ddb7 to your computer and use it in GitHub Desktop.
Download ZIP
NBA subreddits subs
Raw
README.md
Raw
data0.tsv
date ATL BKN BOS CHA CHI CLE DAL DEN DET GSW HOU IND LAC LAL MEM MIA MIL MIN NOP NYK OKC ORL PHI PHO POR SAS SAC TOR UTA WAS
2010 0 0 14 0 24 0 2 0 0 13 0 0 0 16 6 0 0 0 2 16 16 0 0 0 19 5 1 11 0 0
2011 67 10 213 24 370 63 118 28 9 89 0 9 45 526 32 91 25 59 13 130 151 82 63 0 277 70 31 80 34 4
2012 313 181 2312 263 2405 648 696 391 203 718 362 170 286 3030 168 1122 257 527 107 1389 1021 463 554 85 1031 708 341 446 184 228
2013 726 854 5330 532 6762 1487 1556 1037 1039 3298 1879 738 942 7904 687 3402 611 1287 407 3955 1927 855 1368 602 1808 2616 814 1980 604 792
2014 1475 1517 7936 1747 12033 4988 3034 1555 1999 6109 4020 1768 1994 12744 1160 5820 1279 2663 856 6598 3534 1544 2965 1808 4281 5644 1739 5607 1096 2320
2015 4160 2435 11606 3140 19056 9909 5583 2226 3197 11905 7834 2698 3581 17826 2217 7819 2753 5085 1529 10503 5638 2352 5496 2932 6744 8764 2903 10229 1925 4217
2016 5432 3071 16160 4399 21247 14279 6527 2790 4942 22033 8858 3440 5051 22901 2602 9333 4055 7364 2187 13426 7832 3186 8594 3497 8046 10952 4147 16042 2792 4804
Raw
data1.tsv
date ATL BKN BOS CHA CHI CLE DAL DEN DET GSW HOU IND LAC LAL MEM MIA MIL MIN NOP NYK OKC ORL PHI PHO POR SAS SAC TOR UTA WAS
2011 67 10 199 24 346 63 116 28 9 76 0 9 45 510 26 91 25 59 11 114 135 82 63 0 258 65 30 69 34 4
2012 246 171 2099 239 2035 585 578 363 194 629 362 161 241 2504 136 1031 232 468 94 1259 870 381 491 85 754 638 310 366 150 224
2013 413 673 3018 269 4357 839 860 646 836 2580 1517 568 656 4874 519 2280 354 760 300 2566 906 392 814 517 777 1908 473 1534 420 564
2014 749 663 2606 1215 5271 3501 1478 518 960 2811 2141 1030 1052 4840 473 2418 668 1376 449 2643 1607 689 1597 1206 2473 3028 925 3627 492 1528
2015 2685 918 3670 1393 7023 4921 2549 671 1198 5796 3814 930 1587 5082 1057 1999 1474 2422 673 3905 2104 808 2531 1124 2463 3120 1164 4622 829 1897
2016 1272 636 4554 1259 2191 4370 944 564 1745 10128 1024 742 1470 5075 385 1514 1302 2279 658 2923 2194 834 3098 565 1302 2188 1244 5813 867 587
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 3px;
}
.point {
fill: #FFF;
stroke: steelblue;
stroke-width: 2px;
}
form {
position: absolute;
left: 60px;
top: 10px;
font-size: 11px;
}
</style>
<body>
<form>
<label><input type="radio" name="mode" value="0" checked> Subscriptions </label><br>
<label><input type="radio" name="mode" value="1" > Yearly Increase</label>
</form>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal();
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.subs); });
var citydata=[], xextent=[];
var title=["Yearly Subscriptions in NBA Subreddits", "Yearly Increase of Subscriptions in NBA Subreddits"]
var activedata = 0;
d3.queue()
.defer(d3.tsv, "data0.tsv", type)
.defer(d3.tsv, 'data1.tsv', type)
.await(init);
function init(error, data0, data1) {
if (error) throw error;
var cities = data0.columns.slice(1).map(function(id) {
return {
id: id,
values: data0.map(function(d) {
return {id: id,date: d.date, subs: d[id]};
})
};
});
citydata.push(cities);
xextent.push(d3.extent(data0, function(d) { return d.date; }));
cities = data1.columns.slice(1).map(function (id) {
return {
id: id,
values: data1.map(function (d) {
return {id: id, date: d.date, subs: d[id]};
})
};
});
citydata.push(cities);
xextent.push(d3.extent(data1, function (d) {
return d.date;
}));
var cities = citydata[activedata];
var extent = xextent[activedata];
g.append("text")
.attr("id","charttitle")
.attr("x", width / 2 )
.attr("y", 10)
.attr("text-anchor", "middle")
.style("font", "16px sans-serif")
.text(title[activedata]);
x.domain(extent);
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.subs; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.subs; }); })
]);
z.domain(cities.map(function(c) { return c.id; }))
.range(["#E13A3E", "#061922", "#008348", "#1D1160", "#CE1141", "#860038", "#007DC5", "#4D90CD", "#ED174C", "#FDB927",
"#CE1141", "#FFC633", "#ED174C", "#FDB927", "#0F586C", "#98002E", "#00471B", "#005083", "#002B5C", "#006BB6",
"#007DC3", "#007DC5", "#ED174C", "#E56020", "#E03A3E", "#BAC3C9", "#724C9F", "#CE1141", "#002B5C", "#002B5C"])
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Subscriptions");
var city = g.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) {return z(d.id); })
.style("opacity", "0.3")
.on("mouseover", function (d) {
d3.select(this.parentNode).selectAll("g text")
.style("font-weight","bold")
.style("font-size","15px")
.style("opacity", "1.0");
d3.select(this)
.style("stroke-width", 10)
.style("opacity", "1.0");
})
.on("mouseout",function(){
d3.select(this.parentNode).selectAll("g text")
.style("font-weight","normal")
.style("font-size","10px")
.style("opacity", "0.3");
d3.select(this)
.style("stroke-width", 3)
.style("opacity", "0.3");
});
city.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.subs) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.style("opacity", "0.3")
.text(function(d) { return d.id; })
.on("mouseover", function (d) {
d3.select(this.parentNode).selectAll("g path")
.style("stroke-width", 10)
.style("opacity", "1.0");
d3.select(this)
.style("font-weight","bold")
.style("font-size","15px")
.style("opacity", "1.0");
})
.on("mouseout",function() {
d3.select(this.parentNode).selectAll("g path")
.style("stroke-width", 3).style("opacity", "0.3");
d3.select(this)
.style("font-weight","normal")
.style("font-size","10px")
.style("opacity", "0.3");
});
};
d3.selectAll("input").on("change", updateData);
function updateData() {
//activedata = (activedata+1)%2;
activedata = parseInt(this.value);
var cities = citydata[activedata];
var extent = xextent[activedata];
x.domain(extent);
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.subs; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.subs; }); })
]);
g.select("#charttitle")
.text(title[activedata]);
g.select(".axis.axis--x")
.transition()
.duration(750)
.call(d3.axisBottom(x));
g.select(".axis.axis--y")
.transition()
.duration(750)
.call(d3.axisLeft(y))
var city = g.selectAll(".city")
.data(cities)
city.select(".line")
.transition()
.duration(750)
.attr("d", function(d) { return line(d.values); })
city.select("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.transition()
.duration(750)
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.subs) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.text(function(d) { return d.id; })
}
function type(d, _, columns) {
d.date = parseTime(d.date);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-83865840-1', 'auto');
ga('send', 'pageview');
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment