Getting started with D3.js. This article assumes familiarity with HTML, SVG, CSS and JavaScript.
D3 in Depth assumes you're familiar with HTML, SVG, CSS and JavaScript. If not, I recommend reading Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualisation.
If you're familiar with libraries such as React and Vue.js (or even jQuery) you should be fine.
There are many code examples hosted on CodePen. For example:
Clicking on the 'Edit in CodePen' button opens the example in CodePen.
Each example consists of three or more files:
- index.html
- index.js
- style.css
index.html will usually look something like:
<svg width="760" height="140">
<g transform="translate(70, 70)">
</g>
</svg>(CodePen hides the usual boilerplate that starts <!DOCTYPE html> and ends </html>.)
index.js contains your JavaScript code and is automatically included into index.html by CodePen. (I've also configured the examples to include D3.js.)
style.css contains your CSS code and is also automatically included into index.html by CodePen.
Exporting from CodePen
CodePen has a nice feature where you can download the pen and work on it in your own code editor. You first need to save the pen then some buttons will appear in the bottom right. Click on Export and choose the Export as .zip option. This will result in a folder containing your code.
The src directory contains the code as it appears in the pen and is perhaps not so useful. The dist directory however has the complete code and can be edited locally, served locally (or uploaded to the web).
If any of this doesn't make sense to you I suggest reading Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualisation course which goes into more detail.