Skip to main content
SimilarExport ZIP
100%

Fork of Shark Tank Chloropleth

✓ Published0🌍 Public
HHOURPRIMERA@GMAIL.COM
Last edited May 13, 2024
Created on May 13, 2024

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Chloropleth

A choropleth map of the United States colors each state according to a numeric value from a CSV file, using a white-to-blue linear scale. It renders as an SVG via D3 v6, with an Equal Earth projection fitted to the map’s bounding box. The code loads GeoJSON state boundaries and state statistics, then joins them by ISO 3166-2 codes to set fill colors through `d3.geoPath` and `d3.scaleLinear`. The map is sized at half the container’s width, with data sourced from a GitHub-hosted GeoJSON file.

Bbepnye@gmail.com
87% match
Loading thumbnail…

Fork of Chloropleth

This visualization displays a choropleth map of the United States using a hexgrid projection, with each state's fill color corresponding to a numerical value from the `StateFile.csv` data (ranging from 0 to 221, likely representing counts or frequencies). The map is rendered as an SVG using `d3.geoPath` with a `d3.geoEqualEarth` projection fitted to the canvas. The code loads GeoJSON map data and CSV statistics via `d3.json` and `d3.csv`, then maps state codes (ISO 3166-2) to values using a linear color scale that transitions from white to blue. Interactive mouseover effects are present but commented out.

Bblanchestora@gmail.com
84% match
Loading thumbnail…

Shark Tank Chloropleth

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.

Bblanchestora@gmail.com
81% match
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
81% match
Loading thumbnail…

Fork of D3 World Mapzzz

A choropleth map of the United States visualizes a diversity index for each state, ranging from white to blue via a linear color scale. The visualization uses D3 v4 with `d3.geoAlbersUsa` for projection and `d3.geoPath` to render state boundaries from TopoJSON data. State polygons are filled based on a hardcoded dataset of diversity values, and hovering highlights the state with a thicker stroke. The code includes a commented-out tooltip and a legend using `d3.legendColor`, though neither is fully implemented.

11godfrey
80% match
Loading thumbnail…

Fork of React Starter

This React visualization displays a choropleth map of the United States, coloring each state by a numeric rate value from an embedded dataset. Users can click individual states to zoom in and out, with the map resetting when clicking the background. The implementation uses React to render the component, while D3.js handles the SVG generation, `d3.geoIdentity` and `d3.geoPath` for geographic projections, `d3.scaleQuantize` with `d3.schemeBlues` for color encoding, and `d3.zoom` for interactive panning and scaling. TopoJSON data is loaded from a local `map.json` file to define state boundaries.

SSimeon
80% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
80% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
80% match