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 blockbuilder.org
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%.
| license: gpl-3.0 |
| license: mit |
| # Script to make a word cloud of your google searches. Get your google search | |
| # history at http://history.google.com. This script assumes the JSON files | |
| # exported are in a 'Searches' subfolder | |
| library(jsonlite) | |
| library(rlist) | |
| library(magrittr) | |
| library(stringi) | |
| library(wordcloud) | |
| library(tm) |
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.
| 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 https://github.com/NYTimes/svg-crowbar/blob/gh-pages/svg-crowbar-2.js | |
| */ |
| # Dummy object, only required for name resolution. | |
| set = structure(list(), class = 'set') | |
| print.set = function (x, ...) invisible(x) | |
| `[.set` = function (set, expr, filter) { | |
| expr = substitute(expr) | |
| filter = substitute(filter) | |
| stopifnot(identical(expr[[1]], quote(`<-`))) | |
| stopifnot(identical(expr[[2]][[1]], quote(`|`))) |
| height: 540 |
Early/simplifed version of You Draw It: What Got Better or Worse During Obama’s Presidency
d3.drag is pretty great!
