D3 Tutorial

Working with Javascript

We have the following data of cars

List of Cars

We can use functional programming to make it look nicer. The code below use a functional paradigm. By making a reduce function we can easily format json formatted data. 

data.reduce((acc, d) => {
  acc += formatCar(d) + "\n";
  return acc;
}, "");
export const formatCar = car =>
  `${car.year} ${car.make} ${car.model}: ${car.price}`;
Reduce Function
Use of Reduce function

This is done by mapping over the data with a custom function that formats each object (i.e. each car description). Look at components/car.js file for the formatting function.

We can also filter by a specific price. In the following example we filter by car prices less than $2000. 

export const filterByPrice = (cars, price) =>
            cars.filter(car => car.price < price);
Here is the code for the filter method.
Result of applying the filter method used here

HTML CSS and SVG

We can write scalable vector graphics (SVG) using the svg tag. Learn the follwoing:

  1. height and width of the svg tag (defined it here as height="520" and width="100%" (of its parent i.e. the .row class);
  2. circle tag which takes in cx, cy and r all self explanitory;
  3. Same goes for the rect tag which takes in x, y, width, and height;
  4. the group element which applies a tranformation, fill, stroke, etc. to all its children element. These children elements can be any tag (circle, rectangle, or path);
  5. lastly the path where the d attribute is the most important. It can any polygon you desire. It requires a start point M x,y. Then a line to a desired point: L x2,y2. These L points can be grouped n times.

Using d3

We can see that the above can be replicated with d3.js.

Making a face with d3.js

Will demostrate how to make a face and will see it below. We can also do animation with d3. For a demo click the "Start Animation" button.

Explination to be done.

Making a Bar Chart

Got the data from here: UN Data

Drawing a Scatterplot

Here we will draw a scatterplot

Here is another scatter plot where both x and y are numeric.

Another scatter plot here with temperature.

Lineplots

Let us do line plots now

Here are some options you can play with:

Draw a function

Lets draw a function to see how it turns out.

Plot of cosine

Multiple lines

Multiple plots for a line

sine and sine plot on same line. Clicking will generate new colors.

Area Plot

Let us do area plot now

Change the size of the strok when show.

Area with Baseline

The baseline is an important property of an area plot. In the above lineplot example the temperature baseline was 14 but that is not a correct implementation of an area plot.

Below let us plot a proper area graph.

General Update Pattern: Enter, Update, Remove

This section will demonstrate how the enter, update, and remove work with a bowl of fruit example.

If the bowl is empty then add 5 apples. If you eat one remove it from the bowl.

Nested Elements with the General Update Pattern

You can add only one element (like the bowl) by using the 

          selection.selectAll('rect').data([null]).enter().append('rect')
.

Interaction with Unidirectional Dataflow

Who knew you could interaction with data. Here we will see that.

Making a Map with d3

Lets make a map.

Here are some references used here:

Loaded topo json format and d3 requires geo json format. Thus use topojson library for conversion. Got the topojson library from here: TopoJSON Library.

Use the topojson.feature(data) function for conversion.

If the path type is sphere then you will get the thick borders around the map. 

export const createMapBeg = () => { 
  const svg = d3.select("#id");
  // type of projection
  const projection = d3.geoMercator(); 
  // path generator ie the d=""
  const pathGenerator = d3.geoPath().projection(projection); 
  d3.json("https://unpkg.com/world-atlas@1.1.4/world/110m.json")
    .then(data => {
          const countries = topojson
                  .feature(data, data.objects.countries);
          const paths = svg.selectAll("path").data(countries.features); 
          paths.enter() .append("path") .attr("d", d => pathGenerator(d)); 
  }); 
};

Making some tweaks to the map

You will find the types of projections here: Projections, another link.

Here is a list of some projections

Need to figure out how to resize maps properly, and also how to rotate them.

Map Interaction

Who knew we could interact with maps. Try to hover over them countries in the following map.

Tree Visualization

We will create a tree. Uses the d3.hierarchy library. It is there by default.

You can also have vertical trees with the following code: 

const treeRoot = d3.hierarchy(data);
  const links = treeLayout(treeRoot).links();
  const linkPathGenerator = d3
    .linkVertical()
    .x(d => d.x)
    .y(d => d.y);
vertical tree code

You could use treeLayout = d3.cluster() if the leaft nodes are unlevel to have them appear on the same level.

Color and Size Legend

In this module we will make a legend component.

Lets also make a size scale next to the legend. Size scale is proportional to area and we are going to use circle to represent size. Therefore, r = sqrt(A/pi)

Map Legend

Lets add a legend to the maps.