StewartNoyce

This infographic was prepared for the d3.selectAll('­meetup').data(­[2014]).enter() meet of the Bay Area d3 User Group, held Jan. 28, 2014. It uses Mike Bostock's Circle Packing enclosure diagram to show the long-tail distribution of authors and titles in the D3 ecosystem. Source data originates from the D3 Gallery spreadsheet.

During data cleanup, aggregated domain values were assigned to each record in the data from the url. The bl.ocks.org domain represents 880 titles, and github holds 169. However, there are 24 domains with more than 5 titles and another 522 with fewer than 5. While bl.ocks and github are the foundation for the developer community, the other domains hold finished titles that make points and change opinions. Presentation of author titles by domain allows us to see this dynamic at a glance.

Each containing circle (yellow) represents a web domain where authors display their finished D3 visualizat

StewartNoyce

This gist shows a map of Washington, D.C. divided into census tracts. Each tract is shaded according to the owner occupancy % for all households. Points of interest are indicated as red dots. A key in the lower left shows the quantize thresholds associated with each shade.

Shapefiles came from census.gov TIGER files. Owner occupancy data came from the 2012 5-year American Community Survey of the US Census. Points come from Ben Balter's map of D.C. bars (shots are likely to have been taken at these locations).

Map projection scale created dynamically by code from Bostock's New Jersey State Plane block.

Shading key element is Bostock's Threshold Key block, adapted for d3.quantize().

StewartNoyce

This example shows the use of the d3 transition library, particularly with regards to timing. Four boxes are displayed, each containing a circle of a different color. One of them is open and the others are closed. Click on a box to open it.

Three separate transitions are initiated on three different element selections. Yet, the box outline and circle opacity transitions start after the box position transitions.

StewartNoyce

This example revisits the box transition lesson, which was an initial attempt to build a box layout function for D3. That lesson exposed my emerging understanding of transition behavior. Clearly, the result was awkward. Box outlines would move before they morphed. It had to finish one task before it could start another.

For a seamless transition, this version eliminates the transform translate transition on the starting point of each box in the box layout transition code. Now, each box outline has a path that originates from the starting point and expresses either an open box (square) or a closed box (rectangle). This method makes a smooth box transition with nothing that sticks out.

This change exposed another issue where the click handler on the box would sometimes fire for an adjacent box, but not always. This issue was fixed by adding the box contents only to the open box. Now the update code removes the contents of the previously open box and adds t

StewartNoyce

This example uses the D3 chord layout function to show the commute patterns of people who belong to an affinity group. It gives some insight as to the availability of group members for afterwork events.

The chord layout implements the concept of circular visualization introduced in Circos. This particular example is "open" in that the matrix used to compute the chords has a set of null rows. Affinity group members were commuting to locations both inside and outside of their home region.

Notable features include: responsive image resizing, chord layout rotation, and a generalized chord visualization function with configuration object.

StewartNoyce

This example shows the use of a legend to display a quantized threshold key. Inspiration comes from the need to describe the colors of a Choropleth in limited horizontal space. The legend box allows stacking of blocks to represent the hues. With limited space comes the possible need to split the title into two (or more) lines.

In D.C. Choropleth, I used a variation on Bostock's Threshold Key to show quantized colors. That particular diagram had quite a bit of empty space when displayed in a 960px wide block. With this "legendary" key, it can be shown in a block half as wide.

StewartNoyce

This example displays a histogram from data generated with the Numpy library in Python. Typical code sample:

>>> import numpy as np
>>> count, division = np.histogram(d.price)

One might use a script to generate a number of histograms from a rather involved dataset, and view them later with D3.

Original code from Bostock's Histogram was modified to 1) read from a JSON file, 2) prepare the displayed data structure, and 3) add a title.

StewartNoyce

This primer suggests the value of sending a shiny object through a pipe in plain view. This is a straight line, but it would be nice to see the circle flow through an alluvial pipe.

April 23, 2014 - See Point-Along-Path Interpolation for a code example that shows a ball following a closed spline.

StewartNoyce

This primer hints at the concept of a plumbing diagram that can show the circular flow of money in the economy. Can it be implemented with a sankey diagram cfergus #9321009, or will it need some new thinking?

StewartNoyce

This gist contains survey results and meetup message content supporting the d3.introspect() meetup held June 6, 2014 at Pubnub in San Francisco. The data was collected to answer three questions about the D3 community: who are we, where do we matter, and what can we accomplish. Each data set was converted to JSON and organized as records with fields of who, where and why respectively.

With that in mind, the survey asked the following questions.

1. What type of work do you do, and skills do you bring to your job?
2. Why do you use the D3 library?
3. What is the most awesome thing you can imagine happening because D3 exists?

The meetup content was cut and paste from the messages written by the d3.introspect() meetup attendees, binning phrases as if they were answers to the survey questions.