Skip to main content
SimilarExport ZIP
100%

SC4

✓ Published2🌍 Public
Ooliverkendall99@gmail.com
Last edited Nov 21, 2024
Created on May 1, 2024
Forked from Circles

This visualization shows the distribution of grain elevators across South Carolina counties, with each county shaded on a color scale from light yellow to dark red based on the number of elevators it contains. Hovering over a county highlights it in blue and displays a tooltip with the county name and elevator count. The map is rendered using SVG paths from a GeoJSON file, projected with `d3.geoMercator` and `d3.geoPath`, while elevator data is loaded from a CSV. The color scale uses `d3.scaleLinear` with `d3.extent` to set the domain, and tooltips are implemented as a D3 selection appended to the page.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SC4

This map of South Carolina shows the number of grain elevators in each county via a diverging color scale from light yellow to dark red. Hovering over a county highlights it in dark blue and displays a tooltip with the county name and elevator count. The visualization loads D3 v6 from a CDN, uses `d3.geoMercator` and `d3.geoPath` to project and draw GeoJSON county boundaries, and joins that with CSV data. Interactivity relies on SVG path mouse events and a custom tooltip div managed through `d3.select`.

Bbepnye@gmail.com
94% match
Loading thumbnail…

Fork of SC5

This visualization combines a choropleth map of South Carolina counties with a horizontal bar chart, showing elevator counts and population data. Hovering over a county highlights it and displays a tooltip with the number of elevators and total population. The map uses a linear color scale, while the bar chart employs `d3.scaleBand` and `d3.axisBottom`. Data is loaded from external CSV and GeoJSON sources via `d3.csv` and `d3.json`, with interactions handled through D3 event listeners.

Bbepnye@gmail.com
84% match
Loading thumbnail…

SC5

This visualization merges a choropleth map of South Carolina counties with a linked bar chart, using elevator permit data alongside demographic metrics (population, income, and poverty) from voting records. Users select a metric from a dropdown, which re-renders both the map and the bar chart, styled with a shared linear color scale applied via `d3.scaleLinear`. Hovering over any county on either view triggers a tooltip (via `d3.select` and `getBoundingClientRect`) showing the county’s elevator count and the selected metric. The map uses `d3.geoMercator` with `d3.geoPath` for projection and county outlines, while the bar chart is built with `d3.scaleBand` and `d3.axisLeft`.

Ooliverkendall99@gmail.com
84% match
Loading thumbnail…

colorado data

This visualization maps elevator installations across South Carolina counties, coloring the map by a selected metric (population, income, or poverty). A bar chart displays the same metric per county, with tooltips revealing the elevator count for each. The code uses D3.js v6 with a Mercator projection (`d3.geoMercator`) and `d3.geoPath` to render the U.S. counties. The visualization reads from local data files and a dropdown menu (`#dataSelector`) dynamically re-renders both the map and the bar chart, using `d3.scaleLinear` for color mapping and `d3.scaleBand` for the chart axes.

Ooliverkendall99@gmail.com
79% match
Loading thumbnail…

south carolina counties

This example displays a map of South Carolina counties, coloring each county path either red or blue based on its state ID. It loads geographic data from a remote JSON file and uses TopoJSON to convert it into GeoJSON features for rendering. The visualization relies on D3’s `select` and `attr` methods to configure an SVG canvas, while `d3.geoPath` is used to generate the path data for each county shape. The code also demonstrates importing local ES6 modules and logging county geometry coordinates.

Ooliverkendall99@gmail.com
76% match
Loading thumbnail…

SC Counties2

This example displays a choropleth map of South Carolina counties, coloring each county blue or red based on whether its ID matches the value "06". It renders the GeoJSON data as SVG paths using D3's `geoPath()` projection. The code loads D3 via UNPKG, fetches geographic data from a raw GitHub GeoJSON URL, and demonstrates importing from local ES6 modules alongside D3's `select` API.

Ooliverkendall99@gmail.com
75% match
Loading thumbnail…

Fork of WAEVData_Fork of Chloropleth

This fork visualizes South Carolina county boundaries using a Mercator projection, rendered via two side-by-side SVG canvases with each county filled in blue using `d3.geoPath`. The code loads GeoJSON map data from a GitHub repository alongside a CSV dataset, though the CSV is fetched but not directly used in the visible rendering. Built with D3.js v6 and React, the example demonstrates a static choropleth foundation, creating SVG paths for each geographic feature through `d3.json` and `d3.csv` promises.

Bbepnye@gmail.com
68% match
Loading thumbnail…

SC Counties

This example renders a choropleth map of US counties from TopoJSON data using D3 v5 and the `d3.geoPath` API. Each county is drawn as an SVG path, colored blue by default, with red highlighting for counties whose ID matches `'06'`, and tooltips via appended `title` elements. The map loads external US county geometry from a remote URL, while `topojson.feature` converts the data for rendering in an SVG container.

Ooliverkendall99@gmail.com
67% match