minimal d3 area chart

_.md

[ Launch: minimal d3 area chart ] 5626496 by Salzig

config.json

{"description":"minimal d3 area chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.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}

inlet.js

console.clear()
var svg = d3.select("svg")

var data
data = [ // array of Paths
  [ // array of Points
    { x: 0, y: 30},
    { x: 10, y: 40},
    { x: 20, y: 10},
    { x: 30, y: 20}
  ]
]

var scale = d3.scale.linear()
  .domain([0,40])
  .range([100, 0])

var x = function(d) { return scale(d.x) }
var y = function(d) { return scale(d.y) }

var area = d3.svg.area()
  .x(x)
  .y1(y)
  .y0(scale.range()[0])

var path = svg.selectAll('path')
  .data(data)

var pathEnter = path.enter()
  .append("path")
  .attr("d",area)
  .style("fill", "red")