Example of d3.brush to select items in a scattergram and synchronization with table.
See the script in action here
Bo Ericsson boeric
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.
See the script in action 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
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 component adheres to the pattern described in Towards Reusable Chart.
The following options are currently supported:
- width and height in pixels (Number)
- border (Boolean)
The real time chart is a resuable Javascript component that accepts real time data. The purpose is to show the arrival time of real time events (or lack thereof), piped to the browser (for example via Websockets). Various attributes of each event can be articulated using size, color and opacity of the object generated for the event.
The component allows multiple asynchronous data streams to be viewed, each in a horizontal band across the SVG. New data streams can be added dynamically (as they are discovered by the caller over time), simply by calling the yDomain method with the new array of data series names. The chart will automatically fit the new data series into the available space in the SVG.
The chart's time domain is moving with the passage of time. That means that any data placed in the chart eventually will age out and leave the chart. Currently, the chart history is capped at five minutes (but can be changed by modifying the comp
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 the viz in action here, and fullscreen
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 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.
See the visualization in action here.
Use the mouse to drag the test point around. Use the drop down to clamp the ray's end point to one of the corners.
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).
See the viz in action here, and [f
The visualization is using data from www.shootingtracker.com and covers the period January 2013 through early December 2015. The event data (comprised of over 1000 shooting events) has been grouped into weeks.
Please see README.md for more information
OlderNewer