D3.js

From Training Material
Jump to navigation Jump to search


title
D3.js for Data Visualization
author
Lukasz Sokolowski (NobleProg Ltd)

D3.js for Data Visualization Training Materials

Introduction ⌘

  • D3 allows to bind arbitrary data to a Document Object Model (DOM)
  • Apply data-driven transformations to the document
  • We can use D3 to generate
    • an HTML table from an array of numbers
    • an interactive SVG bar chart with smooth transitions and interaction
    • and much more
  • Doesn't provide every conceivable feature
  • Provides efficient manipulation of documents based on data
    • extraordinary flexibility, exposing the full capabilities of web standards - HTML, SVG, and CSS
    • minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation
  • Has functional style
    • allows code reuse through an official and community-developed modules

Overview of the data visualization process ⌘

Ben Fry's definition

"The process of understanding data begins with a set of numbers and a question.
The following steps form a path to the answer:
Acquire, Parse, Filter, Mine, Represent, Refine, Interact."


Acquire Obtain the data, whether from a file on a disk or a source over a network.

Parse Provide some structure for the data's meaning, and order it into categories.

Filter Remove all but the data of interest.

Mine Apply methods from statistics or data mining as a way to discern patterns or place the data in mathematical context.

Represent Choose a basic visual model, such as a bar graph, list, or tree.

Refine Improve the basic representation to make it clearer and more visually engaging.

Interact Add methods for manipulating the data or controlling what features are visible.

Another point of view

Tdvp1.png

Data visualization components: HTML, CSS, Javascript, DOM, D3, SVG ⌘

D3 ⌘

Exercise ⌘

Play with example from ch1

DOM ⌘

The Document Object Model (DOM)

  • a language-agnostic model for representing structured documents
  • built in HTML, XML, or similar standards
  • tree of nodes that closely resembles the document parsed by the browser

Exercise ⌘

Fix the table factory in ch2

SVG ⌘

Scalable Vector Graphics (SVG)

  • a vector graphics format that describes images with XML
  • Vector images can be rendered in any size without becoming fuzzy
    • can render the same image on a large retina display or a small mobile phone, and it will look great in both cases
  • SVG images are made up of shapes we can create from scratch using paths
  • or put together from basic shapes (for example, lines and circles) defined in the standard
  • The format itself represents shapes with XML elements and attributes

SVG con't ⌘

  • SVG code is just a bunch of text
    • we can edit manually
    • inspect with our browser's normal debugging tools
    • and compress with standard text compression algorithms
  • SVG is one of the most powerful tools in the web data visualization arsenal
    • browsers can consider SVG to be a normal part of the document
    • we can use CSS for styling, listen for mouse events on specific shapes, and even move things around using animation
    • We can use D3 to create an image in our browser
      • then copy and paste the resulting XML to a .svg file, and open it with any SVG viewer, such as Preview or Adobe Illustrator

Transformations ⌘

  • manipulations of whole SVG shapes
  • affine transformations of coordinate systems used by shapes in our drawing
  • can be defined as matrix multiplications, making them very efficient to compute
  • SVG comes with a set of predefined transformations
    • translate(), scale(), rotate(), skewX(), skewY()

Exercise ⌘

Play with transformations on shapes, ch2

CSS ⌘

  • D3 selections are a subset of CSS selectors
    • any selection we can make with d3.selectAll , can be specified using CSS
  • Invoking CSS with D3
    • class attribute with the .attr() method, might be frail
    • the .classed() method, the preferred way to define classes
    • directly with the .style() method

D3 methods: scaling, events, transitions, and animations ⌘

Scaling ⌘

  • We use scales to avoid math
    • code is shorter, easier to understand, and more robust
  • d3.scale will always be more elegant and flexible, than other ways of mapping domains and ranges
  • A function's domains are those values that are defined (the input)
    • and the range are those values it returns
const scale = d3.scaleOrdinal()
  .domain(['training', 'consultancy', 'bootcamp', 'course'])
  .range(['remote', 'onsite', 'video', 'self']);

Scaling con't ⌘

Scales Types (d3-scale package)

  • Ordinal scales - have a discrete domain
  • Quantitative scales - have a continuous domain
  • Time scales - have a time-based continuous domain

Ordinal Scales ⌘

  • The simplest type
    • just a dictionary, where keys are the domain and values are the range
  • If we don't define a domain, it's inferred from use
    • can give unpredictable results
  • Having a range smaller than the domain makes the scale repeat values once used

Exercise ⌘

Play with 'scalesDemo -> ordinalScales' from ch4

Quantitative Scales ⌘

  • The input domain is continuous
  • Instead of a set of discrete values can be modeled with a simple function
  • Seven types - linear, identity, power, log, quantize, quantile, threshold
    • define different transformations of the input domain
    • linear, identity, power, log - have a continuous output range
    • quantize, quantile, threshold - map to a discrete range

