Noah Weinberg

@noahweinberg·12 public vizzes

Untitled

Nine buttons switch between poll datasets, each containing values for Harrison, Graham, and Other. Animated bar charts update in place, transitioning vertically and horizontally over one second as the y-axis rescales to the new maximum. The visualization uses D3 v4 with React, rendering SVG rectangles and using d3.scaleBand, d3.scaleLinear, and d3.tip for tooltips.

Oct 27, 2020

Loading thumbnail…

d3 World Map

This example displays a world map using an orthographic projection, with each country colored according to its economy classification from the World Atlas dataset. The visualization loads geographic data as TopoJSON and country metadata as TSV, then joins them by ISO code. It renders the sphere and country boundaries as SVG paths using `d3.geoPath`, assigns colors via `d3.scaleOrdinal` with the `schemeSpectral` range, and adds hover effects and zooming through `d3.zoom`.

Oct 9, 2020

Loading thumbnail…

HTML Starter

This example displays a centered, large-scale “Hello HTML” message in a plain webpage. The page relies on standard HTML and CSS to render the text, with inline styles controlling the font size and alignment. The code also includes a JavaScript script block that logs “Hello JavaScript!” to the browser’s developer console, demonstrating basic console interaction. The project uses no external libraries, serving as a minimal starter template for HTML-based visualizations.

Oct 8, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economies by country, colored with a spectral ordinal scale. Users click legend items to filter the map, which highlights matching countries and dims others. The visualization uses D3 v5 with `geoPath`, `geoNaturalEarth1`, and a `zoom` interaction, alongside a custom color legend built with `scaleOrdinal` and `schemeSpectral`. Data merges TopoJSON country boundaries with TSV attributes loaded from the `world-atlas` package.

Oct 6, 2020

Loading thumbnail…

Voronoi Data Art

Multiple smoothed time-series lines track cumulative COVID-19 deaths per country, with daily death counts plotted on a logarithmic scale. Hovering over any line reveals a tooltip with the country name, total deaths, and date. The chart uses React with D3’s `scaleTime`, `scaleLog`, and `line` generators, while `d3.Delaunay` constructs a Voronoi overlay to capture mouse events for precise line selection. Data comes from the CSSE at Johns Hopkins.

Oct 1, 2020

Loading thumbnail…

Voronoi Data Art

This visualization plots the log of daily COVID-19 deaths over time for multiple countries, with each country’s smoothed timeseries drawn as a yellow line. It uses a Voronoi overlay computed with the `d3.Delaunay` API to enable hover detection on any line point; hovering highlights that country’s full path and displays a tooltip with its total death count and date. Data comes from the CSSE COVID-19 time series dataset, rendered as SVG in a React app using D3 v5 scales and axis generators.

Oct 1, 2020

Loading thumbnail…

Workout Log

This example displays raw workout log text on the left and its parsed JSON structure on the right. The D3.js code uses `d3.text` to load `data.txt`, then a custom `parse` function splits each line by `@` and `x` to extract exercise name, reps, poundage, and notes into an array of objects. The left panel shows the original input, while the right panel uses `select` and `.text` to display the parsed output.

Oct 1, 2020

Loading thumbnail…

d3 World Map

This visualization displays a world map using an orthographic projection, with countries rendered as light green polygons that highlight orange on hover. The code loads geographic data from the world-atlas package via TopoJSON and joins it with country names from a TSV file. Using d3.geoPath and d3.geoOrthographic, it draws the globe’s sphere and country boundaries as SVG paths, with tooltips showing each nation’s name via appended title elements. The implementation relies on d3.v5, topojson-client, and a React-friendly structure with Promise.all for asynchronous data loading.

Sep 29, 2020

Loading thumbnail…

HTML Starter

This example shows an empty SVG canvas with a width of 960 pixels and a height of 50 pixels, ready for drawing. The page uses a minimal HTML structure that links to an external stylesheet, providing the foundation for a simple visualization. The index.html file contains the SVG element and empty script tags, while the styles.css file is linked but not yet populated with rules. The example serves as a bare-bones starting point for building custom visualizations with React and SVG, demonstrating the minimal setup required before adding any data or interactive components.

Jul 7, 2020

Loading thumbnail…

HTML Starter

Jul 7, 2020

Loading thumbnail…

React Starter

A React component renders the string “React Starter” as a message in a large, centered font. The example demonstrates how to set up a React application with a minimal build, using React and ReactDOM to mount the component into a root div. The page is styled with plain CSS, and the bundle is loaded from a separate JavaScript file, showcasing a basic project structure for React development.

Jul 7, 2020

Loading thumbnail…

React Starter

This example demonstrates the minimal setup for integrating React with a visualization environment, rendering the text "Hello React!" centered on the page. The code uses React 16.10 and ReactDOM to mount a single functional component into a root div. Styling is applied via a CSS class with a large font size, and the page loads production builds of React and ReactDOM from unpkg alongside a bundled JavaScript file.

Jul 7, 2020