Vertical thin line chart

_.md

[ Launch: Vertical thin line chart ] 5124792 by gelicia

config.json

{"description":"Vertical thin 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

//modified from http://janwillemtulp.com/d3linechart/ 

var data = [{score: 100, freq: 1},
            {score: 92, freq: 13},
            {score: 77, freq: 2},
            {score: 67, freq: 1}],
			w = 60,
			h = 198,
            totalFreq = d3.sum(data, function(d){ return d.freq}),
            mean = d3.sum(data, function(d){return d.freq * d.score})/totalFreq,
			y = d3.scale.linear().domain([0, 100]).range([0, h]),
			x = d3.scale.linear().domain([0, totalFreq]).range([0, w])

			var svg = d3.select("svg")
                  .attr({
                  "width": 500,
                  "height": 500,
                  x: 0,
                  y: 0
                });

			var g = svg.append("g")
			    .attr("transform", "translate(100, 300)");
			
			var line = d3.svg.line()
			    .x(function(d) { return x(d.freq); })
                .y(function(d) { return -y(d.score);});
			
		

 g.append("svg:path").attr({
              "d": line(data),
              "stroke": "black", 
              fill: "black",
              "fill-opacity": 0.2
            });

			g.append("svg:line").attr({
              x1: 0, 
              y1: -y(mean),
              x2: w,
              y2: -y(mean),
              "stroke": "black", 
              "fill": "none"
            });

g.append("rect").attr({
  x:0,
  y:-h,
  width: w,
  height: h-y(mean),
  fill: "blue",
  "fill-opacity": 0.1
});

g.append("rect").attr({
  x:0,
  y:-y(mean),
  width: w,
  height: y(mean),
  fill: "orange",
  "fill-opacity": 0.1
});

	g.append("svg:line").attr({
              x1: 0, 
              y1: -y(mean),
              x2: w,
              y2: -y(mean),
              "stroke": "green", 
              "fill": "none"
            });

g.append("circle").attr({
  cx: x(2),
  cy: -y(77),
  r: 2,
  stroke: "black",
  fill: "yellow"

})