Skip to main content
SimilarExport ZIP
100%

State Ratings Map

✓ Published0🌍 Public
Mmacgregorm01@gmail.com
Last edited Oct 24, 2024
Created on Oct 24, 2024
Forked from Simple World 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.

AI-generated description

A map of the United States with circles created using the data from the Shopping Habits Dataset

The area of the circles correspond to the number of entries in the state, indicating the amount of purchases in the state. The circles are colored on a gradient of blues corresponding to the average customer rating for the purchases in the state.

Larger, darker circles indicate more purchases and higher rated purchases.

Also, if anyone is reading this, I was having a lot of difficulty with editing the base map itself. I am having trouble changing the background off of the black (but I think black works alright -- I would still appreciate any feedback!)

MIT Licensed

Similar vizzes

Loading thumbnail…

State Shopping Data Scatterplot

This scatterplot visualizes state-level shopping data, plotting the total number of purchases against average customer rating. Each circle represents a state, with its size scaled to the square root of average purchases per customer and its color indicating the popular season (gold for summer, orange for fall, blue for winter, green otherwise). The visualization uses d3.scaleLinear for axes and d3.axisLeft for the y-axis, while custom tooltips appear on mouseover. Data comes from the @mjmacgregor/state-ratings package, and rendering leverages D3’s selection and join methods.

Mmacgregorm01@gmail.com
82% match
Loading thumbnail…

State Ratings Map

This interactive map of the United States visualizes state ratings, rendering each state as a distinct geographic shape. Built with React and D3, the visualization uses the `d3.geoPath` API with a `geoAlbersUsaTerritories` projection to display the country’s outline and graticule, while loading geospatial data from a TopoJSON source. The map dynamically updates its SVG canvas, sizing to the browser window, and incorporates state rating data from an external library, though the actual data-loading state is managed via a `state` object and a `setState` function, with the map’s country paths styled with white strokes and a thin graticule grid.

Mmacgregorm01@gmail.com
82% match
Loading thumbnail…

State Ratings

This visualization displays a map of average customer review ratings across U.S. states, using a dataset derived from shopping habits. The code loads a CSV file with `d3.csv` or a custom import, converts quantitative fields like `AvgRating` and `NumRatings` to numbers, and renders the first data record as raw JSON in a `<pre>` element. The example demonstrates basic data inspection, showing how to load and parse tabular data for subsequent geospatial or analytical use.

Mmacgregorm01@gmail.com
81% match
Loading thumbnail…

State Shopping Ratings

This example presents a world map visualization that plots cities as tiny dots, sourced from a reduced world cities database and rendered alongside country boundaries from the visionscarto-world-atlas. The visualization uses the D3.js library’s `geoNaturalEarth1` projection and `geoPath` to draw the map and graticule, while `topojson-client` converts the TopoJSON data into features. Each city’s latitude and longitude are projected to screen coordinates, then drawn as small circles, with the country shapes styled in light gray.

Mmacgregorm01@gmail.com
77% match
Loading thumbnail…

State Ratings Map

This example renders a choropleth map of the United States using D3’s geo APIs. It employs `d3.geoAlbersUsa` for the projection, `d3.geoPath` to draw state boundaries, and `d3.geoGraticule` to overlay a graticule and outline. State geometries come from a TopoJSON source, converted to GeoJSON via `topojson-client`’s `feature` function. The visualization uses a join-based workflow to create SVG paths, with a white stroke separating states and a light gray graticule.

Mmacgregorm01@gmail.com
77% match
Loading thumbnail…

State Data Scatterplot with Color Legend

This visualization displays a scatterplot of state ratings, with each circle representing a state's average customer rating against its total number of purchases. The circles are colored by the most popular season for that state, using an ordinal color scale with distinct hues for Summer, Fall, Winter, and Spring. A D3 color legend with interactive hover highlighting allows users to filter which season's data points remain fully opaque. The visualization uses d3.scaleLinear for the axes, d3.scaleOrdinal for colors, and d3-axis for tick marks, while d3.select handles mouse events for tooltips and legend interactions.

Mmacgregorm01@gmail.com
74% match
Loading thumbnail…

Map

This interactive map visualizes seasonally adjusted home price performance across U.S. states, using color intensity to show one-year price changes, while city-level circles sized by population reveal housing metrics like median prices and rents. Users hover over states and cities to access detailed data. The visualization uses D3 v7 with a `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON state boundaries, alongside `d3.scaleSequential` for color coding and `d3.scaleSqrt` for circle sizing.

MMd Fahimul Kabir Chowdhury
74% match
Loading thumbnail…

Map

A choropleth map of the United States visualizes home price performance by state, with states colored according to their seasonally adjusted one-year price change. Overlaid orange circles represent major cities, sized by population, providing additional housing market context. The visualization uses D3.js v7 with `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON state boundaries from the us-atlas package, while a custom SVG tooltip displays detailed state and city metrics on hover. State data comes from a CSV file ranking performance across multiple time periods.

MMd Fahimul Kabir Chowdhury
74% match