Simple Bar Chart with Blur

by azcoov

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<b>Events by day (7 days) - load example</b>

<div class="row-fluid" id="main">
</div>

CSS

body {
  font: 10px sans-serif;
}
path {
        stroke: #75ce00;
        stroke-width: 2;
        fill: #e5e5e5;
    }
    path.area {
      fill: #red;
    }
    line {
      stroke-width: .5;
      stroke: #e2a81e;
    }
    rect.a {
        fill: #e2a81e;
    }
    rect.b {
        fill: #765a71;
    }
    rect.c {
        fill: #75ce00;
    }
    rect.d {
        fill: #dddddd;
        opacity:.7;
    }

JavaScript

//test data
    //TODO: replace this with an ajax call to the API
    var data = [19,52,20,46,53,27,21];

    //create the svg object
    var svg = d3.select("body")
        .append("svg:svg")
            .attr("width", 960)
            .attr("height", 500);

    //create the svg filter and append it to the SVG object
    var filter = svg.append("svg:defs")
        .append("svg:filter")
            .attr("id", "blur")
        .append("svg:feGaussianBlur")
            .attr("stdDeviation", 2.2);

    // TODO we need a ceiling value
    var ceiling = 200;
    // Y scale will fit values from 0-10 within pixels 0 - height
    var y = d3.scale.linear().domain([0, ceiling]).range([0, 100]);

    // create an empty shell of a chart that bars can be added to
    function displayStackedChart(chartId) {
        // create an SVG element inside the div that fills 100% of the div
        var vis = d3.select("#" + chartId).append("svg:svg").attr("width", "400px").attr("height", "100px")
        // transform down to simulate making the origin bottom-left instead of top-left
        // we will then need to always make Y values negative
        .append("g").attr("class","barChart").attr("transform", "translate(0, " + 100 + ")")
        // apply the bluring filter to the entire chart
        .attr("filter", "url(#blur)");
    }

    // the property names on the data objects that we'll get data from
    var propertyNames = ["d"];

    // Add or update a bar of data in the given chart
    // The data object expects to have an 'id' property to identify itself (id == a single bar)
    // and have object properties with numerical values for each property in the 'propertyNames' array.
    function addData(chartId, data) {

        // it's new data so add a bar
        var barDimensions = updateBarWidthsAndPlacement(chartId);

        // select the chart and add the new bar
        var barGroup = d3.select("#" + chartId).selectAll("g.barChart")
            .append("g")
               ...