/d3js-examples

Simple D3.js examples for beginners

Primary LanguageJavaScript

D3.js Examples

screenshot

Description

This project is a web application that shows some simple D3.js examples in one page for people who are interested in learning D3.js.

D3 stands for Data-Driven Documents. It is an open-source JavaScript library developed by Mike Bostock to create custom interactive data visualizations in the web browser using SVG, HTML and CSS.

The examples are originally from the Youtube tutorial - Data Visualization with D3.js - Full Tutorial Course created by Curran Kelleher. I basically copied some of the examples while following the tutorial, modified them a bit (e.g. adding interactivity) then compiled them into a single-page web application.

Here's the Live Demo on Glitch. (Works in both desktop and mobile browsers)

I created this app mainly for my own learning purpose but I think someone might find it useful to learn the basics of D3.js. If you are interested in learning D3.js, I highly recommend the above mentioned Youtube tutorial since it covers not only how to use D3.js but also the concepts and techniques of data visualization in general.

Setup

  1. You need to have Python installed on your computer
  2. Run the following commands in the Terminal
git clone https://github.com/cuinjune/d3js-examples.git
cd d3js-examples
python -m http.server 8080
  1. Open your web browser and navigate to http://localhost:8080

Author