Skip to content

Instantly share code, notes, and snippets.

@enjalot

enjalot/bar.js

Created December 4, 2011 06:36
Download ZIP

Revisions

  1. enjalot revised this gist Dec 4, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Bar Example</title>
    <title>Bar Transition Example</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="data.json"></script>
    <script type="text/javascript" src="bar.js"></script>
  2. enjalot revised this gist Dec 4, 2011. 3 changed files with 174 additions and 1 deletion.
    106 changes: 106 additions & 0 deletions bar.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    //Simple d3.js barchart example to illustrate d3 selections

    //other good related tutorials
    //http://www.recursion.org/d3-for-mere-mortals/
    //http://mbostock.github.com/d3/tutorial/bar-1.html


    var w = 400
    var h = 400


    function bars(data)
    {

    max = d3.max(data)

    //nice breakdown of d3 scales
    //http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/
    x = d3.scale.linear()
    .domain([0, max])
    .range([0, w])

    y = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangeBands([0, h], .2)


    var vis = d3.select("#barchart")

    //a good written tutorial of d3 selections coming from protovis
    //http://www.jeromecukier.net/blog/2011/08/09/d3-adding-stuff-and-oh-understanding-selections/
    var bars = vis.selectAll("rect.bar")
    .data(data)

    //update
    bars
    .attr("fill", "#0a0")
    .attr("stroke", "#050")

    //enter
    bars.enter()
    .append("svg:rect")
    .attr("class", "bar")
    .attr("fill", "#800")
    .attr("stroke", "#800")


    //exit
    bars.exit()
    .transition()
    .duration(300)
    .ease("exp")
    .attr("width", 0)
    .remove()


    bars
    .attr("stroke-width", 4)
    .transition()
    .duration(300)
    .ease("quad")
    .attr("width", x)
    .attr("height", y.rangeBand())
    .attr("transform", function(d,i) {
    return "translate(" + [0, y(i)] + ")"
    })

    }


    function init()
    {

    //setup the svg
    var svg = d3.select("#svg")
    .attr("width", w+100)
    .attr("height", h+100)
    svg.append("svg:rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("stroke", "#000")
    .attr("fill", "none")

    svg.append("svg:g")
    .attr("id", "barchart")
    .attr("transform", "translate(50,50)")

    //setup our ui
    d3.select("#data1")
    .on("click", function(d,i) {
    bars(data1)
    })
    d3.select("#data2")
    .on("click", function(d,i) {
    bars(data2)
    })
    d3.select("#random")
    .on("click", function(d,i) {
    num = document.getElementById("num").value
    bars(random(num))
    })


    //make the bars
    bars(data1)
    }
    27 changes: 27 additions & 0 deletions data.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    var data1 = [
    5,
    20,
    55,
    60,
    89
    ]

    var data2 = [
    35,
    80,
    35,
    90,
    19,
    39,
    99
    ]

    function random(n)
    {
    val = []
    for(i = 0; i < n; i++)
    {
    val.push(Math.random() * 100)
    }
    return val
    }
    42 changes: 41 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,41 @@
    <html></html>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Bar Example</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="data.json"></script>
    <script type="text/javascript" src="bar.js"></script>

    <style type="text/css">
    #demo {
    float: left;
    }
    #vimeo {
    padding: 30px;
    float: left;
    }
    </style>
    </head>
    <body>

    <div id="demo">
    <div id="buttons">
    <button id="data1">Set Data to data 1</button>
    <button id="data2">Set Data to data 2</button>
    <br>
    <button id="random">Make Random Data</button>
    <input id="num" value=10></input>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg"></svg>
    </div>

    <script type="text/javascript">
    init();
    </script>

    <div id="vimeo">
    <iframe src="http://player.vimeo.com/video/29080884?title=0&amp;byline=0&amp;portrait=0" width="500" height="313" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/29080884">[d3cast] Simple Bar Chart Walkthrough</a> from <a href="http://vimeo.com/user4640702">Ian Johnson</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
    </div>

    </body>
    </html>
  3. enjalot created this gist Dec 4, 2011.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <html></html>