Skip to main content
SimilarExport ZIP
100%

Data Viz Size - rainfall

✓ Published0🌍 Public
Ssjpeno@wpi.edu
Last edited Sep 8, 2024
Created on Sep 8, 2024
Forked from Solar System

A tile-grid map of the contiguous United States shows average annual rainfall per state. Each state is represented by a blue circle, with the circle’s area scaled to the rainfall amount using a square-root transform (via `d3.scaleSqrt`) to keep differences visible. State abbreviations are not rendered; instead, full state names appear as text labels placed below each circle. The visualization uses `d3.select` and `d3.join` to create the SVG circles and text, drawing from static arrays of state locations and rainfall values derived from USA.com data.

AI-generated description

A visualization of the avg rainfall by state. Relative sizes to scale, distances not to scale.

Data from USA.com http://www.usa.com/rank/us--average-precipitation--state-rank.htm [

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A choropleth map of the United States displays drought counts per state from 2012 to 2021, with a year selector to switch between annual datasets. The visualization uses D3 v7 to render SVG paths and a color legend categorizing drought frequency into six bins from green (low) to red (high). The code loads data from local JavaScript config files and computes the map projection, with a tooltip and legend providing supplementary context.

JJosieeeeee
70% match
Loading thumbnail…

US State Map

This interactive map of the United States uses D3 v3 to render state boundaries as SVG paths from the included `uStates.js` data file. Each state is colored according to randomly generated sample statistics—low, average, and high values—using an interpolated color scale from light yellow to dark red. Hovering over a state triggers a CSS-based tooltip that displays the state's name and its low, average, and high values in a styled HTML table. The map animates state fills on hover with a subtle opacity change, while the tooltip follows the cursor, providing a clean and informative way to explore the data.

CCoola85
69% match
Loading thumbnail…

US States

This visualization displays a map of the contiguous United States, with each state rendered as a blue SVG path. Hovering over a state turns it red and updates a text overlay near the cursor, showing the state’s name and population from the GeoJSON data. The map uses `d3.geoAlbersUsa()` for projection and `d3.geoPath()` to draw shapes, while mouseover events trigger the text and resize a separate red circle in a second SVG, scaled by population. The data comes from the contiguous-usa.geojson source, and the interaction is built with React and D3 v6.

Ookahne@gmail.com
68% match
Loading thumbnail…

A5 -D3 Bubble Chart

This D3.js v7 bubble chart visualizes U.S. states, plotting total area on the x-axis, state names on the y-axis, and population as bubble radius. Color encodes the century of state admission (1700s, 1800s, 1900s). Built with SVG, it uses d3.scaleLinear, d3.scaleBand, and d3.scaleOrdinal. Data is loaded from a CSV via d3.csv. Interactive tooltips appear on hover.

Rragregory@dons.usfca.edu
68% match
Loading thumbnail…

US State Grid

The visualization displays US states in a grid layout, with each state represented by a labeled cell colored by its assigned region (e.g., CA, SE, NE) using predefined CSS classes. It shows state abbreviations in a fixed 8-row table, including blank cells for layout alignment and non-rectangular geographic positioning. The code uses d3.v4 to bind the stateLoc data array to table rows and cells, applying region-based classes via a stateToRegion mapping. It relies on d3.select and data joins to render the HTML table, with no external data file, as the state coordinates and regional groupings are hardcoded.

NNPashaP
68% match
Loading thumbnail…

USA Map

This interactive map of the United States uses a linear color scale to visualize state-level data values, with states shaded from light blue to dark blue based on their associated values. The visualization loads CSV data containing state IDs and their corresponding quantitative values, then merges this with US state boundaries from a GeoJSON source. Built with D3 v6 and React, the map renders as an SVG using the `d3.geoPath` generator to draw state outlines, while the `topojson.feature` API extracts state features from the geographic data. States without matching CSV entries appear in gray.

Ssaikrishnabussa
68% match
Loading thumbnail…

State Ratings Map

This map of the United States uses circles to represent shopping data by state. The area of each circle scales with the number of purchases, while the blue color intensity reflects the average customer rating, creating a visual comparison of consumer behavior. Built with d3.geoPath and d3.geoAlbersUsaTerritories, it projects state boundaries and overlays circles using d3.scaleSqrt for sizing and d3.scaleSequential with interpolateBlues for coloring. The data comes from the Shopping Habits Dataset, with the map rendered using the topojson-client library to convert GeoJSON features.

Mmacgregorm01@gmail.com
67% match
Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147
67% match