INFO 247 - Lab 6 - #2 Data Binding

_.md

[ Launch: INFO 247 - Lab 6 - #2 Data Binding ] 5061423 by akselx
[ Launch: INFO 247 - Lab 6 - #1 - Selections ] 5059349 by poezn
[ Launch: INFO 247 - Lab 6 - #1 ] 5058838 by poezn

circles.svg

config.json

{"description":"INFO 247 - Lab 6 - #2 Data Binding","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}},"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 6: D3.js
// http://blogs.ischool.berkeley.edu/i247s13/lab-6-d3-js/ 

// define some initial variables

// function to calculate the radius of the circle
var radius = function(d, i) {
  return Math.sqrt(d) * 10;
}

// Tributary automatically added the contents of "circles.svg"
// to this page.

// YOUR TURN
// let's select three of the circles by binding data to them and 
// - change their color
// - make their radius dependent on their data value
var circles = g.selectAll("circle")
.data([10, 20, 30,6,1])
var attributes={
  "fill":"#DF3E3E",
  //"r":radius
  r: radius
}
circles.attr(attributes)
;