Skip to content

Instantly share code, notes, and snippets.

@poezn poezn/_.md

Created Mar 7, 2013
Embed
What would you like to do?
INFO 247 - Lab 7 - #2 - Color Scales
{"description":"INFO 247 - Lab 7 - #2 - Color Scales","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":false,"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/
var start = 17;
var middle = 28;
var end = 39;
var legendSquareWidth = 32;
// YOUR TURN
// Experiment with the color scale
// this maps a start, middle, and end point to a color each
var colorScale = d3.scale.linear()
.domain([start, middle, end])
.range(['#F8696B', '#FCEA84', '#8dca7e']);
// draw big rectangle
g.append("rect")
.attr({
"width": 150,
"height": 150,
"x": 350,
"y": 330
})
.style({
"fill": function(d, i) {
return colorScale(28); // <== CHANGE THIS
}
});
// This draws the legend
g.selectAll("rect.legend")
.data(d3.range(start, end))
.enter().append("rect")
.attr({
"class": "legend",
"width": legendSquareWidth - 2,
"height": legendSquareWidth * 3,
"transform": function(d, i) {
var tx = 50 + legendSquareWidth * i;
var ty = 50;
return "translate(" + [tx, ty ] + ")";
}
})
.style({
"fill": function(d, i) {
return colorScale(d);
}
});
g.selectAll("text.legend")
.data(d3.range(start, end+1, 2))
.enter().append("text")
.attr({
"class": "legend",
"text-anchor": "middle",
"transform": function(d, i) {
var tx = 50 + 2 * legendSquareWidth * i;
var ty = 176;
return "translate(" + [tx, ty ] + ")";
}
})
.style({
"font-size": 15 + "px",
"fill": "#383838"
})
.text(function(d, i) {
return d;
});
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.