This visualization uses sortable columns as an interaction technique to explore a dataset as described in chapter 10 of Interactive Data Visualization by Ward, Grinstein, and Keim. This falls under the category of "reconfiguring operators" described on page 319.
Hovering over a column re-sorts the data by that column which may make related patterns appear in other columns.
Data courtesy of the World Health Organization
This visualization uses a Sankey Diagram to visualize paths of Hubway bicycle rides from several stops in Cambridge to several stops in Boston. Each bicycle rental station is represented by a rectangle and the path between rectangles is proportional to the number of trips taken from the rectangle on the left to the rectangle on the right. Colors of paths match the destination station.
Sankey diagrams are typically used to visualize flow rates through a network of nodes and links. This implementation of a sankey layout uses the D3 Sankey Plugin which works as follows:
This visualization uses parallel coordinates to display darkness (SRM), bitterness (IBU), alcohol content, and user rating of 281 beers. Each line represents a beer which intersects each axis corresponding to the value of that attribute of the beer. Additionally, the color of each beer is calculated from its SRM (darkness).
Several techniques discussed in chapter 7 of Interactive Data Visualization by Ward, Grinstein, and Keim are used to aid in exploration of the data:
Code adapted from a previous project of mine github.com/msbarry/d3-beers.
Two well-known algorithms for polyline simplification are the Douglas Peucker and Visvalingam algorithms.
The Douglas Peucker algorithm uses a recursive divide-and-conquer approach. It starts by drawing a straight line from the first point to the last point. Then it finds the intermediate point that is furthest away from the straight line and deems this the "most important" and splits the polyline into two halves at that point. This process is repeated on both halves until the distance of the intermediate point is below a certain threshold, after which all points on that sub-polyline are thrown away since they have a negligible impact on the overall shape.
The Visvalingam algorithm works from the inside-out. It starts by computing the area of the triangle formed by each consecutive three points along the polyline. Then the midpoint of the triangle with the least area is thrown out since those three points are the closest to colinear and the area of triangles on either side are recomputed. The process
| MLS | Location | Price | Bedrooms | Bathrooms | Size | Price/SQ.Ft | Status | |
|---|---|---|---|---|---|---|---|---|
| 132842 | Arroyo Grande | 795000.00 | 3 | 3 | 2371 | 335.30 | Short Sale | |
| 134364 | Paso Robles | 399000.00 | 4 | 3 | 2818 | 141.59 | Short Sale | |
| 135141 | Paso Robles | 545000.00 | 4 | 3 | 3032 | 179.75 | Short Sale | |
| 135712 | Morro Bay | 909000.00 | 4 | 4 | 3540 | 256.78 | Short Sale | |
| 136282 | Santa Maria-Orcutt | 109900.00 | 3 | 1 | 1249 | 87.99 | Short Sale | |
| 136431 | Oceano | 324900.00 | 3 | 3 | 1800 | 180.50 | Short Sale | |
| 137036 | Santa Maria-Orcutt | 192900.00 | 4 | 2 | 1603 | 120.34 | Short Sale | |
| 137090 | Santa Maria-Orcutt | 215000.00 | 3 | 2 | 1450 | 148.28 | Short Sale | |
| 137159 | Morro Bay | 999000.00 | 4 | 3 | 3360 | 297.32 | Short Sale |
| [ | |
| [ | |
| null, | |
| null, | |
| null, | |
| null, | |
| null, | |
| null, | |
| null, | |
| null, |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .controls { | |
| text-align: center; | |
| } | |
| .countdown { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| // MMN simulation (load balancer) | |
| var mmNServers = d3.range(numServers).map(function () { return null; }); | |
| var mmNQueue = []; | |
| var mmNGroup = svg.append("g"); | |
| function styleMMNPacket(packet) { | |
| packet | |
| .attr("cx", function (d, i) { return serverX - (i + 3) * 2 * (packetRadius + packetPadding); }) | |
| .attr("cy", mmNEnterY); | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
| <title>M/M/1 Queue</title> | |
| <style type="text/css"> | |
| body { | |
| font-size: 12px; | |
| font-family: Arial; | |
| width: 960px; |