Exercise ⌘

Play with 'scalesDemo -> quantitativeScales' from ch4

Time Scales ⌘

  • d3-time-format package
    • d3.timeParse(), d3.timeFormat(), d3.isoFormat
    • d3.timeInterval (Interval = Second, Minute, Hour, etc)
    • d3.timeInterval(Date), interval.offset(Date, step), interval.range(Date_start, Date_stop)

Animation ⌘

  • The ability to creatively display data
  • Animation (and interaction) allow to display data, but also explain it
  • UX determines the interface design
    • Exploratory graphic
      • user has access to all of the data
      • has the ability to change how it's displayed (sorting, filtering, etc)
    • Explanatory graphic
      • minimal interactivity guides the user through the relevant data
    • In reality we mix both the above approaches

Animation Con't ⌘

  • Interpolators - calculate values between the initial and final states of a transition
    • d3.interpolate(a, b) maps the [0,1] domain to a target range (color, number, string)
    • interpolation function is chosen depending on the type of b
  • Easing - tweaks the behavior of interpolators by controlling the time ( t ) argument
    • makes our animations feel more natural, adds some bounce elasticity, etc
    • used to avoid linear animation, can have modifiers (in - normal, out - reversed; inOut, outIn - copy and mirror with 0.5)
    • easePoly()', 'easeQuad','easeCubic', 'easeSin', 'easeCircle', 'easeElastic()', 'easeBack()', 'easeBounce, etc
  • Timers - used to schedule transitions
    • d3.timer() takes a function, a delay, and a starting mark

Exercise ⌘

From ch5

  1. Play with easingChart and spirograph
  2. Enable basechart


Using CSS3, HTML, and/or SVG to showcase data ⌘

To draw with D3

  • we can add shapes manually by defining the appropriate SVG elements
  • or we can use helper functions that help you create advanced shapes easily

Manually adding elements and shapes ⌘

  • An SVG image is a collection of elements rendered as shapes
    • comes with a set of seven basic elements
    • almost all of these are just an easier way to define a path

Straight lines (a path with two points)

Rectangles (a path with four points and right angles)

Circles (a round path)

Ellipses (an oblong path)

Polylines (a path comprising straight lines)

Polygons (a path comprising straight lines that closes in on itself)

Text (the only one that isn't a path)

Exercise ⌘

Primitive shapes examples, ch3

Making data interactive with D3.js data-driven transformations and transitions ⌘

  • Preparing explanatory graphic that uses interaction to walk the viewer through some data
  • What is the data's story and what is the best way to tell it?
  • We have to plan
    • exactly what we want the visualization to do
    • how we want our viewers to interact with it
    • what we want to say about the data

Interaction "rules" ⌘

Do we need interaction at all?

  • If we make the reader click or do anything other than scroll, something spectacular has to happen
  • If we make a tooltip(or rollover), assume that no one will ever see it
    • If content is important for readers to see, do not hide it
  • Getting it to work on all platforms is expensive

Interaction Con't ⌘

  • Basic
    • Attach an event listener to an element and do something when it's triggered
    • We add and remove listeners to and from selections with
      • the .on() method
      • an event type (click, hover, etc)
      • listener function that is executed when the event is triggered
    • Capture flag
      • can ensure that our listener is called first
      • all the other listeners wait for our listener to finish
      • events bubbling up from children elements will not trigger our listener
  • Behaviors - drag, brush, zoom, etc

Exercise ⌘

From ch5

  1. Button example
  2. Draggable example
  3. Brash and zoom examples

Working with layouts ⌘

  • D3 layouts are modules that transform data into drawing rules
  • The simplest layout might only transform an array of objects into coordinates (scale)
  • For more complex visualizations, such as drawing a force-directed graph or a tree
    • layouts help us to separate calculating coordinates from putting pixels on the screen
    • makes our code cleaner
    • lets us reuse the same layouts for different visualizations

Layouts Con't ⌘

  • Built-in layouts
    • Flat - Histogram, Pie, Stack, Chord, Force
    • Hierarchical - Tree, Cluster, Tree map, Partition, Pack

Exercise ⌘

  1. Hierarchical examples in ch6
  2. Flat examples in ch7

Exporting SVG ⌘

There are many ways to do it

Closing remarks ⌘

  • Good vata visualizations design
    • Choosing the right dimensions and the right chart
    • Sense of purpose - honesty, clarity
    • Do the users understand scale?
    • Effective use of color
    • Our audience, do we understand them?
      • Mobile and desktop designing - see the next slide

Designing, mobile vs desktop ⌘

  • Columns - desktops, rows - mobiles
  • Be frugal with animations on mobiles
  • Similar UI elements react differently between platforms
  • Avoiding "meat navigation"
  • Be prudent about the scroll
Retrieved from ‘https://training-course-material.com/index.php?title=D3.js&oldid=69244’