Simple bar

_.md

[ Launch Inlet ]
Gist #2958196 No Previous Gist

config.json

{"description":"Simple bar","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.4013188518231187,"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,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false}}

inlet.js

var w = 200,
    h = 200,
    p = 10;

var data = [{count:100,year:1999},
    {count:240,year:2010},
    {count:290,year:2009}];

var bar_height = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.count; }) )  // min max of count
    .range([p,h-p]);  // min max of area to plot in


var bar_xpos = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.year; }) )  // min max of year
    .range([p,w-p]);  // min max of area to plot in


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

svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", function(d) {
        return bar_xpos(d.year); })
    .attr("y", function(d) { 
        return h - bar_height(d.count); })
    .attr("width", 10)
    .attr("height", function(d) {return bar_height(d.count); })
    .attr("fill", "steelblue")