Advanced Graph Types in D3

Objectives

  • Explain what GeoJSON is

  • Draw path elements with GeoJSON and D3

  • Compare and contrast GeoJSON and TopoJSON

  • Convert between TopoJSON and path elements

  • Build map visualizations with D3

  • Draw nodes in a force-directed graph

  • Draw links in a force-directed graph

  • Describe what a force simulation is, and how it works

  • Explore different forces you can simulate with D3

  • Build a force-directed graph with D3

An Introduction to GeoJSON

GeoJSON

  • A standard for encoding geographic information
  • Uses JSON
  • Geographic data stored in a features property

Code Example

Code: http://bit.ly/2vHFCbw

GeoJSON + D3

d3.geoPath()

  • Returns a function
  • Returned function converts GeoJSON data into path commands
  • Structurally similar to other D3 helpers, like d3.pie, d3.histogram, and d3.arc

An Introduction to TopoJSON

TopoJSON

  • An extension of GeoJSON
  • Removes duplication in data
  • Uses arcs, not coordinates

Code Example

Code: http://bit.ly/2xPxVRj

Live Site: http://bit.ly/2elIvrr

Using TopoJSON

TopoJSON

GeoJSON

path commands

D3

topojson

Using TopoJSON

topojson.feature(object, locationOfFeatures)

TopoJSON object

Location of features to convert within object

Building a Map Visualization

Code Example

Code: http://bit.ly/2vCILNT

Projections

path.projection([projection])

function that transforms spherical geometry data to 2D plane

Projection Methods

  • projection.scale([scale]) - scale a projection
  • projection.translate([x, y]) - translate a projection

Nodes in Force-Directed Graphs

Force-Directed Graph

N1
N2
N3

Code Example

Code: http://bit.ly/2vWKsRx

Force Simulation

d3.forceSimulation([nodes])

starts a simulation acting on nodes

Force Simulation

simulation.nodes([newNodes])

updates a simulation to act on newNodes

Center Force

d3.forceCenter([x, y])

force location (i.e. coordinates of where you'd like the force to pull nodes)

Adding a Force

simulation.force(name[, force])

name of the force

description of the force (i.e. a function)

Force Events

simulation.on(type[, listener])

  • tick - fires after every tick of the simulation's timer
  • end - fires when the simulation's timer stops

Many Body Force

d3.forceManyBody()

adds forces between all nodes in the simulation

by default, the forces are reuplsive

Force Strength

force.strength([newStrength])

accepts a value or callback to set a new strength

negative values are repulsive

positive values are attractive

default 'many body' strength is -30

Links in Force-Directed Graphs

Code Example

Code: http://bit.ly/2xIeD0Y

Live Site: http://bit.ly/2evZ0l7

Link Force

d3.forceLink([links])

add link forces based on the links passed in

update the links later using the .links method on the force

Link Force

N1
N2
var nodes = [
  n1,
  n2
]
var link = [{
  source: 0,
  target: 1
}]

???

Link Force

link.id([id])

Specify how D3 should find nodes based on source and target

Link Force Distance

N1
N2

link.distance([newDistance])

Ideal distance between nodes

Link Force Strength

N1
N2

link.strength([newStrength])

Strength is proportional to this distance

N1

Dragging Nodes and Alpha Values

Draggable Nodes

Steps

  • Implement a drag feature on nodes
  • During drag, ignore forces from the simulation

Code Example

Code: http://bit.ly/2x3wJO1

Live Site: http://bit.ly/2eTnJAh

Dragging with D3

d3.drag()

  • Built-in dragging support for D3 selections
  • Add to a selection by passing it into .call
  • Exposes three events: start, drag, end

Fixing a Node's Position

  • fx - fix a node's x position
  • fy - fix a node's y position
  • with these properties set, a node will stay put
  • to remove fixed position, set fx & fy to null

Simulation Cooling

  • Forces are not applied continuously
  • Forces are based on an alpha value
  • Alpha decays after every tick
  • After reaching a minimum alpha, the simulation stops

Manipulating Alpha

  • simulation.alpha([newAlpha]) - get or a set a new alpha
  • simulation.alphaMin([newMin]) - get or set a new min
  • simulation.alphaDecay([newDecay]) - get or set a new decay
  • simulation.alphaTarget([newTgt]) - get or set a new target

Force-Directed Graphs and the
General Update Pattern

Code Example

Code: http://bit.ly/2vXMrVD

Project:

D3 Data Dashboard

Project Guidelines

  1. Build at least two visualizations.
  2. Build at least one advanced graph type.
  3. Add dynamic behavior based on user interaction.
  4. Include tooltips!

YOUR

TURN

Advanced Graph Types in D3

By Elie Schoppik

Advanced Graph Types in D3

Maps and Force-Directed Graphs

  • 2,156

More from Elie Schoppik