Tell us what works and what could be better. We read every submission.
@aawiegel·6 public vizzes
This interactive map of U.S. colleges uses Vue and D3 to visualize the financial risk associated with each institution. Each dot represents a college, positioned by latitude and longitude on an SVG map of the United States. The color of the dots encodes the institution's risk score, and clicking a state filters the displayed colleges to that region. A legend and tooltip provide additional context, while animated transitions highlight the filtered subset of schools. The visualization is based on a CSV dataset containing college names, risk scores, risk categories, and geographic coordinates. Source: gist · Author: aawiegel · Framework: vue · Rendering: svg, animation · License: mit
This interactive map visualizes the geographic distribution of colleges with varying risk levels across the United States. Using d3.geo.path and d3.behavior.zoom, the visualization enables smooth panning and zooming by modifying the SVG transform, allowing rapid redrawing of geographic features without reprojection overhead. Each college is plotted as a point on the map, colored by its risk category (low, moderate, or high) derived from the highrisk.csv dataset, which includes risk metrics and coordinates for each institution. The visualization, built with Vue and rendered as animated SVG, makes it easy to explore regional patterns in college risk.
This interactive U.S. map visualizes mass shooting locations and fatalities, with circles sized by the number of deaths (using a square root scale) and colored in blue. The map uses D3's Albers USA projection to plot each incident from the CSV dataset, with states drawn from TopoJSON. Hovering over a circle brings it to the front, increases its opacity, and displays a tooltip with the location and death toll. The visualization is fully responsive, recalculating the projection and circle positions when the window is resized. Animated transitions highlight the points on mouseover and mouseout, and the map includes placeholder text for a headline, intro, and source attribution.
A choropleth map of the United States shows the murder rate per 100,000 residents in major cities (population over 250k), using 2015 FBI crime data. Circle markers sized by population and colored by murder rate are overlaid on a topojson state map, rendered in SVG with D3 v4.
A modular US State Choropleth maps state-level CSV data onto a continuous linear color scale, rendering each state as an SVG path using D3 v4's geoAlbersUsa projection. The example loads beerwine2.csv, which contains a normalized `value` for each state, and merges it with GeoJSON state geometries to color-code the map. Users can customize the color ramp by modifying the `lowColor` and `highColor` variables. A vertical gradient legend with an axis is included to show the value-to-color mapping. This block is a refactored version of an existing choropleth and requires a `statesdata.csv` with `state` (full name) and `value` (numeric) columns.
This choropleth map visualizes chlamydia infection rates across U.S. counties, with each county shaded according to its rate from the accompanying CSV file. Built with D3 v4 and rendered as SVG, the visualization uses a color scale to encode the rate values—ranging from low to high—across geographic regions. The data, sourced from a gist by aawiegel, is mapped by county FIPS codes and rendered on a map using d3.geo, with missing or blank rates handled appropriately. The project is forked from an existing block and built with Blockbuilder, licensed under MIT.