You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Slippy (zoomable/draggable) map and tile management, with data layer comprised of semitransparent circles. Also demonstrates an info overlay activated when the user is hovering over a data item. The visualization does not use any other library than D3.js.
The visualization shows driver license suspensions in California per zip code due to "failure to pay" or "failure to appear". The viz is using the Mapbox GL API, which provides high performance rendering of complex geo features (which in this case includes over 1600 high resolution zip code boundaries).
The viz is based on the Mapbox GL API and examples by Anand Thakker here, and here, and Bobby Sudekum here.
The viz is also using the D3 and Topojson libraries.
Four data files are used by the script: a) driver license suspension data (CSV), b) zip code meta data (CSV), c) California county boundaries (Topojson) and d) Zip code boundaries (Topojson).
The visualization shows driver license suspensions in California per zip code due to "failure to pay" or "failure to appear". The viz is based on raster map tiles from Mapbox with county and zip code boundaries drawn on top.
See another implementation of the same dataset here, fullscreen. This implementation is using the Mapbox GL API (which uses WebGL) and offers a vastly superior drawing performance.
The script demonstrates the use of a key function when binding data to a D3 selection. The user will cycle through a sequence of steps that will mutate a data structure. For each step, elements in the DOM will be updated accordingly. Red items are elements created initially, whereas black elements are added subsequently. The user can toggle the key function on or off at each step (and thereby switch between the default "by index" access and "by key" access). The user can also force a reordering of the DOM elements to match the selection order.
A div on the right shows the current content of the data structure. A div at the bottom shows the source code that is about to be executed (using a bit of code introspection).
For bl.ocks.org users, the script should be viewed in its own window. See the script in action here
The real time chart is a resuable Javascript component that accepts real time data. The chart's time domain is moving with the passage of time, which means that any data placed in the chart eventually will age out and leave the chart. In addition to the main chart, the component also manages a "focus" window with a viewport (d3.brush) that can moved and sized to view an arbitrary portion of the time series data.
The visualization demonstrates the use of a ray casting algorithm to determine whether a point lies inside or outside of a polygon. If the ray emanating from the test point crosses an odd number of polygon line segments, then the test point lies within the polygon, else the point lies outside.
Some descriptions of the algorithm are here, here and here.
Demonstrates the the use of D3 to manage an array of tables. Via a button, the user will cycle through several steps which will mutate the underlying array of arrays, which at each step is fed to the table update function. For example, tables are added and removed from the array of tables, individual rows of tables are added and removed, and individual table cells are modified. The update function demonstrates the enter, exit and update patterns at the div/table level as well as at the table row level.
For bl.ocks.org users, the script should be viewed in its own window. See the script in action here