D3 Flashcards
GeoJSON format
A standard way of representing geographic features in JavaScript.
TopoJSON
Extension of GeoJSON that encodes topology. Geometries are stitched together in shared line segments: i.e. a shared boundary between California and Nevada is represented once.
Topology
The way in which constituent parts are interrelated or arranged.
Constituent
Being part of the whole
d3.geo.path()
Display geographic shapes. Returns an accessor function. Given a geometry (array of arcs) or feature object, it generates the path data string suitable for the “d” attribute of an SVG path element.
Projection (d3.geo.albersUsa())
Convert locations (latitude and longitude) to pixel coordinates. Provides the surface (a mapping of the 3d globe to a 2d surface) for geo paths to be drawn.
Bind data to map with .datum or .data
.datum will render all the features objects as one node, .data will create it’s own node for each feature. The former is faster, the latter gives you fine-grain control over each feature
topojson.feature(topology, object)
Returns the GeoJSON Feature or FeatureCollection for the specified object in the given topology.
{
type: featureCollection,
features: [array of features]
}
You access features through .features property on return object. topology is a topojson object and object is the particular object (in objects property) that you want to use.
Path
Takes in data through d attribute to draw a shape, which can consist of straight lines and curves.
Path: M & m
Move to commands. Like lifting a pen and starting to draw in a new location on the SVG. uppercase M indicates absolute coordinates will follow. lowercase m indicates relative coordinates will follow.
(Capitalization is absolute, lowercase is relative)
If command is followed by multiple pairs of coordinates, these coordinates are treated as lineto commands. Lineto will be relative or absolute depending on the (M/m) used.
lineto: (L, l, H, h, V, v)
Draw straight lines from current point to a new point.
L/l - draw a line from start to end point.
H/h - draw a horizontal line from the current point
V/v - draw a vertical line from the current point
Closepath (Z,z)
Ends the current subpath and results in a straight line being drawn from that point to the initial point of the path.
SVG Optimization
When including embeds from vector graphic software it is encouraged to run code through an SVG Optimizer
Path Curves: Cubic Bezier (C, c, S, s)
Todo
Path Curves: Quadratic Bezier (Q,q,T,t)
Todo
