D3.js | Cookbook

Basic Tasks

Create Container

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">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

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">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('%m/%d'));
const yAxis = d3Axis.axisLeft(y).ticks(10);

Axes

Format

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">var axisTimeFormat = d3.time.format.multi([
    [".%L",   (d) => d.getMilliseconds()],
    [":%S",   (d) => d.getSeconds()],
    ["%H:%M", (d) => d.getMinutes()],
    ["%H:%M", (d) => d.getHours()],
    ["%a %d", (d) => d.getDay() && d.getDate() != 1],
    ["%b %d", (d) => d.getDate() != 1; }],
    ["%B",    (d) => d.getMonth()],
    ["%Y",    ()  => true]
 ]);

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

Installation

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">$ 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