Tell us what works and what could be better. We read every submission.
@andyrutkowski·13 public vizzes
This visualization explores the structure of a post body from a GitHub gist by representing each paragraph and line as a connected node in a force-directed graph. Using D3.js’s `d3.forceSimulation` and `d3.forceLink`, the layout clusters related text segments while preserving the original reading order through link paths. Nodes are colored by paragraph index, and hovering reveals the exact text snippet from the source gistfile1.txt. The graph exposes the document’s logical flow and section boundaries, making the essay’s organization immediately visible.
This visualization maps the geographic coordinates from the front matter of a Jekyll blog post, plotting a single point on a world map. The example uses D3’s `d3.geoPath` to render the map’s landmasses and `d3.forceSimulation` to position the point, while the popup text from the post’s `desc` field appears as a label. The data source is a gist containing a Markdown file with front-matter fields like `lat` and `lng`, which the code parses to extract the location.
This interactive map overlays two historical raster layers—a 1939 HOLC map and a 1965 Watts map—on a Mapbox GL base map, with sliders controlling each layer’s opacity. A third layer from the 1947 Green Book displays point features; clicking a point opens a popup with its name and type. Built with Mapbox GL JS, the map uses raster sources from Mapbox tilesets and queryRenderedFeatures for interactivity.
This interactive map overlays two historical raster layers—HOLC 1939 redlining maps and Watts 1965—on a Mapbox GL base map centered on Los Angeles. Two range sliders control the opacity of each layer independently, allowing visual comparison of neighborhood classifications and later urban conditions. A clickable Green Book layer displays point features with popups showing property type and name. The visualization uses the Mapbox GL JS API with raster sources and setPaintProperty for opacity adjustments.
This interactive map uses Mapbox GL JS to display two historical raster maps of Los Angeles from 1939, overlaid on a modern basemap. Two sliders control the opacity of the HOLC and Watts map layers, while clicking on either layer reveals popups with property type and name from the Greenbook. The map also includes point layers from the 1939 and 1947 Greenbook, rendered with Mapbox’s queryRenderedFeatures API. The code builds the visualization with blockbuilder.org and relies on Mapbox-hosted raster sources.
This example demonstrates how to interactively adjust the opacity of a raster layer on a Mapbox GL map. It displays a historical map layer (HOLC1939) over a modern base style, with a slider control in a top-left overlay panel. Dragging the slider updates the layer’s transparency in real time using `map.setPaintProperty` with the `raster-opacity` property. The code uses the Mapbox GL JS API (v0.49.0) and loads its tile data from a Mapbox-hosted raster source.
An interactive Mapbox GL map displays two overlaid raster layers of Home Owners' Loan Corporation (HOLC) maps from 1939, centered on Los Angeles and Watts. Two sliders control the opacity of each raster layer, allowing side-by-side comparison of the historical redlining districts. Clicking on the map reveals popups with the district type and name from the GeoJSON layers. The map uses Mapbox GL JS v0.44.1 with custom raster sources and built-in popup functionality.
This interactive map displays two historical layers of Los Angeles: redlining boundaries from 1939 and locations from the same year’s Green Book. A menu of toggleable layer names lets users show or hide each raster or vector source independently. Built with Mapbox GL JS v0.44.1, the code adds both layers on map load and uses `map.getLayoutProperty` and `map.setLayoutProperty` to switch visibility. The raster HOLC layer and the circle-styled Green Book points come from Mapbox-hosted tilesets.
Two Mapbox GL maps display different Firef.ly styles side by side, with a draggable vertical swipe divider that lets viewers compare the visualizations. The before map uses one style URL, while the after map uses another, both centered on coordinates [0, 0] at zoom level 0. The code loads the Mapbox GL JS library and its compare plugin, then instantiates two map objects and connects them with `mapboxgl.Compare`.
This example uses Mapbox GL JS to display a map of Los Angeles with two overlay layers: a Watts curfew map and a 1939 HOLC redlining map. A menu in the top-right corner contains toggle links for each layer. Clicking a link toggles the layer’s visibility via `map.getLayoutProperty` and `map.setLayoutProperty`, updating the active class on the link. Both layers are raster sources loaded from Mapbox tiles, rendered on top of a custom map style.
A map centered on Los Angeles displays a raster layer with an adjustable opacity slider. The example uses the Mapbox GL JS library to render the map and the `map.setPaintProperty` method with `raster-opacity` to control layer transparency. A slider input updates the opacity value, while a click event on the map triggers a popup showing the name and type of a feature from a layer called `47greenbook-dapl9g`. The map style and raster source come from Mapbox-hosted data.
This example uses Mapbox GL JS to display a historical map layer and lets the user adjust its opacity with a range slider. A raster layer sourced from Mapbox tiles is overlaid on a custom style, and moving the slider calls `map.setPaintProperty` with a `raster-opacity` value. A second map instance shows a clickable polygon layer that opens a popup with property details. The code includes two map setups, one centered on Chicago and another on Los Angeles, both using Mapbox styles and tile sources.
This horizontal bar chart ranks the top 20 countries by number of Internet users in 2017, using data from Internet World Stats. The visualization shows China leading with over 731 million users, followed by India and the United States, with bars colored steelblue. Built with D3 v4, the code loads a CSV file, parses comma-formatted numbers, and renders an SVG using `d3.scaleBand` for the country axis and `d3.scaleLinear` for the user counts, with axes created via `d3.axisBottom` and `d3.axisLeft`.