D3.js is a JavaScript library for manipulating documents based on data. - quoted from https://d3js.org
This post is on how to display a simple bar chart using HTML div elements and d3 JavaScript library.
data.tsv is the data file we are going to use which has tab separated values (tsv) and header values. Similar to tsv, csv stands for comma separated values which acts similar to tsv files.
When running this however, in certain browsers, simply opening the html file is not sufficient since d3 makes AJAX requests for data. Therefore, the file must be loaded through a web server.
✔ Python users have a simple way to run a web server on the local machine by simply opening the terminal in the file's directory and executing the following command.
Once the server is started, simply open the html file using the server.
Eg: http://127.0.0.1:8000/barchartexample.html
This article presents more information on python's simple server.
✔ Or online editors such as Plunker too can be used.
This question on StackOverflow focuses on the file loading problem.
python -m SimpleHTTPServer
Once the server is started, simply open the html file using the server.
Eg: http://127.0.0.1:8000/barchartexample.html
This article presents more information on python's simple server.
✔ Or online editors such as Plunker too can be used.
This question on StackOverflow focuses on the file loading problem.
The following is a self explaining code gist relevant to the above displayed bar chart.
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> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>D3 simple bar chart</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="chart"> | |
| <!--chart area--> | |
| </div> | |
| <script> | |
| var width = 500; | |
| //set style of the chart area | |
| var chart = d3.select(".chart") | |
| .style("border", "1px dashed black") | |
| .style("padding", "10px"); | |
| //set data.tsv as the data file | |
| d3.tsv("data.tsv", type, function (error, data) { | |
| //create a linear scale to map data space to display space | |
| //although it looks like a variable, it can be used as a function - in setting bar's width | |
| var x = d3.scaleLinear() | |
| .domain([0, d3.max(data, function (d) { //domain is from 0 to the maximum data value | |
| return d.value; | |
| })]) | |
| .range([0, width]); //range(display space) is from 0 to defined width | |
| //append row div to chart | |
| var row = chart.selectAll("div").data(data).enter().append("div").attr("class", "row"); | |
| row.append("div").attr("class", "title") //append title | |
| .style("width", "100px") //set style of title | |
| .text(function (d) { //set text of the title - header values of the data file are used | |
| return d.name; | |
| }); | |
| row.append("div").attr("class", "bar") //append bar | |
| .style("background-color", "#6688ff") //set style of bar | |
| .style("border", "1px solid #000") | |
| .style("color", "#fff") | |
| .style("padding", "5px") | |
| .style("margin", "2px") | |
| .style("width", function (d) { //set width of the bar from the value | |
| return x(d.value) + "px"; | |
| }) | |
| .text(function (d) { | |
| return d.value; | |
| }); | |
| //set common styles to all the div's in the row | |
| row.selectAll("div") | |
| .style("text-align", "right") | |
| .style("display", "inline-block"); | |
| }); | |
| function type(d) { | |
| d.value = +d.value; // coerce to number | |
| return d; | |
| } | |
| </script> | |
| </body> | |
| </html> |
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 | |
| For | 15 | |
| Jarrah | 16 | |
| Shephard | 23 | |
| Kwon | 42 |
0 comments:
Post a Comment