Playing with Technology | Listen Notes

ABOUT THIS PODCAST

Any sufficiently advanced technology is indistinguishable from magic. ~Arthur C. Clarke
English
United States
10 episodes
since Sep, 2011

LATEST EPISODE

Playing with D3.js

function wpd3_4451_0 () {var margin = {top: 20, right: 20, bottom: 120, left: 40}, width = 700 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x0 = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var x1 = d3.scale.ordinal(); var y = d3.scale.linear() .range([height, 0]); var color = d3.scale.ordinal() .range(["#eeeeee", "#404040", "#93cddd", "#215968", "#d7e4bd", "#4f6228"]); var xAxis = d3.svg.axis() .scale(x0) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(d3.format(".2s")); var svg = d3.select(".wpd3-4451-0").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.tsv("http://jon.breitenbucher.net/wp-content/uploads/2014/04/historical.tsv", function(error, data) { var allocationNames = d3.keys(data[0]).filter(function(key) { return key !== "Category"; }); data.forEach(function(d) { d.allocations = allocationNames.map(function(name) { return {name: name, value: +d[name]}; }); }); x0.domain(data.map(function(d) { return d.Category; })); x1.domain(allocationNames).rangeRoundBands([0, x0.rangeBand()]); y.domain([0, d3.max(data, function(d) { return d3.max(d.allocations, function(d) { return d.value; }); })]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", function(d) { return "rotate(-65)" }); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("$"); var state = svg.selectAll(".state") .data(data) .enter().append("g") .attr("class", "g") .attr("transform", function(d) { return "translate(" + x0(d.Category) + ",0)"; }); state.selectAll("rect") .data(function(d) { return d.allocations; }) .enter().append("rect") .attr("width", x1.rangeBand()) .attr("x", function(d) { return x1(d.name); }) .attr("y", function(d) { return y(d.value); }) .attr("height", function(d) { return height - y(d.value); }) .style("fill", function(d) { return color(d.name); }); var legend = svg.selectAll(".legend") .data(allocationNames.slice().reverse()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(20," + i * 20 + ")"; }); legend.append("text") .attr("x", width - margin.right - 275) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "start") .text(function(d) { return d; }); legend.append("rect") .attr("x", width - margin.right - 300 ) .attr("width", 18) .attr("height", 18) .style("fill", color); });}; wpd3_4451_0();This is the data on Campus Council allocations of the student activity fee for the past three years. I wanted to see how easy/hard it would be to replicate what I had done in Excel using D3. It turned out to be quite a challenge. I’m not sure I would have gotten this without the examples. The library seems very useful and worth some further exploration.

PREVIOUS EPISODES

IN LISTEN LATER

Be the first to save this podcast to Listen Later.

PODCASTER INTERVIEW

We interview podcasters, which is to help promote their podcasts and to help listeners and new podcasters understand what's behind the scene of producing a podcast.
If you are the producer of this podcast, do you want to do be interviewed?

EDIT

Thank you for helping to keep the podcast database up to date.