{"id":1707,"date":"2018-10-01T09:06:00","date_gmt":"2018-10-01T09:06:00","guid":{"rendered":"https:\/\/www.htmlgoodies.com\/uncategorized\/bring-your-data-to-life-with-d3-js\/"},"modified":"2021-04-23T20:21:10","modified_gmt":"2021-04-23T20:21:10","slug":"bring-your-data-to-life-with-d3-js","status":"publish","type":"post","link":"https:\/\/www.htmlgoodies.com\/javascript\/bring-your-data-to-life-with-d3-js\/","title":{"rendered":"Bring Your Data to Life with D3.js"},"content":{"rendered":"

Let’s face it, raw data is boring. Moreover, it can be a challenge to spot patterns in reams of textual format. Visuals are far easier to interpret. Humans tend to be visual by nature, so putting data in a graphical context makes it much easier to spot trends.<\/p>\n

There are a few data visualization libraries, but one in particular that has been gaining a lot of traction of late is D3. Short for Data-Driven Documents, D3 is a JavaScript library for producing dynamic, interactive data visualizations in any web browser. It makes use of the widely implemented SVG, HTML5, and CSS standards. In contrast to many other libraries, D3.js gives you tremendous control over the final result.<\/p>\n

In today’s tutorial we’ll use the D3.js library to display the contents of a CSV data file within a dynamically generated HTML table.<\/p>\n

Loading the Data<\/h2>\n

Our data is a CSV dump of the films from the Sakila Sample Database<\/a>. It’s one of my favorite data sources because its content is entertaining as heck!<\/p>\n

 <\/pre>\n
“film_id”,”title”,”description”,”release_year”,”rental_rate”,”length”,”rating” “1”,”ACADEMY DINOSAUR”,”A Epic Drama of a Feminist And…”,”2006″,”0.99″,”86″,”PG” “47”,”BABY HALL”,”A Boring Character Study of a A Shark And a Girl who must…”,”2006″,”4.99″,”153″,”NC-17″ “110”,”CABIN FLASH”,”A Stunning Epistle of a Boat And a Man who…”,”2006″,”0.99″,”53″,”NC-17″<\/p>\n
D3’s d3-fetch module provides convenient parsing on top of the whatwg Fetch spec<\/a>. It includes Ajax-powered methods for retrieving data in a variety of formats, from text and csv to blobs, images, json, and whatever data types you might want to load.<\/p>\n
For example, d3.csv() converts the raw data into an array of objects:<\/p>\n
d3.csv(\"sakila_videos.csv\").then(function(data) {\n  console.log(data[0]); \/* => {\n                             film_id: \"1\", \n                             title: \"ACADEMY DINOSAUR\", \n                             description: \"A Epic Drama of a Feminist And…\", \n                             release_year: \"2006\", \n                             rental_rate: \"0.99\", \n                             length: \"86\",\n                             rating: \"PG\"\n                           } *\/\n});<\/pre>\n
What if you don’t want an array of objects? Another option is to use the d3.text() method. It treats the data as a string:<\/p>\n
d3.text(\"sakila_videos.csv\").then(function(data) {\n  console.log(data); \n\/* \n\"film_id\",\"title\",\"description\",\"release_year\",\"rental_rate\",\"length\",\"rating\"\n\"1\",\"ACADEMY DINOSAUR\",\"A Epic Drama of a Feminist And…\",\"2006\",\"0.99\",\"86\",\"PG\"\n\"47\",\"BABY HALL\",\"A Boring Character Study of a A Shark And a Girl who must…\" etc…\n*\/\n});\n<\/pre>\n
From there, we can use the d3.csvParseRows(). It converts the CSV string into an array (rows) of arrays (columns):<\/p>\n
d3.text(\"sakila videos.csv\").then(function(data) {\n  var rows  = d3.csvParseRows(data);\n  console.log(rows);\n\/*\n0:Array(7)\n  0:\"film_id\"\n  1:\"title\"\n  2:\"description\"\n  3:\"release_year\"\n  4:\"rental_rate\"\n  5:\"length\"\n  6:\"rating\"\n1:Array(7)\n  0:\"1\"\n  1:\"ACADEMY DINOSAUR\"\n  2:\"A Epic Drama of a Feminist And…\"\n  3:\"2006\"\n  4:\"0.99\"\n  5:\"86\"\n  6:\"PG\"\n2:Array(7)\n0:\"47\"\n1:\"BABY HALL\"\n2:\"A Boring Character Study of a A Shark And a Girl who…\"\n3:\"2006\"\n4:\"4.99\"\n5:\"153\"\n6:\"NC-17\"\netc…\n*\/\n});<\/pre>\n
Rendering the Table and Headers<\/h2>\n
You’ll find that working in HTML format with D3 is very similar to jQuery. D3 has a select() method for selecting a single DOM element as well as a style() method for…er…styling elements.<\/p>\n
Here’s the code for appending the table to the DOM:<\/p>\n
var rows  = d3.csvParseRows(datasetText),\n    table = d3.select('body').append('table')\n    .style(\"border-collapse\", \"collapse\")\n    .style(\"border\", \"2px black solid\");\n<\/pre>\n
With a reference to the table, we can now add the headers:<\/p>\n
\/\/ headers\ntable.append(\"thead\").append(\"tr\")\n    .selectAll(\"th\")\n    .data(rows[0])\n    .enter().append(\"th\")\n    .text(function(d) { return d; })\n    .style(\"border\", \"1px black solid\")\n    .style(\"padding\", \"5px\")\n    .style(\"background-color\", \"lightgray\")\n    .style(\"font-weight\", \"bold\")\n    .style(\"text-transform\", \"uppercase\");\n<\/pre>\n
An Explanation of some of the Above Methods<\/h3>\n
There are a lot of method calls in the above code snippet, some of which require further elucidation:<\/p>\n