Last active
April 18, 2016 06:13
Revisions
-
karmi revised this gist
Oct 7, 2014 . 1 changed file with 43 additions and 19 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 { color: #999; margin: 0 0 2em 0; } header, header * { font-weight: 300; } header h1, header p { margin: 0 0 0.25em 0; } 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 class="steps"> // 1. Data var data = [4, 8, 16, 18] </pre> <pre class="steps"> // 2. Setup var chart = d3.select("#chart") </pre> <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> <button onclick="eval( d3.selectAll('pre.steps')[0].map( function(o) { return o.textContent } ).slice(0, -2).join(';') )" class="run">Run</button> <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> -
karmi revised this gist
Oct 7, 2014 . 2 changed files with 9233 additions and 4 deletions.There are no files selected for viewing
-
karmi created this gist
Mar 25, 2013 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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>