Introduction D3
D3 is a open JavaScript library for manipulating documents based on data. D3 stands for Data Driven Documents. You provide the data yourself. D3 makes the connection between your data and the ('driven')documents, which are web-based(HTML and SVG). Bringing to life your data using HTML, SVG, and CSS. D3.js is developed by Mike Bostock and completely open source and free available at Github. With D3, you can make beautiful interactive visualizations, graphs of your data but also: a map!
On the website of D3 you can find beautiful examples. Be inspired and have a look at their code!
In short, D3.js takes in some data and makes a graphic out of it, be it a chart or a map, using Scalable Vector Graphics.
SVG is a text-based vector image format for two-dimensional graphics. Meaning, you can specify what an SVG image should look like by writing simple markup code, sort of like HTML tags. In fact, SVG code can be included directly within any HTML document. This means that they can be searched, indexed, scripted, and compressed. SVG images can be created and edited with any text editor, as well as with drawing software.
This can be quite convenient if your data changes. You can easily prepare your graphics with dummy data. So when the actual data arrives, D3.js re-creates the graphic as the data comes in. SVG is rendered in the browser. If many people try to access a item, the graphics don't weigh much into the IT infrastructure. Also SVG is scalable. Using mobile phones or tablets with all sorts of screen sizes. The graphics can easily scale up and down without losing their sharpness.
In D3 step 1 we will set up the basics to show a simple world map with D3.
In D3 step 2 we will add interactivity and data-driven styling.
In D3 step 3 we will add extra data from a GeoJSON file to our map, plus a legend of the data.
/home/niene/Documents/MyFirstWebMap_D3
In these directories we save everything we make and download today. During this workshop it is referred to as yourDirectory.
➡️ If you are not that comfortable with HTML, CSS and JavaScript yet, this Making a web page tutorial will help you along!
➡️ If you already know some HTML, CSS and JavaScript, you can start immediately with the tutorial at D3 step 1 and read through the HTML explanations.