color test

_.md

[ Launch: color test ] 5121368 by ptvans
[ Launch: INFO 247 - Lab 7 - #2 - Color Scales ] 5120864 by poezn
[ Launch: INFO 247 - Lab 7 - #1 - Draw Squares (full code) ] 5111589 by poezn
[ Launch: INFO 247 - Lab 6 - #1 ] 5054769 by poezn
[ Launch: INFO 247 - Lab 6 - #1 ] 5054734 by poezn

config.json

{"description":"color test","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,"thumbnail":"http://i.imgur.com/vH1BlVA.png","ajax-caching":true}

inlet.js

// School of Information, UC Berkeley
// INFO 247 Lab 7: D3.js
// http://blogs.ischool.berkeley.edu/i247s13/lab-7-d3-js-part-2/ 

d3.select("#display").style("background-color","#fff")


var start = 25;
var middle = 31;
var end = 43;
var legendSquareWidth = 30;

// 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, end])
.range(['#7A69F8', '#CA2201'])
.interpolate(d3.interpolateLab);

var qColorScale = d3.scale.quantize()
.domain([
  start,
  Math.floor(start+22/3),
  Math.floor(start+22/3*2),
  end
])
.range(["#E2C771",
        "#FFBD31",
        "#FF8E42",
       "#E94100"
       ])


// draw big rectangle
g.append("rect")
.attr({
  "width": 150,
  "height": 150,
  "x": 350,
  "y": 330
})
.style({
  "fill": function(d, i) {
	return colorScale(32); // <== 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 qColorScale(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;
});