├── Let's Make a Bar Chart II ├── data.tsv ├── style.css ├── index.html └── Graph.js ├── Let's Make a Bar Chart I ├── style.css ├── Graph.js └── index.html └── Let's Make a Bar Chart III ├── style.css ├── data.tsv ├── index.html └── Graph.js /Let's Make a Bar Chart II/data.tsv: -------------------------------------------------------------------------------- 1 | name value 2 | Locke 4 3 | Reyes 8 4 | Ford 15 5 | Jarrah 16 6 | Shephard 23 7 | Kwon 42 -------------------------------------------------------------------------------- /Let's Make a Bar Chart II/style.css: -------------------------------------------------------------------------------- 1 | .chart rect { 2 | fill: steelblue; 3 | } 4 | 5 | .chart text { 6 | fill: white; 7 | font: 10px sans-serif; 8 | text-anchor: end; 9 | } -------------------------------------------------------------------------------- /Let's Make a Bar Chart I/style.css: -------------------------------------------------------------------------------- 1 | .chart div { 2 | font: 10px sans-serif; 3 | background-color: steelblue; 4 | text-align: right; 5 | padding: 3px; 6 | margin: 1px; 7 | color: white; 8 | } -------------------------------------------------------------------------------- /Let's Make a Bar Chart III/style.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | fill: steelblue; 3 | font: 10px sans-serif; 4 | text-anchor: middle; 5 | } 6 | .bar:hover { 7 | fill: brown; 8 | } 9 | 10 | .axis text { 11 | font: 10px sans-serif; 12 | } 13 | 14 | .axis path, 15 | .axis line { 16 | fill: none; 17 | stroke: #000; 18 | shape-rendering: crispEdges; 19 | } -------------------------------------------------------------------------------- /Let's Make a Bar Chart I/Graph.js: -------------------------------------------------------------------------------- 1 | var data = [4, 8, 15, 16, 23, 42]; 2 | 3 | var x = d3.scale.linear() 4 | .domain([0, d3.max(data)]) 5 | .range([0, 420]); 6 | 7 | d3.select(".chart") 8 | .selectAll("div") 9 | .data(data) 10 | .enter().append("div") 11 | .style("width", function(d) { return x(d) + "px"; }) 12 | .text(function(d) { return d; }); 13 | -------------------------------------------------------------------------------- /Let's Make a Bar Chart III/data.tsv: -------------------------------------------------------------------------------- 1 | letter frequency 2 | A .08167 3 | B .01492 4 | C .02782 5 | D .04253 6 | E .12702 7 | F .02288 8 | G .02015 9 | H .06094 10 | I .06966 11 | J .00153 12 | K .00772 13 | L .04025 14 | M .02406 15 | N .06749 16 | O .07507 17 | P .01929 18 | Q .00095 19 | R .05987 20 | S .06327 21 | T .09056 22 | U .02758 23 | V .00978 24 | W .02360 25 | X .00150 26 | Y .01974 27 | Z .00074 -------------------------------------------------------------------------------- /Let's Make a Bar Chart I/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Let's Make a Bar Chart II/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Let's Make a Bar Chart III/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Let's Make a Bar Chart II/Graph.js: -------------------------------------------------------------------------------- 1 | var width = 420; 2 | var barHeight = 20; 3 | 4 | var x = d3.scale.linear() 5 | .range([0, width]); 6 | 7 | var chart = d3.select(".chart") 8 | .attr("width", width); 9 | 10 | d3.tsv("data.tsv", type, function(error, data) { 11 | x.domain([0, d3.max(data, function(d) { return d.value; })]); 12 | 13 | chart.attr("height", barHeight * data.length); 14 | 15 | var bar = chart.selectAll("g") 16 | .data(data) 17 | .enter().append("g") 18 | .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 19 | 20 | bar.append("rect") 21 | .attr("width", function(d) { return x(d.value); }) 22 | .attr("height", barHeight - 1); 23 | 24 | bar.append("text") 25 | .attr("x", function(d) { return x(d.value) - 3; }) 26 | .attr("y", barHeight / 2) 27 | .attr("dy", ".35em") 28 | .text(function(d) { return d.value; }); 29 | }); 30 | 31 | function type(d) { 32 | d.value = +d.value; // coerce to number 33 | return d; 34 | } -------------------------------------------------------------------------------- /Let's Make a Bar Chart III/Graph.js: -------------------------------------------------------------------------------- 1 | var margin = {top: 20, right: 30, bottom: 30, left: 40}; 2 | var width = 960 - margin.right - margin.left; 3 | var height = 500 - margin.top - margin.bottom; 4 | 5 | var y = d3.scale.linear() 6 | .range([height, 0]); 7 | 8 | var x = d3.scale.ordinal() 9 | .rangeRoundBands([0, width], 0.1); 10 | 11 | var xAxis = d3.svg.axis() 12 | .scale(x) 13 | .orient("bottom"); 14 | 15 | var yAxis = d3.svg.axis() 16 | .scale(y) 17 | .orient("left"); 18 | 19 | var chart = d3.select(".chart") 20 | .attr("width", width + margin.left + margin.right) 21 | .attr("height", height + margin.top + margin.bottom) 22 | .append("g") 23 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 24 | 25 | d3.tsv("data.tsv", convertToNumber, processData); 26 | function processData(error, data) { 27 | x.domain(data.map(function(d) { return d.letter; })); 28 | y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 29 | 30 | chart.append("g") 31 | .attr("class", "x axis") 32 | .attr("transform", "translate(0," + height + ")") 33 | .call(xAxis); 34 | 35 | chart.append("g") 36 | .attr("class", "y axis") 37 | .call(yAxis); 38 | 39 | chart.selectAll(".bar") 40 | .data(data) 41 | .enter().append("rect") 42 | .attr("class", "bar") 43 | .attr("x", function(d) { return x(d.letter); }) 44 | .attr("y", function(d) { return y(d.frequency); }) 45 | .attr("height", function(d) { return height - y(d.frequency); }) 46 | .attr("width", x.rangeBand()); 47 | } 48 | 49 | function convertToNumber(d) { 50 | d.frequency = +d.frequency; // coerce to number 51 | return d; 52 | } 53 | --------------------------------------------------------------------------------