simple occurrence viz

_.md

[ Launch: simple occurrence viz ] 6631134 by enoex
[ 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;

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

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


// scales
var xScale = d3.scale.linear()
	.domain(extent)
	.range([0, width]);
var color_scale = d3.scale.linear()
	.domain([extent[0], (extent[0] + extent[1]) / 2, extent[1]])
	.range(['red','green', 'blue'])
	.interpolate(d3.interpolateRgb);

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

bg.append('svg:rect')
.attr({
  x: 0,
  width: width,
  y: 0,
  height: chartHeight
})
.style({
  fill: startColor
});


// 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[field]); },
    x2: function(d,i){ return xScale(+d[field]); },
    y1: 0,
    y2: chartHeight
  })
  .style({
    stroke: endColor,
    'stroke-width': '0.5px',
    'stroke-opacity': 0.1
  });

// CIRCLES
// draw circle for each item
var circles = chart.selectAll('circle')
	.data(data);
circles.enter().append('svg:circle')
  .attr({
    cx: function(d,i){ return xScale(+d[field]); },
    cy: chartHeight / 2,
    r: 1
  })
  .style({
    fill: endColor,
    stroke: 'none',
    opacity: 0.05
  });

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