Metric Value / Index 1

_.md

[ Launch: Metric Value / Index 1 ] d3c70b87675a39b0ce21 by zpydee

config.json

{"description":"Metric Value / Index 1","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.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.json

{
  "thresholds": [
  	{"val" : 0,
     "index": -100
  	},
    {"val" : 2,
     "index": -100
  	},
    {"val" : 4,
     "index": 0
  	},
    {"val" : 6,
     "index": 0
  	},
  	{"val" : 8,
     "index": 100
  	},
  	{"val" : 10,
   "index": 100
    }
  ]
}

inlet.js

var data = tributary.data.thresholds,
    cWidth = 500,
    cHeight = 500;

var svg = d3.select('svg');

var yScale = d3.scale.linear()
	.domain([-100, 100])
	.range([500,0]);

var xScale = d3.scale.linear()
	.domain([0, 10])
	.range([0,500]);

var xAxisFn = d3.svg.axis().scale(xScale).orient('bottom');
var yAxisFn = d3.svg.axis().scale(yScale).orient('left');

var lineFn = d3.svg.line()
.x(function(d) {return xScale(d.val);}).y(function(d) {return yScale(d.index);})
;

var g = svg.append('g').attr({transform: 'translate(50,50)'}); 

g.append('rect').attr({
  width:cWidth,
  height:cHeight,
  stroke: 'black',
  fill: 'none'})
var xAxis = g.append('g');
xAxisFn(xAxis);
xAxis.classed('axis',true).attr({
  transform: 'translate(0,500)'});

var yAxis = g.append('g');
yAxisFn(yAxis);
yAxis.classed('axis',true).attr({
  transform: 'translate(0,0)'});

g.append('path').attr({d: lineFn.interpolate('linear')(data), stroke:'red', fill:'none'});
g.append('rect').attr({y: 550, width:55, height:25, stroke:'red', fill:'none'});
g.append('text').text('linear').attr({x:3,y:570});

var path = g.append('path').attr({d: lineFn.interpolate('basis')(data), stroke:'blue', fill:'none'});
g.append('rect').attr({x:60, y: 550, width:55, height:25, stroke:'blue', fill:'none'});
g.append('text').text('basis').attr({x:63,y:570});

style.css

.axis path,line {
  fill: none;
  stroke: #666666;
}