Basic Tasks

Create Container

const svg = d3
	.select('#playground')
	.append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('transform',
	      'translate(' + margin.left + ',' + margin.top + ')');

Axes: Create

const x = d3Scale.scaleLinear().domain([0, 100]).range([0, width]);
const y = d3Scale.scaleLinear().domain([0, 100]).range([height, 0]);

const xAxis = d3Axis.axisBottom(x).tickFormat(d3.timeFormat('
const yAxis = d3Axis.axisLeft(y).ticks(10);

Axes

Format

var axisTimeFormat = d3.time.format.multi([
    [".
    [":
    ["
    ["
    ["
    ["
    ["
    ["
 ]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(axisTimeFormat);

Installation

$ npm install -save d3
                    d3-scale
                    d3-array
                    d3-shape
                    d3-interpolate
                    d3-color
                    d3-time-format
                    d3-ease
                    d3-transition
                    d3-selection
                    d3-time
                    d3-path
                    d3-dispatch
                    d3-format
                    d3-timer
                    d3-drag
                    d3-geo
                    d3-brush
                    d3-dsv
                    d3-random

Awesome

Websites

• D3.js

Examples

• Data Visualization: List of D3 Examples – 2016
• Over 1000 D3.js Examples and Demos
• Over 2000 D3.js Examples and Demos
• The D3.js – Graph Gallery

Reading

• https://www.fullstackpython.com/d3-js.html

Learning

• D3.js Grundlagen
• https://www.dashingd3js.com/
• Learn D3.js step by step: https://www.d3indepth.com/
• tutorialspoint: D3.js Tutorials

• https://wattenberger.com/blog/d3

Blog

• How to used D3 in Ionic 4 or Angular
• Interactive Charts with D3.js

Plugins

• https://d3-discovery.net/

Samples and Code

Mike Bostock: For Example

https://bl.ocks.org/

https://github.com/Wattenberger/Wattenberger-2019

Installation

$ npm install -save d3
                    d3-scale
                    d3-array
                    d3-shape
                    d3-interpolate
                    d3-color
                    d3-time-format
                    d3-ease
                    d3-transition
                    d3-selection
                    d3-time
                    d3-path
                    d3-dispatch
                    d3-format
                    d3-timer
                    d3-drag
                    d3-geo
                    d3-brush
                    d3-dsv
                    d3-random