armollica

Mouse up and down to change the hue. Left and right to change the saturation and lightness.

armollica

Move mouse to change orientation and size of the arc-like shapes.

Sort of a cross between a vector field and candy buttons.

armollica

Click-hold to select geographic units whose centroids are within the circular area surrounding the cursor.

armollica

Tessellating equilateral triangles. Move mouse to adjust the size of the triangles. Click to invert the sizing.

Could be extended for two-dimensional binning, useful when there are a lot of data points. Other shapes that tesselate well are squares and hexagons.

armollica

Creating simple shape objects.

This can simplify drawing to canvas:

ellipse.context(canvas).stroke();

It also lets you encapsulates geometry-related helper functions. For example, the parametric function of an ellipse mapping to Cartesian coordinates:

var point = ellipse.cartesian(theta); // point = {x, y}

armollica

Testing out selecting neighboring geographic units. Uses TopoJSON's topojson.neighbors(objects) function.

Hover to highlight a county and it's neighboring counties. This lets you see how a county compares to its immediate neighbors for a given variable, here the 2014 unemployment rate.

Data sources: Unemployment data from U.S. Bureau of Labor Statistics. Shapefile from U.S. Census Bureau, cleaned up with QGIS, simplified with mapshaper.org. Color palette from ColorBrewer

armollica

Drawing an arrowhead on a line in canvas. Move mouse to move line. Similar to a marker tag in SVG.

armollica

var draw = {};

draw.own = function(selection, data, scale) {

  var axis = selection.append("g").attr("class", "y axis")
    .call(d3.svg.axis().scale(scale.y).orient("left"));

  axis.selectAll("text")
    .text(function(d) { return d == 1 ? "Week 1" : d});

armollica

Display labels for points close to the mouse cursor. Could be used to display multiple tooltips, etc.

Uses k-nearest-neighbors algorithm from this block by llb4ll. Check the box to see the underlying quadtree (red points are the nearest points, orange are those that were searched but found to be not among the nearest).

armollica

Scatterplot using axes that I saw in one of Edward Tufte's books. I can't remember which (maybe this one).

The axes are pretty pared down but provide basic distributional information of the data. The 1st and 4th quartiles are indicated by the outer lines and the 2nd and 3rd by the inner lines. The gap is the median.

Hovering allows you to see the actual value of a given point. Uses an invisible Voronoi tessellation to make point selection nicer (inspired by this block).