Skip to content

Instantly share code, notes, and snippets.

@RandomEtc

RandomEtc/README.md

Last active May 9, 2017 19:24
Show Gist options
  • Save RandomEtc/cff3610e7dd47bef2d01 to your computer and use it in GitHub Desktop.
Save RandomEtc/cff3610e7dd47bef2d01 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. RandomEtc revised this gist Dec 1, 2015. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -91,10 +91,9 @@
    }

    function replay(data) {
    var count = 4;
    var slices = [];
    for (var i = 0; i < data.length; i++) {
    slices.push(data.slice(0, i));
    slices.push(data.slice(0, i+1));
    }
    slices.forEach(function(slice, index){
    setTimeout(function(){
  2. RandomEtc revised this gist Aug 29, 2014. 1 changed file with 1 addition and 8 deletions.
    9 changes: 1 addition & 8 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1 @@
    This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:

    * [d3.tsv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.format](https://github.com/mbostock/d3/wiki/Formatting) - format percentages
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding
    * [d3.scale.linear](https://github.com/mbostock/d3/wiki/Quantitative-Scales) - *y*-position encoding
    * [d3.max](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_max) - compute domains
    * [d3.svg.axis](https://github.com/mbostock/d3/wiki/SVG-Axes) - display axes
    This animated bar chart is adapted from [Mike Bostock's sample bar chart](http://bl.ocks.org/mbostock/3885304) to allow redrawing and animated transitions.
  3. RandomEtc revised this gist Aug 29, 2014. 2 changed files with 6 additions and 1 deletion.
    5 changes: 5 additions & 0 deletions d3.v3.min.js
    View file
    5 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="d3.v3.min.js"></script>
    <script>

    // Mike Bostock "margin conventions"
  4. RandomEtc revised this gist Aug 29, 2014. 2 changed files with 18 additions and 30 deletions.
    19 changes: 0 additions & 19 deletions data2.tsv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +0,0 @@
    letter frequency
    A .08167
    B .03492
    C .00082
    D .04253
    E .22702
    F .02288
    G .22015
    H .06094
    I .06966
    J .10153
    K .00772
    L .04025
    M .02406
    1 .06749
    2 .07507
    3 .01929
    4 .00095
    5 .05987
    29 changes: 18 additions & 11 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -81,21 +81,28 @@
    // d3.tsv is a wrapper around XMLHTTPRequest, returns array of arrays (?) for a TSV file
    // type function transforms strings to numbers, dates, etc.
    d3.tsv("data.tsv", type, function(error, data) {
    draw(data);
    replay(data);
    });

    setTimeout(function(){
    d3.tsv("data2.tsv", type, function(error, data) {
    draw(data);
    });
    }, 5000);

    function type(d) {
    // + coerces to a Number from a String (or anything)
    d.frequency = +d.frequency;
    return d;
    }

    function replay(data) {
    var count = 4;
    var slices = [];
    for (var i = 0; i < data.length; i++) {
    slices.push(data.slice(0, i));
    }
    slices.forEach(function(slice, index){
    setTimeout(function(){
    draw(slice);
    }, index * 300);
    });
    }

    function draw(data) {
    // measure the domain (for x, unique letters) (for y [0,maxFrequency])
    // now the scales are finished and usable
    @@ -106,17 +113,17 @@
    // someSelection.call(thing) is roughly equivalent to thing(someSelection[i])
    // for everything in the selection\
    // the end result is g populated with text and lines!
    svg.select('.x.axis').transition().duration(1000).call(xAxis);
    svg.select('.x.axis').transition().duration(300).call(xAxis);

    // same for yAxis but with more transform and a title
    svg.select(".y.axis").transition().duration(1000).call(yAxis)
    svg.select(".y.axis").transition().duration(300).call(yAxis)

    // THIS IS THE ACTUAL WORK!
    var bars = svg.selectAll(".bar").data(data, function(d) { return d.letter; }) // (data) is an array/iterable thing, second argument is an ID generator function

    bars.exit()
    .transition()
    .duration(1000)
    .duration(300)
    .attr("y", y(0))
    .attr("height", height - y(0))
    .style('fill-opacity', 1e-6)
    @@ -129,7 +136,7 @@
    .attr("height", height - y(0));

    // the "UPDATE" set:
    bars.transition().duration(1000).attr("x", function(d) { return x(d.letter); }) // (d) is one item from the data array, x is the scale object from above
    bars.transition().duration(300).attr("x", function(d) { return x(d.letter); }) // (d) is one item from the data array, x is the scale object from above
    .attr("width", x.rangeBand()) // constant, so no callback function(d) here
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); }); // flip the height, because y's domain is bottom up, but SVG renders top down
  5. RandomEtc revised this gist Aug 29, 2014. 1 changed file with 13 additions and 5 deletions.
    18 changes: 13 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -106,22 +106,30 @@
    // someSelection.call(thing) is roughly equivalent to thing(someSelection[i])
    // for everything in the selection\
    // the end result is g populated with text and lines!
    svg.select('.x.axis').call(xAxis);
    svg.select('.x.axis').transition().duration(1000).call(xAxis);

    // same for yAxis but with more transform and a title
    svg.select(".y.axis").call(yAxis)
    svg.select(".y.axis").transition().duration(1000).call(yAxis)

    // THIS IS THE ACTUAL WORK!
    var bars = svg.selectAll(".bar").data(data, function(d) { return d.letter; }) // (data) is an array/iterable thing, second argument is an ID generator function

    bars.exit().remove();
    bars.exit()
    .transition()
    .duration(1000)
    .attr("y", y(0))
    .attr("height", height - y(0))
    .style('fill-opacity', 1e-6)
    .remove();

    // data that needs DOM = enter() (a set/selection, not an event!)
    bars.enter().append("rect")
    .attr("class", "bar");
    .attr("class", "bar")
    .attr("y", y(0))
    .attr("height", height - y(0));

    // the "UPDATE" set:
    bars.attr("x", function(d) { return x(d.letter); }) // (d) is one item from the data array, x is the scale object from above
    bars.transition().duration(1000).attr("x", function(d) { return x(d.letter); }) // (d) is one item from the data array, x is the scale object from above
    .attr("width", x.rangeBand()) // constant, so no callback function(d) here
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); }); // flip the height, because y's domain is bottom up, but SVG renders top down
  6. RandomEtc revised this gist Aug 29, 2014. 2 changed files with 56 additions and 22 deletions.
    19 changes: 19 additions & 0 deletions data2.tsv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    letter frequency
    A .08167
    B .03492
    C .00082
    D .04253
    E .22702
    F .02288
    G .22015
    H .06094
    I .06966
    J .10153
    K .00772
    L .04025
    M .02406
    1 .06749
    2 .07507
    3 .01929
    4 .00095
    5 .05987
    59 changes: 37 additions & 22 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -65,10 +65,38 @@
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")

    svg.append("g")
    .attr("class", "y axis")
    .append("text") // just for the title (ticks are automatic)
    .attr("transform", "rotate(-90)") // rotate the text!
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

    // d3.tsv is a wrapper around XMLHTTPRequest, returns array of arrays (?) for a TSV file
    // type function transforms strings to numbers, dates, etc.
    d3.tsv("data.tsv", type, function(error, data) {
    draw(data);
    });

    setTimeout(function(){
    d3.tsv("data2.tsv", type, function(error, data) {
    draw(data);
    });
    }, 5000);

    function type(d) {
    // + coerces to a Number from a String (or anything)
    d.frequency = +d.frequency;
    return d;
    }

    function draw(data) {
    // measure the domain (for x, unique letters) (for y [0,maxFrequency])
    // now the scales are finished and usable
    x.domain(data.map(function(d) { return d.letter; }));
    @@ -78,39 +106,26 @@
    // someSelection.call(thing) is roughly equivalent to thing(someSelection[i])
    // for everything in the selection\
    // the end result is g populated with text and lines!
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    svg.select('.x.axis').call(xAxis);

    // same for yAxis but with more transform and a title
    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text") // just for the title (ticks are automatic)
    .attr("transform", "rotate(-90)") // rotate the text!
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");
    svg.select(".y.axis").call(yAxis)

    // THIS IS THE ACTUAL WORK!
    var bars = svg.selectAll(".bar").data(data) // (data) is an array/iterable thing
    var bars = svg.selectAll(".bar").data(data, function(d) { return d.letter; }) // (data) is an array/iterable thing, second argument is an ID generator function

    bars.exit().remove();

    // data that needs DOM = enter() (a set/selection, not an event!)
    bars.enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.letter); }) // (d) is one item from the data array, x is the scale object from above
    .attr("class", "bar");

    // the "UPDATE" set:
    bars.attr("x", function(d) { return x(d.letter); }) // (d) is one item from the data array, x is the scale object from above
    .attr("width", x.rangeBand()) // constant, so no callback function(d) here
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); }); // flip the height, because y's domain is bottom up, but SVG renders top down

    });

    function type(d) {
    // + coerces to a Number from a String (or anything)
    d.frequency = +d.frequency;
    return d;
    }

    </script>
  7. RandomEtc revised this gist Aug 29, 2014. 1 changed file with 33 additions and 10 deletions.
    43 changes: 33 additions & 10 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,16 +30,21 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    // Mike Bostock "margin conventions"
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    // D3 scales = just math
    // x is a function that transforms from "domain" (data) into "range" (usual pixels)
    // domain gets set after the data loads
    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
    .range([height, 0]);

    // D3 Axis - renders a d3 scale in SVG
    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
    @@ -49,43 +54,61 @@
    .orient("left")
    .ticks(10, "%");

    // create an SVG element (appended to body)
    // set size
    // add a "g" element (think "group")
    // annoying d3 gotcha - the 'svg' variable here is a 'g' element
    // the final line sets the transform on <g>, not on <svg>
    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // d3.tsv is a wrapper around XMLHTTPRequest, returns array of arrays (?) for a TSV file
    // type function transforms strings to numbers, dates, etc.
    d3.tsv("data.tsv", type, function(error, data) {

    // measure the domain (for x, unique letters) (for y [0,maxFrequency])
    // now the scales are finished and usable
    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    // another g element, this time to move the origin to the bottom of the svg element
    // someSelection.call(thing) is roughly equivalent to thing(someSelection[i])
    // for everything in the selection\
    // the end result is g populated with text and lines!
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

    // same for yAxis but with more transform and a title
    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .append("text") // just for the title (ticks are automatic)
    .attr("transform", "rotate(-90)") // rotate the text!
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

    svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); });
    // THIS IS THE ACTUAL WORK!
    var bars = svg.selectAll(".bar").data(data) // (data) is an array/iterable thing

    // data that needs DOM = enter() (a set/selection, not an event!)
    bars.enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.letter); }) // (d) is one item from the data array, x is the scale object from above
    .attr("width", x.rangeBand()) // constant, so no callback function(d) here
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); }); // flip the height, because y's domain is bottom up, but SVG renders top down

    });

    function type(d) {
    // + coerces to a Number from a String (or anything)
    d.frequency = +d.frequency;
    return d;
    }
  8. @mbostock mbostock revised this gist Nov 13, 2013. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -34,8 +34,6 @@
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var formatPercent = d3.format(".0%");

    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

    @@ -49,7 +47,7 @@
    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(formatPercent);
    .ticks(10, "%");

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
  9. @mbostock mbostock revised this gist Nov 13, 2013. 1 changed file with 9 additions and 9 deletions.
    18 changes: 9 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,15 @@
    <meta charset="utf-8">
    <style>

    body {
    .bar {
    fill: steelblue;
    }

    .bar:hover {
    fill: brown;
    }

    .axis {
    font: 10px sans-serif;
    }

    @@ -13,14 +21,6 @@
    shape-rendering: crispEdges;
    }

    .bar {
    fill: steelblue;
    }

    .bar:hover {
    fill: brown;
    }

    .x.axis path {
    display: none;
    }
  10. @mbostock mbostock revised this gist Nov 13, 2013. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions data.tsv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,27 @@
    letter frequency
    A .08167
    B .01492
    C .02780
    C .02782
    D .04253
    E .12702
    F .02288
    G .02022
    G .02015
    H .06094
    I .06973
    I .06966
    J .00153
    K .00747
    K .00772
    L .04025
    M .02517
    M .02406
    N .06749
    O .07507
    P .01929
    Q .00098
    Q .00095
    R .05987
    S .06333
    S .06327
    T .09056
    U .02758
    V .01037
    W .02465
    V .00978
    W .02360
    X .00150
    Y .01971
    Z .00074
    Y .01974
    Z .00074
  11. @mbostock mbostock revised this gist Nov 13, 2013. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,6 +17,10 @@
    fill: steelblue;
    }

    .bar:hover {
    fill: brown;
    }

    .x.axis path {
    display: none;
    }
  12. @mbostock mbostock revised this gist Jul 11, 2013. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -53,12 +53,7 @@
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.tsv("data.tsv", function(error, data) {

    data.forEach(function(d) {
    d.frequency = +d.frequency;
    });

    d3.tsv("data.tsv", type, function(error, data) {
    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    @@ -88,4 +83,9 @@

    });

    </script>
    function type(d) {
    d.frequency = +d.frequency;
    return d;
    }

    </script>
  13. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -69,7 +69,13 @@

    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

    svg.selectAll(".bar")
    .data(data)
  14. @mbostock mbostock revised this gist Oct 13, 2012. 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
    @@ -26,7 +26,7 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 30, bottom: 30, left: 40},
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  15. @mbostock mbostock revised this gist Oct 13, 2012. 2 changed files with 5 additions and 1 deletion.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:

    * [d3.tsv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.format](https://github.com/mbostock/d3/wiki/Formatting) - format percentages
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding
    * [d3.scale.linear](https://github.com/mbostock/d3/wiki/Quantitative-Scales) - *y*-position encoding
    * [d3.max](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_max) - compute domains
    5 changes: 4 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,6 +30,8 @@
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var formatPercent = d3.format(".0%");

    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

    @@ -42,7 +44,8 @@

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
    .orient("left")
    .tickFormat(formatPercent);

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
  16. @mbostock mbostock revised this gist Oct 13, 2012. 3 changed files with 28 additions and 14 deletions.
    11 changes: 6 additions & 5 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    D3 2.10 adds support for optional outer padding with [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal). This parameter allows you to control the outer padding (before the first bar and after the last bar) separately from the inner padding between bars. In this case, the inner padding is 10% and the outer padding is 20%.
    This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:

    ```javascript
    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, .2);
    ```
    * [d3.tsv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding
    * [d3.scale.linear](https://github.com/mbostock/d3/wiki/Quantitative-Scales) - *y*-position encoding
    * [d3.max](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_max) - compute domains
    * [d3.svg.axis](https://github.com/mbostock/d3/wiki/SVG-Axes) - display axes
    0 letter-frequency.tsv → data.tsv
    View file
    File renamed without changes.
    31 changes: 22 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,47 +23,60 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, .2);
    .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
    .range([height, 0]);

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.tsv("letter-frequency.tsv", function(letters) {
    letters.forEach(function(d) { d.frequency = +d.frequency; });
    x.domain(letters.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(letters, function(d) { return d.frequency; })]);
    d3.tsv("data.tsv", function(error, data) {

    data.forEach(function(d) {
    d.frequency = +d.frequency;
    });

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));
    .call(xAxis);

    svg.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis().scale(y).orient("left"));
    .call(yAxis);

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

    });

    </script>
  17. @mbostock mbostock revised this gist Oct 12, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  18. @mbostock mbostock revised this gist Aug 10, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,7 @@

    </style>
    <body>
    <script src="https://raw.github.com/mbostock/d3/2.10.0/d3.v2.min.js"></script>
    <script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
    <script>

    var margin = {top: 20, right: 30, bottom: 30, left: 40},
    @@ -66,4 +66,4 @@
    .attr("height", function(d) { return height - y(d.frequency); });
    });

    </script>
    </script>
  19. @mbostock mbostock created this gist Aug 10, 2012.
    6 changes: 6 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    D3 2.10 adds support for optional outer padding with [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal). This parameter allows you to control the outer padding (before the first bar and after the last bar) separately from the inner padding between bars. In this case, the inner padding is 10% and the outer padding is 20%.

    ```javascript
    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, .2);
    ```
    69 changes: 69 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    body {
    font: 10px sans-serif;
    }

    .axis path,
    .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
    }

    .bar {
    fill: steelblue;
    }

    .x.axis path {
    display: none;
    }

    </style>
    <body>
    <script src="https://raw.github.com/mbostock/d3/2.10.0/d3.v2.min.js"></script>
    <script>

    var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, .2);

    var y = d3.scale.linear()
    .range([height, 0]);

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.tsv("letter-frequency.tsv", function(letters) {
    letters.forEach(function(d) { d.frequency = +d.frequency; });
    x.domain(letters.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(letters, function(d) { return d.frequency; })]);

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));

    svg.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis().scale(y).orient("left"));

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

    </script>
    27 changes: 27 additions & 0 deletions letter-frequency.tsv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    letter frequency
    A .08167
    B .01492
    C .02780
    D .04253
    E .12702
    F .02288
    G .02022
    H .06094
    I .06973
    J .00153
    K .00747
    L .04025
    M .02517
    N .06749
    O .07507
    P .01929
    Q .00098
    R .05987
    S .06333
    T .09056
    U .02758
    V .01037
    W .02465
    X .00150
    Y .01971
    Z .00074