First shot at a data-driven homepage for Todd and Co's new project.
This brush snaps to day boundaries. As the user brushes, the brush fires brush events, allowing a listener to adjust the brush extent. Compare this approach to using brush transitions on brushend.
A simple example to demonstrate a concept to display real-time data using element attributes to bind to incoming data; from a websocket, for example.
Using element attribute bindings means users can edit plain html pages to build data-driven, dynamically updating user interfaces, designers can style those interfaces and developers can implement element transitions via callback without needing to understand or configure the underlying update mechanism.
GENERATED_FILES = \ | |
unemployment.tsv | |
.PHONY: all clean | |
all: $(GENERATED_FILES) | |
clean: | |
rm -rf -- $(GENERATED_FILES) |
- humans are really good at pattern recognition -> eg. person by just their gait
- with practice, moves gradually to eyes / subconscious
- xkcd kerning comic (http://xkcd.com/1015/)
- work to change the way people see
Curves drawn by randomly placing actors on the canvas, and walking them in a direction determined by the perlin noise function at their location. The continuity of the underlying noise function causes paths to converge together.
This chart shows the path of the Sun in the sky today based on your current location. The red dot represents the current apparent position of the Sun in terms of azimuth and elevation.
The outer black circle represents the horizon, where the elevation of the Sun is 0°. If the Sun is outside this circle, it is below the horizon. (This means it’s dark outside, though note that some definitions of twilight extend as far as 18° below the horizon.) Where the path intersects the horizon determines sunrise and sunset. The inner concentric circles represent higher solar elevations.
The radiating lines of the graticule represent azimuth. For example, 0° azimuth means that the Sun is due North of your current location. The azimuth tells you the direction of shadows cast by the Sun, while the elevation determines their length.
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<link type="text/css" rel="stylesheet" href="style.css"/> | |
</head> | |
<body> | |
<input id="time-slider" type="range" min="0" max="1" step="0.01" value="1"></input> | |
<div id="table-target"> | |
<table> |
/*************************/ | |
/* Rendering Timelines | |
/*************************/ | |
// render all the timelines, based on opportunities, into a target element (d3.selection) | |
function renderTimelines($target, collects, downlinks) { | |
var ops = collects.concat(downlinks); | |
var sorted_ops = R.sortBy(R.prop("start_time"), ops); |
license: gpl-3.0 | |
height: 1060 |