helping pessimism (lol)

_.md

[ Launch: helping pessimism (lol) ] 5940269 by gelicia

config.json

{"description":"helping pessimism (lol)","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},"style.css":{"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,"thumbnail":"http://i.imgur.com/eNHpEVb.png"}

inlet.js

			//Width and height
			var w = 500;
			var h = 300;
			var padding = 30;
			
			var now = d3.time.hour.utc(new Date());

			//Static dataset
			var dataset = [
              {x: d3.time.hour.utc.offset(now, -5), y1: 1, y2: 10}, 
			  {x: d3.time.hour.utc.offset(now, -4), y1: 2, y2: 20},
              {x: d3.time.hour.utc.offset(now, -3), y1: 3, y2: 30},
              {x: d3.time.hour.utc.offset(now, -2), y1: 4, y2: 40},
              {x: d3.time.hour.utc.offset(now, -1), y1: 5, y2: 50},
              {x: now, y1: 6, y2: 60}
			];

var data = [];

dataset.forEach(function(d){
  var newObj = {};
  newObj.x = d.x;
  newObj.y = d.y1;
  newObj.type = 1;
  
	data.push(newObj);
  
  newObj = {};
  newObj.x = d.x;
  newObj.y = d.y2;
  newObj.type = 2;
  
  data.push(newObj);
});

console.log(data)
			                
            var xDomain = d3.extent(dataset, function(i) { return i.x; });
              
			//Create scale functions
			var xScale = d3.time.scale()
						   .domain(xDomain)
						   .range([padding, w - padding * 2]);

            var maxY = d3.max(dataset, function(i) { 
              return Math.max(i.y1, i.y2); 
            });          
          
			var yScale = d3.scale.linear()
						   .domain([0, maxY])
						   .range([h - padding, padding]);


			//Define X axis
			var xAxis = d3.svg.axis()
							  .scale(xScale)
							  .orient("bottom")
							  .ticks(5);

			//Define Y axis
			var yAxis = d3.svg.axis()
							  .scale(yScale)
							  .orient("left")
							  .ticks(5);

			//Create SVG element
			var svg = d3.select("svg")
						.attr("width", w)
						.attr("height", h);

			//Create circles
			svg.selectAll("circle")
			   .data(data)
			   .enter()
			   .append("circle")
			   .attr("cx", function(d) {
			   		return xScale(d.x);
			   })
			   .attr("cy", function(d) {
			   		return yScale(d.y);
			   })
            .attr("class", function(d){ return (d.type == 1? "y1" : "y2"); })
			   .attr("r", 2);
         
			//Create X axis
			svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(0," + (h - padding) + ")")
				.call(xAxis);
			
			//Create Y axis
			svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + padding + ",0)")
				.call(yAxis);

style.css

.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

.y1 { fill: #FF0000;;}