Skip to content
Basic Introduction to D3JS
HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
exercise1
exercise2
exercise3
exercise4
exercise5
exercise6
.gitignore
LICENSE
README.md
index.html

README.md

D3js Introduction

Basic exercises with D3js

  • Exercise 1: Using the browser console start playing with D3JS
  • Exercise 2: Create a kind of Mickey Mouse head in SVG
  • Exercise 3: Create random circles from data
  • Exercise 4: Add transition to the circles
  • Exercise 5: Playing with the scales
  • Exercise 6: Scatterplot

Notes

Basic Usage

The main cycle using D3js is always

selectAll -> data -> enter -> append

Example: Generate 5 circles

    let svg = d3.select("body")
        .append("svg")
        .attr("width", 400)
        .attr("height", 400);

    let radius = [3, 6, 9, 12, 15];

    svg.selectAll("circle") // find or select all circles in the SVG: initally none
        .data(radius)       // bind the data in radius array
        .enter()            // create placeholders to hold the data: five in this case
        .append("circle")   // fill the placeholders with circles: create five circles
        .text(d => d)

Example: Updating the 5 circles

    let newRadius = [10, 20, 30, 40, 50];

    svg.selectAll("circle")
    .data(radius);

Transitions

transtion -> duration

Example: Transition a circle

    let svg = d3.select("body")
        .append("svg")
        .attr("width", 400)
        .attr("height", 400);

    svg.append("circle")            // creating a circle
        .attr("cx", 100)            // initial attributes
        .attr("cy", 100)
        .attr("r", 50)
        .attr("fill", "black")
        .transition()               // definition of transition
        .delay(100)                 // It will start after 100 ms       
        .duration(2000)             // It will length 2000 ms
        .attr("cx", 200)            // final attributes
        .attr("cy", 0)
        .attr("r", 25)
        .attr("fill", "green");

Scales

Creates a function which maintains the aspect ratio of two arrays of values. For example:

  • Domain values: [0, 0.1, 0.2, 0.3, 0.4, 0.7, 1] --> min = 0 and max = 1.

If we want to paint these values as radius of circles in a SVG we'll need to multiply them for a ratio in order to get the minimum values to paint. (We don't want to paint a circle of radius 0.1. Too small).

For that we "map" the Domain values to some Range values

  • Range: [748, 1024]

These are the destination values. With a Scale function we will map automatically from 0 to 748 and from 1 to 1024 and the library will calculate automatically all the intermediate values.

Example: Scaling numbers

    const dataset = [0, 0.1, 0.2, 0.3, 0.4, 0.7, 1];

    let min = d3.min(dataset);  // min of the dataset
    let max = d3.max(dataset);  // max of the dataset

    const svgMinHeight = 748,
          svgMaxHeight = 1024;

    const xScale = d3.scaleLinear()           // xScale is a function.
                    .domain([min, max])
                    .range([svgMinHeight, svgMaxHeight]);

    console.log(xScale(0));     // 748
    console.log(xScale(1));     // 1024
    console.log(xScale(0.2));   // 803.2

Example: Scaling objects with properties

    const dataset = [
        { h: 100, w: 100, r: 100},
        { h: 10,  w: 10,  r: 10},
        { h: 200, w: 10,  r: 50},
        { h: 150, w: 50,  r: 200}
    ];

    let min = d3.min(dataset, d => d.h);    // min of h in the dataset: 10
    let max = d3.max(dataset, d => d.h);    // max or r in the dataset: 200

    const svgMinHeight = 748,
          svgMaxHeight = 1024;

    const xScale = d3.scaleLinear()           // xScale is a function.
                    .domain([min, max])
                    .range([svgMinHeight, svgMaxHeight]);

    console.log(xScale(0));     // 733.4736842105264
    console.log(xScale(10));    // 748
    console.log(xScale(50));    // 806.1052631578947
You can’t perform that action at this time.