Skip to content

Instantly share code, notes, and snippets.

View boeric's full-sized avatar

Bo Ericsson boeric

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

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 19:26
CSS Combinator Demo

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 19:39
Github API Demo

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 December 29, 2022 16:16
Manage D3 Blocks with Git

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

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 December 29, 2022 16:16
D3 Selections and Key Function Demo

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 October 22, 2023 12:23
Embedded Canvas in SVG

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 March 12, 2021 19:49
Mapbox GL Synced Dual Maps

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 01:49
Adding Day Filter to Crossfilter Example

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