![]() |
VOOZH | about |
D3.js, or D3, is a JavaScript library. Its name stands for Data-Driven Documents (3 βDβs), and itβs known as an interactive and dynamic data visualization library for the web.
First released in February 2011, D3βs version 4 was released in June 2016. At the time of writing, the latest stable release is version 4.4, and it is continuously being updated.
D3 leverages the Scalable Vector Graphic, or SVG format, which allows you to render shapes, lines, and fills that can be zoomed in or out without losing quality.
This tutorial will guide you through creating a bar chart using the JavaScript D3 library.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Community and Developer Education expert. Former Senior Manager, Community at DigitalOcean. Focused on topics including Ubuntu 22.04, Ubuntu 20.04, Python, Django, and more.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Very good tutorial. Like the way it builds in small steps rather than large, unexplained leaps. However, I have a question as to whether you have implemented your last suggestion about retrieving local data: d3.json(βmyData.jsonβ, function(json) { // code for D3 charts in here } My attempts resulted in a CORS error. In order to serve data, I used a simple Express.js server with CORS headers processing to deliver json data. Your workarounds? David
Interesting tutorial. Personally I prefer Chart.js.
Thank you so much for this, I was thrashing around in a forest of brain-mulching nightmares and there was a thick soup of things beginning with βnβ before I found you :)
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.