Tell us what works and what could be better. We read every submission.
@apratt2003·28 public vizzes
This interactive scatter plot visualizes Rocket League player statistics from the first three seasons of League Play, plotting win percentage against miscellaneous score per game. Users can select continuous statistics for the x and y axes, choose a nominal attribute for circle color, and adjust circle radius based on a continuous attribute. Built with D3 v4 and Redux (without React), the visualization uses d3-component for modular rendering, SVG for graphics, and includes animations for transitions and an interactive tooltip. The example demonstrates how to pair D3 directly with Redux, with menus controlling all visual encodings and smooth animated updates between states.
This interactive visualization presents an orthographic (globe) projection of world landmasses using the D3 v4 library. Users can pan the globe by dragging with the mouse, which adjusts the projection’s rotation based on pointer movement, and zoom by scrolling, which scales the projection. The map is rendered as SVG from TopoJSON world atlas data.
This example shows a globe rendered with an orthographic projection, displaying the world’s landmasses in steelblue against an empty background. The visualization draws geographic features using D3 v4’s `d3.geoOrthographic` and `d3.geoPath` APIs, with map data loaded from the `world-atlas` TopoJSON dataset via `d3.json` and `topojson.feature`. A text element initially appears with an empty value before the map loads. The code sets the projection scale and translate to center the globe, then appends SVG paths for each land feature.
This map of Massachusetts displays individual city and town polygons as separate colored regions, with North Adams and Gloucester labeled by name. The visualization uses d3.v4 with SVG rendering to draw a GeoJSON FeatureCollection of Massachusetts municipalities, where each feature is rendered as a distinct path on the map. The data source is a gist by apratt2003, and the map is built using the D3.js framework under the MIT license.
This example shows how to encode a MultiPoint geometry object using TopoJSON. The block loads airport coordinates from a TopoJSON file and renders them as a collection of points in an SVG visualization. The file defines a Topology with a single MultiPoint object, transformed and scaled to map the point coordinates. This serves as a demonstration of TopoJSON’s support for representing point-based geometry, as opposed to its more common use for polygons and lines.
This example displays a spinning orthographic globe using D3 v4 and TopoJSON. It loads land geometry from the `world-110m` TopoJSON file and renders it as an SVG path. A `d3.timer` continuously updates the projection’s rotation, spinning the globe horizontally while tilting it vertically with a sinusoidal motion. The visualization demonstrates how minimal code can create an animated geographic visualization using D3’s geo path and timer modules.
This visualization shows the positions of geostationary satellites on a world map using a Canvas-based approach. The example uses D3 v4 with TopoJSON to render world geography, plotting satellite locations from a CSV dataset of GEO satellites. Satellites are displayed as small gray dots positioned by their recorded longitude, while the map itself is rendered on canvas for performance. The visualization is a work in progress, as indicated by the title, and includes hover effects for satellite identification, with the underlying geographic data drawn using SVG paths and the satellite positions overlaid on canvas.
This visualization displays the number of satellites per purpose for the top ten internet countries, using stacked bars grouped by country. Hovering over a bar reveals the satellite count for that segment, while hovering over legend keys highlights a specific purpose across all countries. The code uses d3.v4, d3-legend, and d3-tip libraries, rendering with SVG and animation.
This bar chart displays the total number of satellites launched by each country, using data from a CSV file. The visualization uses D3.js v4 with an SVG renderer, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the quantitative y-axis. Tilted labels on the x-axis handle long country names, and grid lines extend from both axes.
This visualization displays the number of satellites by country, stacked by satellite purpose, using D3 v4 with SVG rendering. The bar chart shows satellite counts for various countries, with each bar segmented by color-coded purpose categories such as Earth Observation, Communications, and Space Science. The x-axis lists country names with angled labels for readability, while the y-axis shows satellite counts. The data is loaded from a CSV file and processed using D3's stack layout to create the stacked bar representation. The chart includes a color scale from d3.schemeCategory10 to distinguish purposes, with axis labels for "Country" and "Total Satellites".
This responsive scatter plot visualizes the periodic table, with each element positioned by atomic number and mass, colored by CPK conventions, and sized according to atomic radius. Built with D3 v4 and SVG, the visualization is implemented as a reusable function that adapts to the container’s dimensions on window resize. The dataset comes from a GitHub repository of periodic table properties. Circles are color-coded by element type and scaled by atomic radius, providing an at-a-glance view of elemental trends. The code is MIT licensed and forked from Curran's Stylized Scatter Plot with Color Legend.
This visualization displays the locations and characteristics of geostationary and other Earth-orbiting satellites as a GEO satellite map. Using D3 v4 with both SVG and Canvas rendering, the map plots satellite positions above a geographic basemap, with the Massachusetts boundary data from the included JSON file providing regional context. Each satellite is positioned according to its orbital longitude from the GEOs.csv dataset, and the visualization encodes satellite attributes such as country/operator, orbit type, and launch vehicle through visual properties like color and symbol shape. The map allows viewers to explore the distribution of satellites across geostationary orbits, distinguishing between commercial, military, and civil operators. Hovering over a satellite reveals details about its operator, purpose, launch date, and orbital parameters. The visualization is implemented with D3 v4, using SVG for the geographic base layer and canvas for rendering the satellite positions, and is licensed under MIT.
This visualization maps satellites in Earth orbit, with the location of each satellite represented as a point on a global map. It uses D3 v4 with SVG rendering, overlaid on geographic data. The visualization plots satellite positions based on orbital parameters, with GEO satellites shown at their longitudinal positions and LEO satellites distributed across their orbital paths. The map is rendered using a geographic projection of the world, with Massachusetts included as a reference for scale. Users can explore the distribution of satellites by orbit type and other attributes from the dataset. The visualization is color-coded by orbit type or operator, and hovering over a satellite reveals details such as its name, launch date, and purpose.
This interactive visualization displays a globe with an orthographic projection, showing Earth's landmasses as black shapes on a white sphere. Users can drag to rotate the globe, with the rotation implemented using versor mathematics for smooth, accurate quaternion-based navigation. The code uses d3.geoOrthographic, d3.geoPath, and Canvas rendering to draw the sphere and land features from TopoJSON world-atlas data. A satellite velocity calculation appears in the corner, though it is computed but not visually represented on the globe. The example is a modified version of Mike Bostock’s Interactive Orthographic block.
This example demonstrates a reusable line chart built with D3 v4, plotting violent crime rates per 100,000 residents across multiple U.S. cities from 1975 to 2015. The SVG visualization uses the CrimesTransformed.csv dataset, encoding years on the x-axis and violent crime rates on the y-axis, with each city represented as a distinct colored line. The chart is designed as a reusable component, allowing the same visualization logic to be applied to different datasets or configurations.
This example demonstrates small multiples of time-series charts using the reusable chart pattern from Mike Bostock's "Towards Reusable Charts" tutorial, updated to D3 v4. It renders monthly stock price data for multiple symbols as individual line and area charts, each with its own title, drawn in SVG. The chart instances share a global x-axis extent so their time axes align, while a `d3.nest` groups the data by symbol. Accessors for values, titles, and extents make the chart flexible and reusable.
This animated visualization shows changing crime rates across 41 U.S. cities from 1975 to 2015, with each city represented as a labeled point tracing a path over time. The chart uses a small-multiple style grid where the y-axis encodes crime rate per 100,000 residents and the x-axis encodes years. As the animation plays, points move along each city's trajectory, with a highlighted timeline revealing the current year. The design allows viewers to compare both long-term trends and annual fluctuations in crime rates across different municipalities, using SVG rendering and animation via d3.v4.
This bar chart shows the top 20 countries with the most Internet users, using data from Internet World Stats. Each bar’s height corresponds to the country's number of Internet users, with the x-axis labels rotated 45 degrees to fit the country names. The visualization uses D3.js v4 and renders as SVG, with axis labels and grid lines styled in muted colors. The chart is based on a fork of Curran's tilted labels block, adapted for this dataset.
Four isometric cubes are arranged in a row, each drawn with three visible faces in different shades of gray. The cubes decrease in size from left to right, with the largest cube centered on the right and the smallest on the left. The visualization uses D3 v4’s `d3.line()` path generator to construct each face from coordinate points, appending SVG `path` elements to the container. This example demonstrates a simple technique for rendering pseudo-3D volumes in a 2D SVG space, inspired by Munzner’s visualization design concepts.
This example summarizes a table of satellite data using Datalib, displaying the dataset’s shape through statistical summaries. The visualization reads from a CSV of Earth-orbiting satellites and computes descriptive statistics for each column, such as counts, unique values, and data types, presenting them in a sortable table. Built with React and D3 v4, the block is designed as a reusable template for quickly exploring the structure of any dataset—fork it and swap in your own data for an immediate overview.
This block summarizes a dataset of periodic table elements using Datalib. It displays the tabular data and provides a quick overview of each column’s type and summary statistics, such as counts, means, and value distributions. The example is built with D3 v4 and can be forked and adapted to explore other datasets.
This block summarizes a dataset of serious crimes reported by 68 US police departments from 1975 to 2015 using Datalib. It displays a compact table with each column’s summary statistics, including counts, means, and distributions. The visualization provides a quick overview of the data’s shape, letting users inspect the structure and ranges of fields such as total population and crime rates. The example is built with D3 v4 and can be forked and adapted to other datasets.
This scatter plot maps all 118 chemical elements from a CSV dataset of periodic table properties. Each element is positioned according to its atomic number and atomic mass, with circle size scaled to atomic radius and fill color using CPK atom coloring conventions. The visualization is built with D3 v4 and rendered as SVG, with axes showing atomic number and atomic mass, and the periodic table data sourced from andrejewski's GitHub repository.
This visualization presents a periodic table as an interactive scatter plot, with each chemical element positioned by atomic number along the x-axis and atomic mass along the y-axis. Element symbols are plotted as text labels colored by their CPK hex color, providing an immediate visual grouping of element categories. The chart uses D3 v4 with SVG rendering to place elements, and supports interactive features such as mouseover tooltips that display detailed properties like electronegativity, atomic radius, melting point, and year discovered. This unconventional layout lets users explore periodic trends and compare elemental characteristics through spatial relationships rather than the traditional grid structure.
This visualization plots elements from the periodic table as a scatter plot, with atomic number on the x-axis and atomic mass on the y-axis. Each element is represented by a circle colored according to its CPK hex color value, with a legend explaining the color mapping. The code uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.legendColor` from the d3-legend plugin to display the color scale. Data is loaded from a CSV file via `d3.csv`.
This visualization uses D3.js v4 to render a scatter plot of the periodic table, with each element positioned by atomic number and atomic mass. The SVG-based chart includes a color legend built with d3-legend, coloring each element by its group block (e.g., nonmetal, alkali metal, noble gas) and encoding atomic mass on the y-axis. The dataset is sourced from the UCI Machine Learning Repository and includes properties like electronegativity and atomic radius, though the example focuses on the relationship between atomic number and atomic mass. The visualization is part of a D3.js video course and is available under an MIT license.
This bar chart displays the top 20 countries by Internet users in 2017, with each bar’s height representing the user count and tilted country names along the x-axis for readability. The visualization uses D3 v4 with SVG, employing `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.axisBottom` and `d3.axisLeft` for axes. Data comes from Internet World Stats, loaded via `d3.csv` and parsed to remove commas.
This bar chart displays the acceptance rates for nine colleges a student is considering, ranging from Catholic University’s 76% down to UChicago’s 7.9%. The bars animate in over two seconds, with the school names fading in afterward and the exact percentage labeled beside each bar. The visualization uses D3 v4 to build an SVG, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `.transition().delay().duration()` to sequence the animations. Data was sourced from individual Wikipedia pages for each university.