petrosh

/*******************
 * intoTheWoods.js *
 *******************
 *
 * Ah, you're out of the woods now. Or into the woods, as the
 * case may be.
 *
 * So take a deep breath, relax, and remember what you're here
 * for in the first place.
 *

petrosh

Are they tabs? Are they spaces? How many? Never wonder again!

Copy-paste the file below into the console to see the whitespace like this:

Also available as a bookmarklet:

petrosh

license: mit

petrosh

Faux-3d SVG globe using d3.geo.orthographic and a few radial gradients. Labels offset or hidden based on radians from current map center to enhance the effect.

Uncomment svg.append("g").attr("class","countries") for hover-able country outlines.

petrosh

This example demonstrates accelerated two-dimensional filtering enabled by d3-quadtree. A quadtree recursively subdivides square cells into four equal-sized subcells. Each leaf node of the quadtree contains a single point. If a given quadtree cell does not intersect the brush extent, then none of the points contained in that subtree can be selected, and thus do not need to be scanned. Above, orange indicates points that are scanned but not selected. Without a quadtree, all points would need to be scanned!

petrosh

#Colour Density Hexbin Dots are placed randomly, then they are grouped by the raster. The tile colour is determined by the dot density. Raster is a hexbin.

Based off this: Hexagonal Binning

petrosh

Simple Drawing Example

Click and drag your mouse (or finger on touch device) to draw a line. A new path is created for each touch or click.

Paths are stored in a nested array; you can inspect the variable in console: session (assuming the example is in it's own window).

petrosh

license: gpl-3.0
height: 960

petrosh

I think it may be more legible for information visualization to utilize a rougher specification for color and other element aspects. In this implementation, perturbations of color and line thickness provide a less uniform set of squares, but they are still nearly the same color. Perturbations of color, size, and line can all provide not only a nuanced aesthetic, but perhaps also convey a certain uncertainty in the data visualization. Using rgb specification, you imply a sort of precision similar to decimal precision in spatial coordinates, and by wiring your visualization to produce a slightly rougher color spectrum on output, you might correct for that. While line jitter has been a feature of drawing packages for some time, I haven't seen procedural application of this kind of perturbation to traditional data visualization.

I'm going to add some perturbation of paths following the same concept. I'll also put a few buttons in for user interaction.

petrosh

{
  "vars": {
    "@gray-base": "#000",
    "@gray-darker": "lighten(@gray-base, 13.5%)",
    "@gray-dark": "lighten(@gray-base, 20%)",
    "@gray": "lighten(@gray-base, 33.5%)",
    "@gray-light": "lighten(@gray-base, 46.7%)",
    "@gray-lighter": "lighten(@gray-base, 93.5%)",
    "@brand-primary": "darken(#428bca, 6.5%)",
    "@brand-success": "#5cb85c",