Skip to content

Instantly share code, notes, and snippets.

@kkirsche
Last active August 29, 2015 14:11
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save kkirsche/12c16941e5db0ddb6fce to your computer and use it in GitHub Desktop.
Reddit Bar Chart
{"description":"Reddit Bar Chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/SU2iPr0.png"}
var url = "http://www.reddit.com/r/destinythegame.json"
d3.xhr(url, 'application/javascript', function(error, json) {
if (error) return console.warn(error);
redditData = JSON.parse(json.response);
data = redditData.data.children
.sort(function(smallest, biggest) {
return smallest.data.score - biggest.data.score;
});
// Convert time in seconds to milliseconds
data.forEach(function(d) {
d.data.created *= 1000;
});
var margin = {top: 20, right: 30, bottom: 30, left: 60};
var height = 470 - margin.top - margin.bottom,
width = 686 - margin.left - margin.right;
var maxScore = d3.max(data, function(d) { return d.data.score; });
var timeExtent = d3.extent(data, function(d) {
return new Date(d.data.created);
});
// Scales
var xScale = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([0, width], 0.25);
var xScaleBrush = d3.time.scale()
.domain(timeExtent)
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0, maxScore])
.range([0, height]); // .range(starting value, ending value)
var yScaleLine = d3.scale.linear()
.domain([0, maxScore])
.range([height, 0]);
var yAxis = d3.svg.axis()
.scale(yScaleLine)
.orient('left')
.ticks(5);
var colorScale = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.data.score }))
.range(["#DA4453", "#A0D468"]);
//Components
var line = d3.svg.area()
.x(function(d, i) { return xScale(i); })
.y(function(d, i) { return yScaleLine(d.data.score); });
var brush = d3.svg.brush()
.x(xScaleBrush)
.extent([0, maxScore / 10])
chart = d3.select('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
g = chart.append('g').attr('transform', 'translate(67, 21)');
axis = chart.append('g')
.call(yAxis)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
bars = g.selectAll('rect')
.data(data)
.enter().append('rect')
.attr({
x: function(d, i) { return xScale(i); },
y: function(d, i ) { return height; },
height: 0,
width: xScale.rangeBand(),
fill: function(d) { return colorScale(d.data.score) }
})
.on("mouseenter", function() {
d3.select(this).attr('fill', '#FFF').attr('stroke', '#000');
})
.on("mouseleave", function() {
d3.select(this).attr('fill', function(d) { return colorScale(d.data.score) })
.attr('stroke', '');
})
.transition().delay(50).duration(1000)
.attr({
x: function(d, i) { return xScale(i); },
y: function(d, i ) { return height - yScale(d.data.score); },
height: function(d) { return yScale(d.data.score); },
width: xScale.rangeBand()
});
g.append("path")
.attr("d", line(data))
.style({
fill: "none",
stroke: "#000"
});
var brushGraphic = chart.append("g")
.call(brush);
brushGraphic.attr("transform", "translate("+margin.left+","+(height + margin.top + 10)+")")
.selectAll("rect").attr('height', 30);
brushGraphic.selectAll('.background').style({fill: '#4B9E9E', visibility: 'visible'});
brushGraphic.selectAll('.extent').style({fill: '#78C5C5', visibility: 'visible'});
brushGraphic.selectAll('.resize rect').style({fill: '#276C86', visibility: 'visible'});
var rect = brushGraphic.selectAll('rect.event')
.data(data);
// Let's display rectangles that show when in time each event
// or post occurred.
rect.enter().append('rect').classed('event', true);
rect.attr({
x: function(d) { return xScaleBrush(d.data.created); },
y:0,
width: 1,
height: 40
}).style({"pointer-events": "none"});
brush.on("brush", function() {
brushGraphic.selectAll('rect.event')
.style({
stroke: ""
});
}).on("brushend", function() {
var currentExtent = brush.extent();
var filtered = data.filter(function(d) {
return (d.data.created > currentExtent[0] && d.data.created < currentExtent[1]);
});
brushGraphic.selectAll('rect.event')
.data(filtered, function(d) {
return d.data.id;
})
.style({
stroke: function(d) { return colorScale(d.data.score); }
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment