INFO 247 - Lab 10 - #1 - Linear Scale

_.md

[ Launch: INFO 247 - Lab 10 - #1 ] 5312833 by poezn
[ Launch: INFO 247 - Lab 6 - #1 ] 5058838 by poezn

config.json

{"description":"INFO 247 - Lab 10 - #1 - Linear Scale","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":15},"circles.svg":{"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},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"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}

inlet.js

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

var data = [2, 4, 16, 3, 9];

// Let's look at a very simple scale
var scale = function(d, i) {
  return d * 30;
};

// And now let's look at how this is done better with D3
// This gives you a "scale" function, similar to the one above
//var scale = d3.scale.linear()
//.domain([0, 20])
//.range([0, 400]);

// draw the bars
g.selectAll("rect.bar")
.data(data)
.enter().append("rect")
.attr({
  "width": function(d, i) {
    return scale(d);
  },
  "height": 40,
  "x": function(d, i) {
    return 30; 
  },
  "y": function(d, i) {
    return 10 + i * 50
  }
});

g.selectAll("text.bar")
.data(data)
.enter().append("text")
.attr({
  "class": "bar",
  "x": function(d, i) {
    return scale(d) + 40; 
  },
  "y": function(d, i) {
    return 40 + i * 50
  },
  "text-anchor": "start",
  "font-size": 30
})
.text(function(d, i) {
  return d;
})

styles.css

rect {
  fill: #0FA066;
  stroke: #FFFFFF;
  stroke-width: 4
}