Skip to content

Instantly share code, notes, and snippets.

@rduplain

rduplain/responsive_d3_example.html

Forked from mattalcock/responsive_d3_example.html
Created April 18, 2012 14:55
Download ZIP

Revisions

  1. rduplain revised this gist Apr 18, 2012. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions responsive_d3_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,8 @@
    !DOCTYPE html>
    <!DOCTYPE html>
    <script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://github.com/mbostock/d3/blob/master/d3.v2.min.js"></script>
    <style>

    body {
    font: 10px sans-serif;
    }
  2. @mattalcock mattalcock created this gist Feb 22, 2012.
    133 changes: 133 additions & 0 deletions responsive_d3_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,133 @@
    !DOCTYPE html>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://github.com/mbostock/d3/blob/master/d3.v2.min.js"></script>
    <style>

    body {
    font: 10px sans-serif;
    }

    rect {
    fill: steelblue;
    stroke: white;
    }

    line {
    stroke: black;
    shape-rendering: crispEdges;
    }

    </style>
    <body>

    <div class='histogram' style="width:50%" >
    </div>

    </body>
    <script>

    // Generate an Irwin-Hall distribution.
    function gen_ih_dist(trails, variables)
    {
    data = [];

    for (var i = 0; i < trails; i++) {
    for (var s = 0, j = 0; j < variables; j++) {
    s += Math.random();
    }
    data.push(s);
    }
    return data;
    }

    var div_name = "div.histogram";

    pos_data = gen_ih_dist(1000, 10);
    neg_data = gen_ih_dist(1000, 10);

    draw_histogram(div_name, pos_data, neg_data);

    //The drawing of the histogram has been broken out from the data retrial
    // or computation. (In this case the 'Irwin-Hall distribution' computation above)

    function draw_histogram(reference, pos_data, neg_data){

    $(reference).empty()

    //The drawing code needs to reference a responsive elements dimneions
    var width = $(reference).width();
    // var width = $(reference).empty().width(); we can chain for effeicanecy as jquery returns jquery.

    var height = 250; // We don't want the height to be responsive.

    var histogram = d3.layout.histogram() (pos_data);
    var neg_histogram = d3.layout.histogram()(neg_data);

    var x = d3.scale.ordinal()
    .domain(histogram.map(function(d) { return d.x; }))
    .rangeRoundBands([0, width]);

    var y = d3.scale.linear()
    .domain([0, d3.max(histogram.map(function(d) { return d.y; }))])
    .range([0, height]);

    var ny = d3.scale.linear()
    .domain([0, d3.max(neg_histogram.map(function(d) { return d.y; }))])
    .range([0, height]);

    var svg = d3.select(reference).append("svg")
    .attr("width", width)
    .attr("height", 2 * height);

    svg.selectAll("rect")
    .data(histogram)
    .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return height - y(d.y); })
    .attr("height", function(d) { return y(d.y); });

    svg.selectAll("rect-neg")
    .data(neg_histogram)
    .enter().append("rect")
    .style("fill", "red")
    .attr("width", x.rangeBand())
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return height})
    .attr("height", function(d) { return ny(d.y); });

    svg.append("line")
    .attr("x1", 0)
    .attr("x2", width)
    .attr("y1", height)
    .attr("y2", height);

    };

    //Bind the window resize to the draw method.
    //A simple bind example is

    //$(window).resize(function() {
    // draw_histogram(div_name, pos_data, neg_data);
    //});

    //A better idom for binding with resize is to debounce
    var debounce = function(fn, timeout)
    {
    var timeoutID = -1;
    return function() {
    if (timeoutID > -1) {
    window.clearTimeout(timeoutID);
    }
    timeoutID = window.setTimeout(fn, timeout);
    }
    };

    var debounced_draw = debounce(function() {
    draw_histogram(div_name, pos_data, neg_data);
    }, 125);

    $(window).resize(debounced_draw);

    </script>