Skip to main content
SimilarExport ZIP
100%

Shark Tank Chloropleth

✓ Published2🌍 Public
Bblanchestora@gmail.com
Last edited May 13, 2024
Created on May 10, 2024

This choropleth map visualizes the number of entrepreneurs per U.S. state, with color intensity ranging from white (zero) to blue (high values). The map uses d3.geoMercator projection and d3.geoPath to render state boundaries from GeoJSON data, while a d3.scaleLinear maps state counts to fill colors. Interactive tooltips display the state name and entrepreneur count on mouseover, with highlighted states transitioning to red. The visualization includes a legend quantifying the color scale, and data is loaded from a CSV file via d3.csv.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shark Tank Chloropleth Deals

This example visualizes the number of Shark Tank deals per U.S. state using a chloropleth map. Each state is colored on a white-to-green scale based on deal count, with a legend showing the mapping up to 100 deals. The map uses d3.geoMercator and d3.geoPath to render state boundaries from GeoJSON data, while a tooltip displays the state name and entrepreneur count on hover. The code employs d3.scaleLinear for color encoding and transitions to animate fill changes on mouseleave.

Bblanchestora@gmail.com
92% match
Loading thumbnail…

Fork of Shark Tank Chloropleth

This fork of a Shark Tank choropleth visualizes the ratio of “Num” to population for each U.S. state, using a linear color scale from white to blue. It renders an SVG map via `d3.geoMercator` and `d3.geoPath`, loading GeoJSON map data and CSV statistics through `d3.json` and `d3.csv`. The code uses `d3.scaleLinear` for color mapping and joins paths with `selectAll` and `join` for drawing.

HHOURPRIMERA@GMAIL.COM
81% match
Loading thumbnail…

Chloropleth Map

This choropleth map displays the 2022 unemployment rate for each U.S. state, with a blue sequential color scale indicating higher rates. It uses d3.geoPath with a d3.geoMercator projection to render state boundaries from a TopoJSON file, while a threshold scale maps unemployment percentages to d3.schemeBlues. Hovering over a state changes its fill to red via CSS. Data comes from a CSV file joined to state names, and tooltips show the exact rate per state.

AAllen Ho
73% match
Loading thumbnail…

Choropleth Map

This example uses a choropleth map to display the unemployment rate (%) for each U.S. state. The color of each state corresponds to its value, with a legend on the right providing the scale. The map is rendered using D3.js (v5) and React, with the `d3.geoPath` projection drawing the state boundaries and a TopoJSON mesh creating the white state separations. A tooltip is appended to each state path to reveal the exact state name and unemployment rate. The data is stored in a Map object and applied to each state's fill color via the `color` scale.

Rrobertmreedy
72% match
Loading thumbnail…

Test Chloropleth

This visualization displays the number of data points across U.S. states in a hexagon tile grid choropleth. The color scale uses a threshold encoding with d3.scaleThreshold and d3.schemeBlues to represent counts from the StateFile.csv dataset. The map is rendered using d3.geoPath and TopoJSON, loading US state hexgrid geometry from a GitHub-hosted GeoJSON file. A legend with an axis provides reference for interpreting the color values.

Bblanchestora@gmail.com
71% match
Loading thumbnail…

choropleth

This choropleth map uses the Albers USA projection to visualize the number of earthquakes per state in the United States, rendered as Scalable Vector Graphics (SVG) paths. The map employs a threshold color scale with a sequential color scheme (OrRd) to encode the logarithmically transformed earthquake counts for each state. The visualization is built using D3's `geoPath` and `geoAlbersUsa` for projection and map generation, with `topojson` for feature extraction. Data is loaded from external CSV and TopoJSON files. Hovering over a state turns it light green, revealing tooltips with the region, state name, and earthquake count.

MMehika Patel
71% match
Loading thumbnail…

State Choropleth Map

A choropleth map of the United States displays county-level unemployment rates from 2021, using a blue sequential color scale and a corresponding legend. The visualization is built with D3.js v5, leveraging `d3.geoPath` for rendering SVG paths, `d3.scaleThreshold` for color binning, and `d3.json` to load TopoJSON geographic data. A hover tooltip, implemented with a D3-selected `div`, reveals each county's specific unemployment percentage.

Mmariahdiaz
71% match
Loading thumbnail…

Earthquake Choropleth Map

This choropleth map visualizes the total number of earthquakes for each U.S. state, using a logarithmic color scale to differentiate magnitudes. The map renders state boundaries from a TopoJSON file, and the color of each state is determined by its earthquake count, with a threshold-based color scale (`d3.scaleThreshold`) and a sequential color scheme (`d3.schemeOrRd`). The visualization uses D3 v5's geographic projection (`d3.geoAlbersUsa`) and `d3.geoPath` for drawing, while an interactive tooltip (`d3.tip`) displays the state name, region, and exact earthquake count on hover, with data sourced from a CSV file.

MMike Wolfgram
71% match