Tributary inlet

_.md

[ Launch: Tributary inlet ] a7db7284908e575a20ac by ramnathv

app.css

.line {
  fill: none;
  stroke: steelblue;
}

.disabled {
   stroke: gray;
   stroke-width: 0.5px;
}

.active {
 stroke: steelblue;
 stroke-width: 2px; 
}

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}

data.tsv

inlet.js

var data = tributary.data

data.forEach(function(d){
  //d.date = d3.time.format("%Y").parse(d.year)
  d.date = + d.year
  d.n = +d.n
})

console.log(data)



var nest = d3.nest()
  .key(function(d){return d.category})
  .entries(data)


var margin = {top: 20, bottom: 20, left: 20, right: 20},
  width = 600 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom

var main = d3.select('svg')
    .attr("width", width)
    .attr("height", height)
   .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var xValue = function(d){return d.date},
    yValue = function(d){return d.n},
    xScale = d3.scale.linear().range([0, width]),
    yScale = d3.scale.linear().range([height, 0])



xScale.domain([2003, 2014])
yScale.domain([0, 3000])

var line = d3.svg.line()
  .x(function(d){return xScale(xValue(d))})
  .y(function(d){return yScale(yValue(d))})
  .interpolate("basis")

var lines = main.selectAll("path")
   .data(nest).enter()
   .append("path")
   .attr("class", "line")
   .attr("d", function(d){return line(d.values)})

lines
  .on("mouseover", function(d){
     lines.classed("disabled", true)
     d3.select(this).classed("active", true)
  })
  .on("mouseout", function(d){
     lines.classed("disabled", false)
     d3.select(this).classed("active", false)
  })