INFO 247 - Lab 10 - #2 - Area Scale

_.md

[ Launch: INFO 247 - Lab 10 - #2 - Area Scale ] 5313268 by poezn
[ 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 - #2 - Area 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];

// 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]);

// vvvv
// Hint: There is something wrong with this:
// ^^^^
var areaScale = d3.scale.linear()
.domain([0, 20])
.range([0, 41])


// draw the circles and texts
g.selectAll("circle.bubble")
.data(data)
.enter().append("circle")
.attr({
  "cx": function(d, i) {
    return 50 + (100 * i);
  },
  "cy": 350,
  "r": function(d, i) {
    return 10; // <====== Let's scale this according to the data
  }
});

g.selectAll("text.bubble")
.data(data)
.enter().append("text")
.attr({
  "class": "bubble",
  "x": function(d, i) {
    return 50 + (100 * i); 
  },
  "y": 440,
  "text-anchor": "middle",
  "font-size": 30
})
.text(function(d, i) {
  return d;
})



// =====================
// From previous example

// 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
}

circle {
  fill: #A05A0F;
  stroke: #FFFFFF;
  stroke-width: 2
}