ReggieW

@ReggieW·7 public vizzes

Scatter Plot with Menus

This scatter plot displays data about cars from the UCI Machine Learning Repository’s Auto MPG dataset, where each circle represents a vehicle. Users can select which attribute (e.g., horsepower, weight, or acceleration) maps to the X and Y axes using two dropdown menus. The visualization is built with D3 v5, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and a 2-second `transition` animation that moves circles from the center as the data updates.

Aug 9, 2022

Loading thumbnail…

Naturalized Bar Chart

This example visualizes the number of persons naturalized by country of nationality for fiscal year 2019, using a horizontal bar chart where bar lengths correspond to quarterly naturalization counts. The visualization is built with SVG rendering and employs D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to map data values to positions and axes, with data loaded from a remote CSV file. The chart customizes tick labels via a `format` function that converts large numbers to abbreviated forms, and removes default axis lines for a cleaner presentation.

Aug 9, 2022

Loading thumbnail…

US Immigrants

This example displays a natural Earth projection of world countries, colored light green and filling a blue sphere, with country names shown as tooltips on hover. The map supports zooming and panning via d3.zoom, which applies an SVG transform to the grouped map elements. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render the TopoJSON world-atlas data, while country names are resolved from a TSV lookup table. Hovering highlights countries in red through CSS, and the code imports d3 v5 and topojson v3 from CDNs.

Aug 9, 2022

Loading thumbnail…

Country selector

This example shows a world map with countries colored light green, turning orange on hover, and includes a spherical blue background with pan-and-zoom support. It uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` behavior applied to an SVG group. Country boundaries come from TopoJSON world-atlas data (50m resolution), with names loaded from an accompanying TSV file and added as SVG `<title>` tooltips.

Aug 9, 2022

Loading thumbnail…

Immigrants to the US 2019

This visualization shows a world map highlighting countries as the source of immigrants to the US in 2019, using a natural Earth projection. The map renders countries in green with hover effects that turn them orange, while a light blue sphere represents the globe. Built with D3 v5, it loads GeoJSON and TSV data from the world-atlas package, using `d3.geoPath` and `geoNaturalEarth1` for projection, and `topojson.feature` to convert TopoJSON into GeoJSON features.

Aug 9, 2022

Loading thumbnail…

Fork of US Immigrants

This visualization shows a world map rendered with an equirectangular projection, where each country is displayed as a green filled area with black outlines. The map includes a blue sphere backdrop and features a hover effect that changes country fills to orange. Built with D3 v5 and TopoJSON, the code uses `d3.geoPath` and `d3.geoEquirectangular` to project geographic data from the world-atlas 110m dataset. Country boundaries are generated via the `feature` method from TopoJSON, and the SVG output is styled through external CSS.

Aug 9, 2022

Loading thumbnail…

US Immigrants

This example displays a world map with countries rendered in green, which highlight to orange on hover over an equirectangular projection with a blue sphere background. It uses D3 v5’s `geoEquirectangular` and `geoPath` to project and draw country boundaries from TopoJSON data loaded from the world-atlas package. The SVG is populated via D3’s data join, while CSS handles the hover effect.

Aug 9, 2022