boeric

D3 Based Real Time Chart with Multiple Streams

The real time chart is a resuable Javascript component that accepts real time data. The purpose is to show the arrival time of real time events (or lack thereof), piped to the browser (for example via Websockets). Various attributes of each event can be articulated using size, color and opacity of the object generated for the event.

The component allows multiple asynchronous data streams to be viewed, each in a horizontal band across the SVG. New data streams can be added dynamically (as they are discovered by the caller over time), simply by calling the yDomain method with the new array of data series names. The chart will automatically fit the new data series into the available space in the SVG.

The chart's time domain is moving with the passage of time. That means that any data placed in the chart eventually will age out and leave the chart. Currently, the chart history is capped at five minutes (but can be changed by modifying the comp

boeric

Embedded Canvas in SVG

The visualization demonstrates the use of an embedded Canvas in an SVG element, and how to generate a correlated array of numbers.

An embedded canvas may make sense when a large number of data points needs to be generated (for example in a scatter plot), that otherwise would overwhelm the DOM.

The Gist uses the array-correl npm module for generating correlated pairs of numbers (using its generate method), and for inspecting the generated array (using its inspect method) to obtain the actual pearson correlation coefficient of the array. At small sample sizes, the actual pearson correlation will differ from the desired correlation, but at large sample sizes it aligns very closely to the desired correlation.

The output of the generate method is an array of correlated pairs of numbers. Each of these array elements are rendered as a dot in the visualization, using the pair's first and second indexes as x and y coordinates.

boeric

How to Manage D3 Blocks with Git

There are several ways to create and manage D3 Blocks at bl.ocks.org. The easiest is probably to use Blockbuilder. One can also copy/paste code directly into the Gist ui at gist.github.com.

However, if you want to use git from from the command line to manage your Blocks (just like you manage your regular Github repos), follow these steps:

Initialize the Repo

1. Before beginning, make sure that you have setup ssh keys in your Github account, as https no longer works for accessing the Gist repo from the command line or SourceTree etc. Please see here for instructions
2. Choose "New gist" in menu in the upper right corner on your home page in Github

boeric

D3 Selection and Key Function Demo

Demonstrates the D3 enter, update, and exit selections, and the use of a key function when mutating and binding data. An array of 20 items is repeatedly mutated as the user is clicking the buttons. For each step, the visualization shows the content of the three selections after data binding.

The effect of turning off the key function is clearly visible.

Also demonstrates simple use of D3 transitions and javascript generators

boeric

Mapbox GL Synced Dual Maps

The visualization demonstrates how to syncronize the state of two side-by-side Mapbox GL based maps. As the user interacts with one of the two maps, the state of the map (center position, zoom level, pitch and bearing) is dynamically copied to the second map (and vice versa). The code also demonstrates how to prevent call stack overflow due to recursive event handler triggering when the map state is updated.

The dataset is based on driver license suspensions from California DMV and East Bay Community Law Center. See prior visualization here

See the script in action at bl.ocks.org/boeric here, and fullscreen here

boeric

Array Shuffling

The gist demos scrambling (shuffling, un-sorting) of an arbitrary javascript array. The gist uses the NPM module array-unsort. The Git repo of the module is here.

The array-unsort has two modes of operation. The first is the Fisher-Yates shuffle wiki, which scrambles an array randomly. The second is a modified Fisher-Yates shuffle that ensures that no element remains at the same array position after the shuffle operation.

The visualization shows the distribution of input and output array indexes after iterating 10k (default) times, using an array size of 8 (default). The modified Fisher-Yates method is chosen by default. Please note that a given no array element will be present at its original array index after shuffling. Change the any of the controls and hit the Go button to redo the iteration.

Various stats on the distribution

boeric

Mass Shootings

The visualization is using data from www.shootingtracker.com and covers the period January 2013 through early December 2015. The event data (comprised of over 1000 shooting events) has been grouped into weeks.

Please see README.md for more information

boeric

CSS Box Model and Flexbox Demo

The Gist demos the following:

1. The effects of margin, border, padding and inner content dimensions of the overall size of DOM elements (here, span elements)
2. That outline has no effect on the element size and layout
3. The horizontal or vertical layout of elements
4. The optional use of Flexbox in laying out elements
5. The use of various justify-content settings when using Flexbox
6. The effect of setting dimensions on the item container div

boeric

Github API Demo

The Gist demos how to access the Github API to obtain metadata about a users public Repos and Gists.

In addition, it demos how to do this using only native DOM methods (as no external libraries are used). It does however use Bootstrap for some styling.

The Gist demos async-await when using fetch.

The Gist also demos how to combine the response header information with the response data payload in the fetch promise chain. The Github API implements rate control, where only certain number of API requests can be made within a certain timeframe (currently max 60 requests per hour). The parameters affecting the rate limit are provided in the response headers. To show the current rate limits, the header information needs to be available to the code that updates the UI, therefore the need to pass the headers down the fetch promise chain. At the end of the fetch call, both the parsed data and headers are provided to the caller.

boeric

Drag and Drop

Demo of drag and drop using only native DOM methods.

Usage: Grab one of the randomly generated elements and drag it around the four droppable zones. When when the drag is complete, the item will be appended to the "destination" zone.

The demo shows simple uses of:

• Drag and Drop API (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
• Generators (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)