Built with blockbuilder.org
Last active
August 1, 2016 02:37
-
-
Save EmbraceLife/9245dc644a9cdf8b02f7a93339fa4c75 to your computer and use it in GitHub Desktop.
1. horizontal barChart
This file contains 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 characters
| license: gpl-3.0 |
This file contains 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 characters
| name | value | |
|---|---|---|
| Locke | 4 | |
| Reyes | 8 | |
| Ford | 15 | |
| Jarrah | 16 | |
| Shephard | 23 | |
| Kwon | 42 |
This file contains 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 characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <!-- step 1: create a html/CSS svg | |
| 1. give a class name: "chart" | |
| --> | |
| <svg class="chart"></svg> | |
| <!-- step 2: style for SVG's rect and text | |
| 1. fill, font, text-anchor | |
| 2. .chart rect | |
| 3. .chart text | |
| 4. {fill: steelblue;} | |
| 5. {font: 10px sans-serif;} | |
| --> | |
| <style> | |
| .chart rect { | |
| fill: steelblue; | |
| } | |
| .chart text { | |
| fill: white; | |
| font: 10px sans-serif; | |
| text-anchor: end; | |
| } | |
| </style> | |
| <script> | |
| //---- step 3: select svg and set width --------------- | |
| // 1. set variables "width" and "barHeight" | |
| var width = 420, | |
| barHeight = 20; | |
| // 2. select SVG by className | |
| var chart = d3.select(".chart") | |
| // 2.1 set width attr | |
| .attr("width", width); | |
| // check: Elements view | |
| //---- step 4: map data with px on x-axis ---------- | |
| // 1. assign "xScale" a scaleLinear func | |
| var xScale = d3.scaleLinear() | |
| // 2. set px-range (data-range as default) | |
| .range([0, width]); | |
| // 3. Console view: check data-range, px-range, map(0.5) to px | |
| console.log(" data-range: ", xScale.domain(), "\n px-range: ", xScale.range(), "\n test map data(0.5) to px: ", xScale(0.5)); | |
| // ---- step 5.0 create row function --------------- | |
| // 1. for each d object | |
| function type(d) { | |
| // 2. assign numeric value back to d.value | |
| d.value = +d.value; | |
| return d; | |
| } | |
| // ---- step 5: load tsv data -------------- | |
| // 1. load tsv file | |
| // 2. row(func) to process each row of data | |
| // 3. get(func) let us do things with data | |
| d3.tsv("data.tsv").row(type).get(function(error, data){ | |
| // 4. Console view: | |
| console.log(" processed data: ", data); | |
| console.log(" length of data: ", data.length); | |
| console.log(" column names of data: ", data.columns); | |
| console.log(" check data.name: ", data.map(function(d){return d.name;})); | |
| console.log(" check data.value: ", data.map(function(d){return d.value;})); | |
| // ---- step 6: set data range for xScale func ----------------- | |
| // 1. set data-range for xScale func | |
| // 2. calc max among all rows of data.value | |
| xScale.domain([0, d3.max(data, function(d) { return d.value; })]); | |
| // ---- step 7: set height for SVG ----------------- | |
| // 1. select SVG using svg variable | |
| // 2. calc SVG height using barHeight and data.length | |
| chart.attr("height", barHeight * data.length); | |
| // ---- step 8: upon SVG, bind data with g placeholders --------- | |
| // 0. upon SVG | |
| // 1. select all existing g placeholders | |
| var bar = chart.selectAll("g") | |
| // 2. bind with data | |
| .data(data) | |
| // 3. select all entering NodeList elements | |
| .enter() | |
| // 4. create a g placeholder upon each NodeList elements | |
| .append("g") | |
| // 5. transform-translate each g at diff position by data row index | |
| .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); | |
| // 6. assign all g placeholders to var "bar" | |
| // Elements View: see all g placeholders | |
| // ---- step 9: upon each g, create a rect ------------ | |
| // 1. create a rect upon each g placeholder | |
| var rects = bar.append("rect") | |
| // 2. set rect's width using each row's data.value | |
| .attr("width", function(d) { return xScale(d.value); }) | |
| // 3. set rect's height with 1px space | |
| .attr("height", barHeight - 1); | |
| // Elements View: see all rects | |
| // ---- step 10: upon each g, create a text | |
| // 0. upon each and all g, inherit g's x,y coord | |
| // 1. create a text | |
| var texts = bar.append("text") | |
| // 2. set text x coord using each row's value - 3 | |
| .attr("x", function(d) { return xScale(d.value) - 3; }) | |
| // 3. set text y coord | |
| .attr("y", barHeight / 2) | |
| // 4. trial and error "dy" | |
| .attr("dy", ".35em") | |
| // 5. set label content | |
| .text(function(d) { return d.value; }); | |
| // Elements View: see all rects | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment