https://github.com/ttitcombe/d3-coursera

A collection of D3 examples following the NYU Coursera course
https://github.com/ttitcombe/d3-coursera

coursera d3 d3-coursera d3-js d3js visualization

Last synced: 25 days ago
JSON representation

A collection of D3 examples following the NYU Coursera course

• Host: GitHub
• URL: https://github.com/ttitcombe/d3-coursera
• Owner: TTitcombe
• License: mit
• Created: 2020-02-06T16:01:26.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-26T18:52:09.000Z (almost 5 years ago)
• Last Synced: 2024-11-07T06:32:51.744Z (3 months ago)
• Topics: coursera, d3, d3-coursera, d3-js, d3js, visualization
• Language: HTML
• Size: 65.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# D3 Examples

This repository contains examples of D3 visualisations created while following the

[NYU D3 visualisation coursera course](https://www.coursera.org/lecture/information-visualization-programming-d3js/introduction-to-d3-Fiduu)

## How to use

Simply clone the repository, navigate to one of the folders and open any of the `index.html` files in a browser of your choice.

In a folder with a `.csv` file,

you will need to start a server.

One simple way to do this is using python:

Navigate to the folder in the command prompt / terminal

and type `python -m http.server`.

This should provide a local host link;

open it.

## D3 Coursera examples

Small D3 examples adapted from the Coursera course.

These examples get progressively more complex.

* [`selections`](./01-selections)

  - Simply demonstrations of selections and using `text` and `html` to alter the selection

* [`adding/removing elements`](./02-adding-elements)

  - Adds and removes elements

* [`changing properties`](./03-changing-properties)

  - Use `attr` and `style` to change an element's properties

* [`loading data`](./04-loading-data)

  - Load and read CSV data

* [`simple svg`](./05-svg)

  - No D3, just simple SVG manipulation

* [`ordinal scales`](./06-ordinal-scales)

  - Uses `scaleBand` to create an SVG slope chart linking countries to their continents

![Countries to continents. A chart created using ordinal scales.](./assets/ordinal-scales.png)

## Non Coursera examples

D3 examples not inspired by the Coursera course

* [`simple bar chart`](./simple_barchart)

  - Inspired by Mike Bostock's ["Let's make a bar chart" tutorial](https://observablehq.com/@d3/lets-make-a-bar-chart)