Click a state to zoom and display counties. An extension of this block by Mike Bostock.
The color darker the greater the location quotient for employment in some industry (I forget what industry). The purpose of the example is to test out zoom functionality not to show data. That being said, the data is from the Bureau of Labor Statistics' QCEW survey.
Mouse up and down to change the hue. Left and right to change the saturation and lightness.
Drawing an arrowhead on a line in canvas. Move mouse to move line. Similar to a marker tag in SVG.
Move mouse to change orientation and size of the arc-like shapes.
Sort of a cross between a vector field and candy buttons.
Click-hold to select geographic units whose centroids are within the circular area surrounding the cursor.
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.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <style> | |
| body { | |
| background-color: black; | |
| } | |
| </style> |
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}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
| 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}); |