Single-stack line chart

_.md

[ Launch: Single-stack line chart ] 5699495 by aendrew

config.json

{"description":"Single-stack line 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

var margin = {top: 20, right: 10, bottom: 20, left: 10}
var width = 800 - margin.left - margin.right
var height = 500 - margin.top - margin.bottom




var terms = [
  {"node": "spicy",
   "weight": "1000",
   "edges": ["peaty", "earthy", "citrus", "fruit"]
  },
  {"node": "peaty",
   "weight": "300",
   "edges": ["spicy", "earthy"]
  },
  {"node": "citrus",
   "weight": "200",
   "edges": ["spicy", "fruit"]
  },
  {"node": "fruit",
   "weight": "400",
   "edges": ["spicy", "citrus"]
  },
  {"node": "earthy",
   "weight": "700",
   "edges": ["spicy", "peaty"]
  },
  {"node": "malt",
   "weight": "700",
   "edges": ["spicy", "peaty"]
  }  
]

var svg = d3.select('svg')
  .attr("class", "chart")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
 .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
var x = d3.scale.linear()
.domain([0, d3.sum(terms, function(d, i) {return d.weight;})])
  .range([0, width])
  
var color = d3.scale.category20();  

svg.selectAll("rect")
.data(terms, function(d){return d.node})
  .enter().append("rect")
    .attr("x", function(d, i){var x_return = 0; for (var inc=0; inc < i; inc++) {x_return += x(terms[inc].weight) + 2} return x_return;})
    .attr("y", 0)
    .attr("width", function(d, i) { return x(d.weight) })
    .attr("height", 20)
    .attr("fill", function(d,i){return color(i);});

var lines = svg.append("g")

lines.selectAll("rect").data(terms, function(d){return d.node})
  .enter().append("rect").attr("x", function(d, i){var x_return = 0; for (var inc=0; inc < i; inc++) {x_return += x(terms[inc].weight) + 2} return x_return;})
    .attr("y", 22)
    .attr("width", function(d, i) { return x(d.weight) })
    .attr("height", 20)
    .attr("fill", "black");