Tributary inlet

_.md

[ Launch: Tributary inlet ] 5605683 by enjalot

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"foo.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"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,"thumbnail":"http://i.imgur.com/6zqQkRf.png"}

data.csv

timestamp,age,bigdata,charts,miles,school,gb,apples
5/18/2013 0:56:50,27,No,6,1300,20,0.001,Yes
5/18/2013 12:06:48,26,No,7,20,16,0,Yes
5/18/2013 12:08:02,26,No,32,2222,16,0.4,Yes
5/18/2013 12:08:27,37,Yes,15,3000,16,1,Yes
5/18/2013 12:08:49,25,No,0,6,6,0,Yes
5/18/2013 12:08:55,30,Yes,1,3,19,10,Yes
5/18/2013 12:09:18,32,No,8,7000,8,1,Yes
5/18/2013 12:09:36,31,No,3,4,5,2,Yes
5/18/2013 12:09:44,31,No,10,3800,15,1,Yes
5/18/2013 12:09:53,20,No,0,650,0,0,Yes
5/18/2013 12:10:12,24,No,4,3000,5,0.4,Yes
5/18/2013 12:10:21,45,No,,14,22,,Yes
5/18/2013 12:10:21,30,Yes,4,6000,20,5000,Yes
5/18/2013 12:10:36,56,No,12,5,6,100,Yes
5/18/2013 12:10:48,21,Yes,4,3000,2.5,5,Yes
5/18/2013 12:10:58,26,Yes,14,3089,16,1000,Yes
5/18/2013 12:11:19,26,Yes,5,2,5,250,Yes
5/18/2013 12:11:33,24,No,5,1080,4,1,Yes
5/18/2013 12:11:35,25,No,2,2000,22,0,Yes
5/18/2013 12:12:50,46,No,12,0.5,18,0.1,Yes
5/18/2013 12:12:51,100,No,6,10,0,0,Yes
5/18/2013 12:13:46,31,Yes,10,8903.6 miles,21,~50-100 GB,Yes
5/18/2013 12:13:48,23,Yes,,12000,6,5 GB,Yes
5/18/2013 12:14:00,24,Yes,,12000,7,2,Yes
5/18/2013 12:14:05,43,No,10,1955,19,less than 1GB,Yes
5/18/2013 12:14:24,24,No,3,1000,17,1,Yes
5/18/2013 12:15:10,39,No,8,12,,1,Yes
5/18/2013 12:15:47,29,No,6,10,12,0.0001,No
5/18/2013 12:16:27,37,Yes,200,5500,5,0.1,No
5/18/2013 12:27:15,30,No,1,35,4,1,Yes
5/18/2013 12:42:24,33,Yes,5,0,24,100's,Yes
5/18/2013 12:49:45,28,No,0,0,2,16,2,Yes

foo.js

console.log("hi")
tributary.foo = "hello"

inlet.js

var data = tributary.data.map(function(d) {
  return {
    school: +d.school,
    charts: +d.charts,
    bigdata: d.bigdata === "Yes"
  }
});

console.log(data[0]);
var cw = 200
var ch = 200

var xscale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.school })])
.range([10,  cw])

var yscale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.charts })])
.range([ch,10])

var svg = d3.select("svg").append("g")
.attr("transform", "translate(33, 35)")

var points = data.map(function(d) {
  return [xscale(d.school), yscale(d.charts)];
});


var line = d3.svg.line()
var cells = d3.geom.voronoi(points);


svg.selectAll("path")
.data(cells)
.enter()
.append("path")
.attr("d", line)
.on("mouseover", function(d,i) {
  console.log(d,i);
  d3.selectAll("circle")
  .style("fill", "black")
  .filter(function(c,j) {
    return j === i
  })
  .style("fill", "red")
})

svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr({
  cx: function(d) { return xscale(d.school); },
  cy: function(d) { return yscale(d.charts); },
  r: 7
});


var xaxis = d3.svg.axis()
.scale(xscale)

svg.append("g")
.attr("transform", "translate(0, " + ch + ")")
.call(xaxis)


var yaxis = d3.svg.axis()
.scale(yscale)
.orient("right")

svg.append("g")

.call(yaxis)

style.css

path {
  fill: #fff;
  fill-opacity: 0.01;
  stroke: #000000;
  stroke-opacity: 0;
}