Skip to content

Instantly share code, notes, and snippets.


Nick Strayer nstrayer

View GitHub Profile
nbremer /
Last active Jun 18, 2016
Color blending - Hexagon

This is the first example of my blog on Beautiful color blending effects with SVGs & D3

The hexagon introduction to the Color blending section of my OpenVis 2016 talk "SVGs beyond mere shapes". In this example the circles are given the mix-blend-mode of screen to get nice effects when the circles overlap each other.

Another color blending example can be found here

Built with

couchand /
Last active Sep 15, 2016 — forked from mbostock/.block
Adjustable ranges on color scale

An example illustrating a scale that allows the ranges to be adjusted by the user.

This example is based on this one.

This example demonstrates how to construct a key from a threshold scale, in the style of Ford Fessenden’s map of police stops involving force. A linear scale is used to set the x-position of each colored rectangle in the key. There is one rectangle per color in the threshold scale’s range, and one tick per value in the threshold scale’s domain. The linear scale’s domain sets the implied extent of the key, here spanning 0 to 100%.

nstrayer / .block
Last active Nov 7, 2016 — forked from StudioLE/.block
Hive Plot (Links)
View .block
license: gpl-3.0
nbremer / .block
Last active Dec 4, 2019
Brushable Horizontal Bar Chart - V
View .block
height: 540
ejb / .block
Last active Nov 15, 2020
Structuring D3 code with constructor functions
View .block
license: mit
noamross / google_wordcloud.R
Created Apr 22, 2015
Create a wordcloud of your google search history
View google_wordcloud.R
# Script to make a word cloud of your google searches. Get your google search
# history at This script assumes the JSON files
# exported are in a 'Searches' subfolder
tonyhschu / .block
Last active Dec 22, 2020
Small Scroll-linked Animation Demo
View .block
scrolling: yes
license: MIT
robert-moore /
Last active Jan 17, 2021
A New Pattern for Updatable D3.js Charts

Using a new updatable chart format. Update functions are made accessible to the caller, handing over chart controls with full functionality to the caller in a modular manner. Data binding is done with method chaining, like any other configuration variable, and can be changed after initialization. This allows for changes to be rendered in the context of chart history, leveraging D3's transitions and update logic.

gka / multi-crowbar.js
Last active Apr 29, 2021
like svg-crowbar, but for multiple svg elements!
View multi-crowbar.js
var multiCrowbar = (function() {
* SVG Export
* converts html labels to svg text nodes
* will produce incorrect results when used with multi-line html texts
* Author: Gregor Aisch
* based on