Skip to content

Instantly share code, notes, and snippets.

Avatar

Bo Ericsson boeric

View GitHub Profile
@boeric
boeric / README.md
Last active May 31, 2020
Array Shuffling
View README.md

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
boeric / README.md
Last active May 23, 2020
CSS Combinator Demo
View README.md

CSS Selector Combinator Demo

The Gist is a demo of of CSS selector combinators. See MDN for documentation: CSS Selectors

Usage:

  • Click on an element inside the content-container. The clicked element becomes the root of the selection, and its background color becomes gray.
  • Then choose one of the CSS combinators at the left. The default combinator is the Descendant combinator (A B).
  • Explore what's selected given your choice of combinator and clicked element
  • A red border indicates the element(s) selected
@boeric
boeric / README.md
Last active May 23, 2020
Github API Demo
View README.md

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
boeric / README.md
Last active May 23, 2020
Manage D3 Blocks with Git
View README.md

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
boeric / README.md
Last active May 23, 2020
Drag and Drop Using Native DOM Methods
View README.md
@boeric
boeric / README.md
Last active May 23, 2020
CSS Box Model and Flexbox Using D3
View README.md

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
boeric / README.md
Last active May 16, 2020
D3 Selections and Key Function Demo
View README.md

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
boeric / README.md
Last active Sep 2, 2020
Embedded Canvas in SVG
View README.md

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
boeric / README.md
Last active Mar 12, 2021
Mapbox GL Synced Dual Maps
View README.md

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
boeric / README.md
Last active May 16, 2020
Adding Day Filter to Crossfilter Example
View README.md

Adding Day Filter to Crossfilter

This visualization is a slightly expanded version of the excellent original Crossfilter demo here

The visualization adds four items to the original example:

  1. Ability to filter on days (for example "Mon, Thu, Fri") or day types (for example "Weekend"), in addition to the existing dimensions/filters
  2. A dataset View, that allows all of the 230K records to be viewed in an interactive canvas element below the visualization
  3. A timer function/object that can be used to determine the performance of various aspects of the the crossfilter operation
  4. Expanded and more detailed comments, perhaps helpful when trying to understand the original example