shutdownnnnn

_.md

[ Launch: shutdown ] 6786890 by enoex
[ Launch: shutdown ] 6786631 by enoex

config.json

{"description":"shutdownnnnn","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/S2EruDC.png"}

data.csv

inlet.js

var svg = d3.select('svg');
var width = 600;
var height = 200;
var chartHeight = height - 100;

var startColor = '#FFFFFF';
var endColor = '#000000';
var field = 'income';

// data
var data = tributary.data;

// setup scale
var xScale = d3.scale.linear()
.domain([
  new Date(data[0].startDate), 
  new Date(data[data.length-1].endDate)
])
.range([0,width]);
      
      
// groups
var bg = svg.append('svg:g');
var chart = svg.append('svg:g').attr({ 
  transform: 'translate(20, 20)'
});
var axis = svg.append('svg:g');
  
chart.append('svg:text').attr({
  
}).text('length of shutdown and president party');
// LINES
var timeBars = chart.selectAll('.timeX')
    .data(data);

// draw line for each item
timeBars.enter().append('svg:rect')
  .attr({
    'class': 'timeX',
    x: function(d,i){ return xScale(new Date(d.startDate) ); },
    width: function(d,i){
    	return xScale(new Date(d.endDate)) - xScale(new Date(d.startDate));
    },
    y: height + 100,
    height: 40
  })
  .style({
    stroke: endColor,
    'stroke-width': '0.5px',
    'stroke-opacity': 1
  }).on('mouseenter', function(d){ console.log(d); });


var xScale = d3.scale.linear()
	.domain([0, data.length])
	.range([0, width]);

var yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d,i){
      return new Date(d.endDate) - new Date(d.startDate);
    })])
	.range([0, height]);


chart.append('svg:text').attr({
  y: height + 90
}).text('over time')
var bars = chart.selectAll('.lengthBars')
	.data(data);

bars.enter().append('svg:rect')
.attr({
  'class': 'lengthBars',
  x: function(d,i){ return xScale(i); },
  width: 20, 
  y: function(d,i){ 
    return height -yScale(new Date(d.endDate) - new Date(d.startDate));
  },
  height: function(d,i){ 
    return yScale(new Date(d.endDate) - new Date(d.startDate));
  }
}).style({
  fill: function(d,i){
    return (d.presidentParty === 'democrat' ? '#336699' : '#dd2222'); 
  }
});













    

style.css

svg, path, line { 
  shape-rendering: crispEdges;
}
.x.axis { 
  font-size: .45em;
}
.axis path, .axis line {
  stroke: #343434;
  fill: none;
}
.axis line {
  stroke-width: 0.5px;
}