Skip to content

Instantly share code, notes, and snippets.

@DeBraid

DeBraid/_.md

Created February 13, 2014 14:36
Show Gist options
  • Save DeBraid/8976094 to your computer and use it in GitHub Desktop.
Save DeBraid/8976094 to your computer and use it in GitHub Desktop.
Download ZIP
Stacked to Grouped transition
Raw
_.md
Raw
config.json
{"description":"Stacked to Grouped transition","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"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},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data2.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"datafail.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"nototal.csv":{"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,"thumbnail":"http://i.imgur.com/M3GfyRM.png"}
Raw
data2.csv
Category Total Under $1000 $1000-$9999 $10000-19999 $20000-99999 100K - $999999 Over $1 Million
Music 14744 1434 10935 1709 634 31 1
Film & Video 12796 1216 7748 2008 1668 153 3
Art 5491 1035 3782 457 203 14 0
Publishing 4985 763 3258 588 351 25 0
Theater 3502 465 2634 258 137 8 0
Games 2822 150 1091 541 763 248 29
Design 2433 146 852 458 719 249 9
Food 2042 93 1002 528 397 22 0
Comics 1703 216 1024 246 187 29 1
Fashion 1464 149 816 229 234 35 1
Photography 1426 219 936 182 87 1 1
Technology 1212 52 385 173 353 238 11
Dance 1177 95 976 84 22 0 0
Raw
datafail.csv
Category Total 0% 1%-20% 21%-40% 41%-60% 61%-80% 81%-99%
Film & Video 19281 3863 12398 2053 663 213 91
Music 11991 2668 6930 1602 571 165 55
Publishing 10459 2257 6646 1018 387 109 42
Art 5936 1068 3652 782 301 90 43
Games 5255 346 3750 649 320 117 73
Design 3900 221 2585 644 290 95 65
Fashion 3498 639 2218 443 117 55 26
Food 3017 182 2182 418 164 56 15
Photography 2494 485 1515 336 103 44 11
Technology 2275 171 1610 294 122 46 32
Theater 1945 345 1182 267 105 31 15
Comics 1770 176 1144 285 109 42 14
Dance 489 76 285 73 38 14 3
Raw
inlet.js
var data = tributary.data2;
var datafail = tributary.datafail;
var datanototal = tributary.nototal;
console.log("Check 1");
console.table(data);
console.log("Check 2");
var margin = {top: 20, right: 50, bottom: 100, left: 75},
width = 825 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([25, width], 0.1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#98ABC5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
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("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var stacked = function(){
console.log("Check 2");
console.table(data);
console.log("Check 3");
color.domain(d3.keys(data[0]).filter(function(key){ return key !== "Category" }));
data.forEach(function(d) {
var y0 = 0;
d.groups = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.groups[d.groups.length - 1].y1;
});
console.log("Check 4");
console.table(data);
console.log("Check 5");
data.sort(function(a, b) { return b.total - a.total; });
x0.domain(data.map(function(d) { return d.Category; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
//********** AXES *******************
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(-45)"
});
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(20,0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr({"x": -150, "y": -70})
.attr("dy", ".75em")
.style("text-anchor", "end")
.text("# of campaigns");
//********** BARS *******************
var bars = svg.selectAll(".bars")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.Category) + ",0)"; });
bars.selectAll("rect")
.data(function(d) { return d.groups; })
.enter().append("rect")
.attr("width", x0.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
//********** LEGEND *******************
var legend = svg.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-20," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
};
function grouped() {
var ranges = d3.keys(data[0]).filter(function(key) { return key !== "Category"; });
data.forEach(function(d) {
d.groups = ranges.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Category; }));
x1.domain(ranges).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.groups, function(d) { return d.value; }); })]);
//********** AXES *******************
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(-45)"
});
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(20,0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr({"x": -150, "y": -70})
.attr("dy", ".75em")
.style("text-anchor", "end")
.text("# of campaigns");
//********** BARS *******************
var bars = svg.selectAll(".bars")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.Total) + ",0)"; });
bars.selectAll("rect")
.data(function(d) { return d.groups; })
.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); });
//********** LEGEND *******************
var legend = svg.selectAll(".legend")
.data(ranges.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-20," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
}
function change() {
clearTimeout(timeout);
if (this.value === "grouped") grouped();
else stacked();
}
// ****** SELECT CHART TYPE **********
//grouped()
stacked();
/*
data = datanototal // correct for stacked
*/
Raw
nototal.csv
Category Under $1000 $1000-$9999 $10000-19999 $20000-99999 100K - $999999 Over $1 Million
Music 1434 10935 1709 634 31 1
Film & Video 1216 7748 2008 1668 153 3
Art 1035 3782 457 203 14 0
Publishing 763 3258 588 351 25 0
Theater 465 2634 258 137 8 0
Games 150 1091 541 763 248 29
Design 146 852 458 719 249 9
Food 93 1002 528 397 22 0
Comics 216 1024 246 187 29 1
Fashion 149 816 229 234 35 1
Photography 219 936 182 87 1 1
Technology 52 385 173 353 238 11
Dance 95 976 84 22 0 0
Raw
style.css
svg {
font: 15px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment