Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Bbl75d
Last edited Mar 13, 2020
Created on Mar 13, 2020
Forked from HTML Starter

This visualization combines a scatter plot, a map of US states, and a time-based brush to explore agricultural productivity data. The scatter plot displays each state’s score against its creation time, with circle size reflecting comment count, while the map overlays proportional symbols sized by agricultural productivity. A brush timeline filters the data across all views simultaneously, and hovering over a point or map symbol highlights the corresponding element in the other charts. The code uses d3.svg.brush, d3.geo.albersUsa, d3.geo.path, and d3.svg.axis to render the interactive SVG elements.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

Three linked D3.js views explore a dataset of US states: a scatterplot maps time of creation against score with circle size encoding comment count, a symbol map projects agricultural productivity onto an AlbersUSA geography, and a time-based brush chart displays event markers. Hovering highlights matching points across all views via dispatcher events, while brushing filters the scatterplot and map through the `brush` component’s `brushend` handler. SVG transitions animate updates, and the map uses TopoJSON for state boundaries.

Pprincit
88% match
Loading thumbnail…

Untitled

This interactive visualization integrates a choropleth map of U.S. states with a scatter plot and a time-series brush to explore event data. Users can brush over a timeline to filter events, which simultaneously updates the map and scatter plot. Hovering over a point in either view highlights the corresponding data in the other. Built with D3.js v3, it uses `d3.geoPath` for map projection, `d3.svg.brush` for filtering, and `d3.svg.axis` for the time axis. Data is loaded from a local JSON file.

Pprincit
88% match
Loading thumbnail…

Untitled

This interactive scatter plot displays three clusters of points, colored by category, and allows users to brush a region to zoom into that area. The visualization uses D3 v4 to generate data from a normal distribution, render SVG circles, and implement brushing with `d3.brush`. Axes are drawn with `d3.axisTop` and `d3.axisRight`, and zoom animations are handled via `svg.transition()`. The code also references a `data.csv` file with population figures, though the chart itself visualizes synthetic points.

Pprincit
79% match
Loading thumbnail…

Untitled

This interactive visualization links a scatter plot, a symbol map, and a time-series brush to explore worldwide COVID-19 aggregated case data. Users can brush a time range to filter the scatter plot and map, or hover over points to highlight matching elements across all views. The visualization uses D3 v3 with `d3.svg.brush`, `d3.geo.path` with an Albers USA projection, and `d3.tip` for tooltips. Data is loaded from local JSON and CSV files containing confirmed cases, recovered cases, deaths, and increase rate over time.

SSarahKiyani
79% match
Loading thumbnail…

Untitled

This interactive map visualizes wildfire data across U.S. states, using size and color to represent fire frequency or intensity. Built with React and D3 v5, it renders a geographic map with state boundaries, reading wildfire records from a CSV file. Users can click a state to zoom in and see more detail, with the map’s projection and path drawing handled by `d3.geo.albersUsa` and `d3.geo.path`. The animation and interaction are driven by React state, while data parsing uses `d3.csv`.

PPavelyev Ivan
79% match
Loading thumbnail…

Untitled

An interactive choropleth of US states allows users to click a state to zoom in and highlight its boundaries, with the map rendered via d3.geo.path and TopoJSON. Wildfire data is loaded from a CSV, though the visualization primarily shows state selection and zoom animation using React state management. The albersUsa projection scales and translates to focus on selected regions, with transitions animating the zoom effect.

AAndrey Getmanov
79% match
Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall
78% match
Loading thumbnail…

Untitled

This interactive scatterplot matrix visualizes an environmental dataset, with each cell showing the relationship between two variables such as age, income, and education. Users can brush across any axis to filter the data points, which hides or highlights circles across all cells simultaneously using a brush interaction implemented with `d3.brush`. The visualization is rendered as SVG using D3 v4 within a React framework, with axes scaled via `d3.scaleLinear` and colored by categorical country data. A legend identifies the three color-coded countries: China, Brazil, and USA.

Mmuzzheng
78% match