Skip to content

Instantly share code, notes, and snippets.

@poezn poezn/_.md

Created Feb 28, 2013
Embed
What would you like to do?
INFO 247 - Lab 7 - #3 - Putting it together (full code)
{"description":"INFO 247 - Lab 7 - #3 - Putting it together (full code)","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":15},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":15},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":15},"matrix-data.json":{"default":true,"vim":false,"emacs":false,"fontSize":15}},"fullscreen":true,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
// School of Information, UC Berkeley
// INFO 247 Lab 7: D3.js
// http://blogs.ischool.berkeley.edu/i247s13/lab-7-d3-js-part-2/
// get the data from the 'matrix-data.json' data file
var data = tb['matrix-data'];
// default settings
var squareWidth = 41,
legendSquareWidth = 24,
min = 17,
max = 39,
median = 25;
// Create a color scale that has the following colors:
// minimum: 15; red
// maximum: 40; green
// center: 23; yellow
var colorScale = d3.scale.linear()
.domain([min, median, max])
.range(['#F8696B', '#FFEF94', '#8dca7e']);
// for each race, let's add a COLUMN that will eventually
// contain all squares for that particular race.
// We're using the SVG <g> element for this. <g> elements
// are invisible but can be moved around on the screen
var rows = g.selectAll("g.row")
.data(data)
.enter().append("g")
.attr({
"class": "row",
"transform": function(d, i) {
var tx = 170 + i * squareWidth;
var ty = 150;
return "translate(" + [tx, ty] + ")"
}
});
// within each of these COLUMN, let's add 9 squares (one for
// each data point)
rows.selectAll("rect")
.data(function(d, i) { return d.values; })
.enter().append("rect")
.attr({
"transform": function(d, i) {
var tx = 0;
var ty = i * squareWidth;
return "translate(" + [tx, ty] + ")"
},
"width": squareWidth,
"height": squareWidth
})
.style({
"fill": function(d, i) {
return colorScale(d);
},
"stroke": "#FFFFFF"
});
// add labels
g.selectAll("labels.female")
.data(data)
.enter().append("text")
.attr({
"class": "female",
"x": 20,
"y": function(d, i) {
return 173 + i * squareWidth;
}
})
.style({
"font-size": 12
})
.text(function(d, i) {
return d.race + " - Female";
});
g.selectAll("labels.male")
.data(data)
.enter().append("text")
.attr({
"class": "male",
"transform": function(d, i) {
var tx = 193 + i * squareWidth;
var ty = 125;
var rotate = -61;
return "translate(" + [tx, ty] + ") rotate(" + rotate + ")"
}
})
.style({
"font-size": 12
})
.text(function(d, i) {
return d.race + " - Male";
});
// finally, let's draw a legend
g.selectAll("rect.legend")
.data(d3.range(min, max))
.enter().append("rect")
.attr({
"class": "legend",
"width": legendSquareWidth,
"height": legendSquareWidth,
"transform": function(d, i) {
var tx = 20 + legendSquareWidth * i;
var ty = 150 + squareWidth * 9 + 60;
return "translate(" + [tx, ty ] + ")";
}
})
.style({
"fill": function(d, i) {
return colorScale(d);
}
});
g.selectAll("text.legend")
.data(d3.range(min, max, 2))
.enter().append("text")
.attr({
"class": "legend",
"text-anchor": "middle",
"transform": function(d, i) {
var tx = 20 + 0.5 * legendSquareWidth
+ 2 * legendSquareWidth * i;
var ty = 150 + squareWidth * 9 + 78;
return "translate(" + [tx, ty ] + ")";
}
})
.style({
"font-size": 12 + "px",
"fill": "white"
})
.text(function(d, i) {
return d;
});
[
{"race": "Asian", "values": [22,17,20,20,26,26,25,21,29] },
{"race": "Black", "values": [34,28,31,34,37,34,32,39,38] },
{"race": "Hispanic / Latin", "values": [22,19,24,19,23,26,26,21,30] },
{"race": "Indian", "values": [18,21,25,18,24,27,21,33,30] },
{"race": "Middle Eastern", "values": [27,21,25,23,23,32,23,32,28] },
{"race": "Native American", "values": [31,27,29,27,36,35,34,32,34] },
{"race": "Other", "values": [30,24,27,28,29,32,32,35,33] },
{"race": "Pacific Islander", "values": [23,25,24,24,28,29,22,30,29] },
{"race": "White", "values": [21,21,22,20,25,27,26,23,29] }
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.