Skip to content

Instantly share code, notes, and snippets.

View StewartNoyce's full-sized avatar

Stewart Noyce StewartNoyce

View GitHub Profile
@StewartNoyce
StewartNoyce / Readme.md
Last active August 29, 2015 14:02
D3.introspect()

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.

@StewartNoyce
StewartNoyce / Readme.md
Last active November 2, 2023 21:40
Network Diagram Editor

A small group met in the second period of the D3.unconf to discus Sankey/Alluvial Charts and Circuit Diagrams. They identified a shared interest in the editing and semi-automated layout of network diagrams, with arbitrarily complex nodes that could be arranged along edges with potentially cyclical paths. This gist captures features and requirements as discussed.

Later in the day, a few of us heard a session led by Anders Riutta on pathvisiojs, a JavaScript-based diagram viewer and editor for the WikiPathways project. It became clear that he might have already finished some of the features or have them under development. Anders will respond to the needs represented here, and projects can spin off as necessary to satisfy each person's goals.

This is a gist that captures a moment in time. It is not intended to be a formal requirements document for an ongoing project. If you we

@StewartNoyce
StewartNoyce / Readme.md
Last active August 29, 2015 13:57
Plumbing Primer

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
StewartNoyce / Readme.md
Last active August 29, 2015 13:57
Pulse Primer

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
StewartNoyce / Readme.md
Last active August 29, 2015 13:57
Ancient Histogram

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
StewartNoyce / Readme.md
Last active August 29, 2015 13:57
Legendary Key

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
StewartNoyce / Readme.md
Last active August 29, 2015 13:57
Open Chord Diagram

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
StewartNoyce / Readme.md
Last active August 29, 2015 13:57
Box Transition Revisited

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
StewartNoyce / Readme.md
Last active August 29, 2015 13:57
Box Transition Lesson

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
StewartNoyce / README.md
Last active August 29, 2015 13:57
D.C. Choropleth

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().