Tell us what works and what could be better. We read every submission.
@andrewcowley·13 public vizzes
A line chart displays 200 randomly generated data points, where the y-values follow a normal distribution. A fixed-size brush selection highlights a narrow range of data, and the brush can only be dragged horizontally, not resized. The visualization uses D3 v4 with `d3.brushX` to create the slider, while the chart itself is rendered as an SVG path via `d3.line`. The code removes the brush handles and overlay to enforce the fixed selection size.
A multi-line chart displays state population changes over time, with each line color-coded per state. A vertical guide line and tooltip appear on mousemove, showing the year and ranked populations. The tooltip sorts states by population for that year and lists them with values. Built with D3 v4, it uses `d3.scaleLinear`, `d3.line`, SVG paths, and a transparent overlay rect to capture mouse events.
This multi-line chart displays state population trends from 1910 to 2010, with an interactive tooltip that appears when hovering over the chart. Built with D3 v4 and rendered as SVG, the visualization plots four states as colored lines (California, Texas, Michigan, and Elsewhere) and uses a vertical guide line to indicate the selected year. The tooltip lists all states sorted by their population for the hovered year, showing each state's name and population in its corresponding line color. Data is loaded from an external JSON file, and the tooltip updates dynamically as the mouse moves across the chart, with the nearest decennial year snapped to the data.
This visualization maps race results by plotting each runner's finishing position against their time. Circles are placed along the x-axis by position and along the y-axis by minutes extracted from the time string (split on ':'), with a fixed radius of 4 pixels and a teal fill. Built with D3 v4 and SVG, it loads data from a TSV file listing position, name, sex, and time, encoding each runner as a circle. The y-coordinate is computed by multiplying the minute component of the time by 5, creating a vertical spread of finish times relative to rank.
Two line charts track the maximum, minimum, and delay values from a remote JSON dataset, which can be toggled between two API endpoints using the provided buttons. The SVG visualization uses d3.scaleTime, d3.scaleLinear, and d3.line to render the paths, with d3.axisBottom and d3.axisLeft for the axes. Data is fetched asynchronously via the Axios library, and the chart updates in place when a new dataset is selected.
This example demonstrates how to append a single text span to a page using D3 v4. The code displays the text "Edit the code below to change me!" as a styled span element, with each click of the "++" button triggering the update function to re-bind the data. The update function uses `div.selectAll('span')` and `.data([txt])` to manage the selection, then calls `spn.enter().append("span")` to add the element if it does not exist. The span is styled with 50-pixel margins and padding via CSS. The visualization uses a simple data array as its input source and relies on D3's data join pattern.
Two line charts show how values change over time for different series. The visualization displays two buttons that switch between two distinct datasets: one containing series A and B, the other containing only series C. Built with D3 v4, the code uses d3.line, d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10 to render SVG paths with distinct colors per series. Axes are drawn with crispEdges rendering, and button clicks trigger an update function that rebinds data, redraws lines, and removes exiting series.
This visualization displays three time-series lines representing maximum, minimum, and delay values for network delays, drawn as separate strokes on a shared time axis. It fetches JSON data from a remote API using axios, then maps each delay record’s timestamp and corresponding metric into a d3.line path. The x-scale is time-based, while the y-scale maps delay values linearly, with color categories assigned via d3.scaleOrdinal and the schemeCategory10 palette. The SVG chart uses d3.v4 for scales, line generation, and axis rendering, with data loaded asynchronously through the axios promise.
A button triggers a smooth update of an area chart, which displays three distinct series of random data points. The chart’s axes and the area shapes transition smoothly over 500 milliseconds whenever new data is generated. The visualization uses D3 v4 with SVG rendering, relying on `d3.scaleLinear`, `d3.axisBottom`, and transitions on the x-axis. The data is generated randomly in JavaScript via `Math.random`, and the chart is redrawn with updated scales and domains.
This visualization displays a dataset of Australian food additives and their corresponding numeric codes, pairing each prescribed name with its identifier. The data, sourced from a gist by andrewcowley, is stored in a JavaScript array and rendered using D3.js. The code builds a simple list or table layout, likely using `d3.select` and data binding to map each additive entry to a visual element. The visualization is noted as incomplete, with the author indicating it still requires cleaning and accuracy checks, so the display may show raw or partially processed entries rather than a fully polished graphic.
This example calculates the great-circle distance between two geographic coordinates using the haversine formula. It shows the distance in kilometers between the Washington Monument area points [38.898556, -77.037852] and [38.897147, -77.043934]. The code defines a self-executing function that converts latitude and longitude differences to radians, applies the haversine equation with Earth’s mean radius (6371 km), and returns the result. It relies on native JavaScript Math methods (`cos`, `sin`, `atan2`, `sqrt`) without external libraries, and the output is a single numeric value representing the distance.
This example demonstrates a quick, practical workaround for removing a paywall-style subscription overlay from a webpage. The code uses jQuery to select and delete the element with the ID `subscription-overlay`, then resets the body’s CSS `overflow` property from `hidden` to `visible`. It relies on the jQuery library’s `remove()` method and the `css()` method for style manipulation. The example shows a minimal, single-purpose bookmarklet that directly targets a specific DOM structure without additional data or rendering logic.
This example demonstrates how to find the largest number in a randomly generated array of between 1 and 100 integers, each also ranging from 1 to 100. It uses plain JavaScript with a custom `findLargest` function that iterates through the array, comparing each value against a running maximum and logging each comparison to the console. The code relies on the native `Math.random`, `Math.floor`, and `Array.push` methods to construct the dataset, then outputs the final result as a string. No external libraries or visualization frameworks are used; the example is purely algorithmic.