simple occurrence viz

_.md

[ Launch: simple occurrence viz ] 6631064 by enoex

config.json

{"description":"simple occurrence viz","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/L5LUHkZ.png"}

data.csv

inlet.js

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

// data
var data = tributary.data;
var extent = d3.extent(data, function(d){ return +d.income; });


// scales
var xScale = d3.scale.linear()
	.domain(extent)
	.range([0, width]);

// groups
var bg = svg.append('svg:g');
var chart = svg.append('svg:g');
var axis = svg.append('svg:g');


// LINES
var lines = chart.selectAll('line')
	.data(data);

// draw line for each item
lines.enter().append('svg:line')
  .attr({
    x1: function(d,i){ return xScale(+d.income); },
    x2: function(d,i){ return xScale(+d.income); },
    y1: 0,
    y2: chartHeight
  })
  .style({
    stroke: '#343434',
    'stroke-width': '0.5px',
    'stroke-opacity': 0.1
  });

// draw axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    //.ticks(_.keys(data).length)
    .tickFormat(function(d){ return '$' + d3.format(',')(d); })
    .orient("bottom");

var xAxisGroup = axis.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + chartHeight + ")")
    .call(xAxis);

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;
}