Day 147 of 180 Days of Data Viz Learning #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Code Learning:

 Eljiah Meeks D3.js in Action

Three Takeaways from chapters
Chapter 1 Intro (Continued)
  • SVG provides a set of common shapes that have attributes that determine size and position p 21
    • <rect> x and y (position from shape’s top-left corner and height and width
    • <circle> cx and cy for center and r for radius
    • <line> has x1 and y1 for the start of the line and x2 and y2 for endpoint
    • There are also more complex shapes like <ellipse> and <polygon>- with a points attribute that holds a set of comma-separate xy coordinates in clockwise order that determines area bounded by polygon
  • <g> element is a logical grouping of elements -> used when creating graphic objects that are made of several shapes and text -> eg circle with label above it and being able to move circle and label at same time  p 23
  • “Moving a <g> element around your canvas requires you adjust the transform attribute of the <g> element” -> this includes using the translate() that accepts a pair of coordinates for (x,y) position p23
Chapter 6 Network Data (continued)
  • In the case of directed networks, the source and target columns indicate the direction of connection between the nodes.  A directed network means that nodes be connected in one direction by not other” p 117, eg following a Twitter user who does not follow you
  • Options to show network data include adjacency matrix, arc diagram, and force directed layouts p 185
  • d3.scale.ordinal() takes an array of distinct values and allows us to place them on an axis like we do with names for our nodes
    • rangePoints creates a set of bins for each of or values for display on axis or otherwise.  It does this b associating each of those unique values with a numerical position within the range given.  Each point can also have an offset declared in the second, optional variable” p 181
    • var nameScale = d3.scale.ordinal().domain(nodes.map(function (el) { return el.id})).rangePoints([0, scaleSize], 1);
 Jan 1/25 D3.js NY Meet-up

Matt Strom – Using Sparkline graphics at typographic resolution eg emoji->Twitter analytics
  • FF Chartwell Font that renders glyph charts
  • Integrating sparklines into text can bring numbers to context and visual
  • C3 for styling
Paul Levande
  • Text next graph as caption/legend
  • The classic incarnation rate chart doesn’t lend to questions of prison rates, more people being incarnated, or same ppl, etc
  • A simple trend line doesn’t show that population as one that is in flux – it’s a revolving door not a constant rate of ppl -> remember charts can be victims of their own success because they can oversimplify a complex story
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s