VOOZH about

URL: https://www.digitalocean.com/community/tutorials/getting-started-with-data-visualization-using-javascript-and-the-d3-library?comment=66979

⇱ Getting Started with Data Visualization Using JavaScript and the D3 Library | DigitalOcean


Getting Started with Data Visualization Using JavaScript and the D3 Library

Published on December 29, 2016
πŸ‘ Getting Started with Data Visualization Using JavaScript and the D3 Library

Introduction

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.

Learn more about our products

About the author

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.

Still looking for an answer?

Was this helpful?

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 :)

πŸ‘ Creative Commons
This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
  • Deploy on DigitalOcean

    Click below to sign up for DigitalOcean's virtual machines, Databases, and AIML products.

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and AI-native businesses

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow β€” whether you're running one virtual machine or ten thousand.

Start building today

From GPU-powered inference and Kubernetes to managed databases and storage, get everything you need to build, scale, and deploy intelligent applications.

Β© 2026 DigitalOcean, LLC.Sitemap.
Dark mode is coming soon.