Skip to content

Instantly share code, notes, and snippets.

@karmi
Last active April 18, 2016 06:13

Revisions

  1. karmi revised this gist Oct 7, 2014. 1 changed file with 43 additions and 19 deletions.
    62 changes: 43 additions & 19 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -10,13 +10,16 @@
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto; padding: 2em; }

    header { margin: 0 0 2em 0; }
    header { color: #999; margin: 0 0 2em 0; }
    header, header * { font-weight: 300; }
    header h1, header p { margin: 0 0 0.25em 0; }
    #chart { background: #fafafa; border: 2px solid #fff; padding: 0.5em; min-height: 100px; position: relative; }
    #chart div { color: white; background: steelblue; font: 10px sans-serif; padding: 3px; margin: 1px; }
    pre#steps { color: #c1c1c1; font-size: 12px; font-family: Menlo, monospace; white-space: pre-wrap; margin-top: 2em; }
    pre#steps:hover { color: #222; }
    header a { color: #999; }
    #chart { background: #fafafa; border: 2px solid #fff; padding: 0.5em; margin: 0.5em 0; min-height: 80px; min-width: 400px; position: relative; }
    #chart div { color: white; background: black; font: 10px sans-serif; padding: 3px; margin: 1px; }
    pre.steps { color: #c1c1c1; font-size: 12px; font-family: Menlo, monospace; white-space: pre-wrap; margin: 2em 0 0 -1em; }
    pre.steps:hover { color: #222; }
    button.run { opacity: 0.2; }
    button.run:hover { opacity: 0.9; }
    </style>
    </head>
    <body>
    @@ -27,23 +30,44 @@ <h1>D3.js tutorial • Bar Chart</h1>

    <div id="chart"></div>

    <pre id="steps">
    // Setup
    var data = [4, 8, 15, 16, 23, 42];
    var chart = d3.select("#chart")
    chart.node()
    <pre class="steps">
    // 1. Data
    var data = [4, 8, 16, 18]
    </pre>

    // Bar
    var bar = chart.selectAll("div").data(data)
    bar.enter().append("div").style("width", function(d,i) { return d * 10 + 'px' }).text(function(d) {return d})
    <pre class="steps">
    // 2. Setup
    var chart = d3.select("#chart")
    </pre>

    // Scale
    var x = d3.scale.linear().domain([0, d3.max(data)]).range(["0px", "420px"])
    bar.enter().append("div").style("width", function(d,i) { return x(d) }).text(function(d) {return d })
    <pre class="steps">
    // 3. Bars
    var bar = chart.selectAll("div").data(data)
    bar.enter().append("div").style("width", function(d,i) { return d * 10 + 'px' }).text(function(d) {return d})
    </pre>

    </pre>
    <button onclick="eval( d3.selectAll('pre.steps')[0].map( function(o) { return o.textContent } ).slice(0, -2).join(';') )" class="run">Run</button>

    <script src="d3.v3.min.js"></script>
    <script></script>
    <pre class="steps">
    // 4. Scale
    chart.selectAll("div").remove()
    var bar = chart.selectAll("div").data(data)
    var x = d3.scale.linear().domain([0, d3.max(data)]).range(["0px", "500px"])
    bar.enter().append("div").style("width", function(d,i) { return x(d) }).text(function(d) {return d })
    </pre>

    <button onclick="eval( d3.selectAll('pre.steps')[0].map( function(o) { return o.textContent } ).slice(0, 4).join(';') )" class="run">Run</button>

    <pre class="steps">
    // 4. Scatterplot
    d3.select("#chart").remove()
    var chart = d3.select("header").append("svg").attr("id", "chart").style("height", 80)
    var circle = chart.selectAll("circle").data(data)
    circle.enter().append("circle").attr("r", "5px").attr("cy", 40).attr("cx", function(d) { return d * 5 })
    </pre>

    <button onclick="eval( d3.selectAll('pre.steps')[0].map( function(o) { return o.textContent } ).slice(0, 5).join(';') )" class="run">Run</button>

    <script src="d3.js"></script>
    </body>
    </html>
  2. karmi revised this gist Oct 7, 2014. 2 changed files with 9233 additions and 4 deletions.
    9,233 changes: 9,233 additions & 0 deletions d3.js
    9,233 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    4 changes: 0 additions & 4 deletions d3.v3.min.js
    0 additions, 4 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  3. karmi created this gist Mar 25, 2013.
    4 changes: 4 additions & 0 deletions d3.v3.min.js
    4 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    49 changes: 49 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>D3.js Tutorial • Bar Chart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    body
    { color: #222;
    background: #f8f8f8;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto; padding: 2em; }

    header { margin: 0 0 2em 0; }
    header, header * { font-weight: 300; }
    header h1, header p { margin: 0 0 0.25em 0; }
    #chart { background: #fafafa; border: 2px solid #fff; padding: 0.5em; min-height: 100px; position: relative; }
    #chart div { color: white; background: steelblue; font: 10px sans-serif; padding: 3px; margin: 1px; }
    pre#steps { color: #c1c1c1; font-size: 12px; font-family: Menlo, monospace; white-space: pre-wrap; margin-top: 2em; }
    pre#steps:hover { color: #222; }
    </style>
    </head>
    <body>
    <header>
    <h1>D3.js tutorial • Bar Chart</h1>
    <p>Based on the <a href="http://mbostock.github.com/d3/tutorial/bar-1.html">http://mbostock.github.com/d3/tutorial/bar-1.html</a></p>
    </header>

    <div id="chart"></div>

    <pre id="steps">
    // Setup
    var data = [4, 8, 15, 16, 23, 42];
    var chart = d3.select("#chart")
    chart.node()

    // Bar
    var bar = chart.selectAll("div").data(data)
    bar.enter().append("div").style("width", function(d,i) { return d * 10 + 'px' }).text(function(d) {return d})

    // Scale
    var x = d3.scale.linear().domain([0, d3.max(data)]).range(["0px", "420px"])
    bar.enter().append("div").style("width", function(d,i) { return x(d) }).text(function(d) {return d })

    </pre>

    <script src="d3.v3.min.js"></script>
    <script></script>
    </body>
    </html>