Skip to main content
SimilarExport ZIP
100%

New Tech: Point On Map

✓ Published0🌍 Public
QQingyang Wang Profolio
Last edited Mar 29, 2023
Created on Mar 23, 2023
Forked from New Technique

This interactive map displays COVID-19 vaccination rates for each country, with circle size indicating the percentage of the population vaccinated and color depth representing the percentage fully vaccinated. Hovering over a country reveals its name and full vaccination rate. The visualization offers three geographic projections—geoEqualEarth, geoAzimuthalEqualArea, and geoOrthographic—selectable via a dropdown menu. It uses d3.geoPath with TopoJSON world atlas data, d3.csvParse for vaccination data, and a d3-scaleLinear for circle radius.

AI-generated description

This map shows the Covid Vaccine taken rate for each country with data.

Put the mouse on the graph that will show country's name and its rate to users

For this week's new tech: I use circle to show the "% of population fully vaccinated" for each country with data. The biggre circle with deeper color shows the higher rate.

MIT Licensed

Similar vizzes

Loading thumbnail…

New Technique

This choropleth map visualizes global COVID-19 vaccination rates, specifically the percentage of each country’s population that is fully vaccinated, using a red sequential color scale. Hovering over a country highlights its border and displays a tooltip with the country’s name and vaccination percentage. The visualization uses the `d3.geoAzimuthalEqualArea` projection, `d3.geoPath`, and `d3.csvParse` to load and render geographic and CSV data, with a custom ordinal color legend built via `d3.scaleOrdinal`. Data comes from a local CSV file and world atlas TopoJSON.

QQingyang Wang Profolio
85% match
Loading thumbnail…

vaccination dataviz Apr 13th d3_v4

This interactive D3.js visualization maps global COVID-19 vaccination totals onto a rotatable globe using `d3.geo.projection` and `d3.geo.zoom`. Country landmasses are colored by vaccination counts, with a color legend and hover tooltips via `d3.tip` providing details. The interface includes menu buttons and a select dropdown for additional control. The visualization relies on TopoJSON geographic data, rendered as SVG with graticules and striped patterns for missing data, and uses color schemes from ColorBrewer.

SSeekerzero
80% match
Loading thumbnail…

US COVID Vaccination Circles

A map of the United States shows the percentage of each state’s eligible population fully vaccinated against COVID-19 as of September 4, 2021, with circle radius proportional to that percentage. Built with D3 v5 and TopoJSON, the visualization uses `d3.geoPath` to render state boundaries and a linear scale to size the circles, which are positioned using state centroids from a JSON file. Vaccination data comes from a CSV of state-level records, and the SVG circles are semi-transparent blue.

PPeter VanNostrand
79% match
Loading thumbnail…

Zoomable COVID Vaccine Map

This visualization uses a map of the United States to show the percentage of each state's population fully vaccinated against COVID-19 as of September 4, 2021. The radius of each blue circle is proportional to the state's vaccination rate, with circles positioned over state centroids. The map supports zooming via the `d3.zoom` API, which updates the SVG group's transform. The code builds the map using `d3.geoAlbersUsa` and `d3.geoPath` projections, and renders circles with proportional radii using a `d3.scaleLinear` scale. Data comes from a CSV file of US vaccination statistics, while state boundaries and centroids come from US Atlas GeoJSON and a local JSON file.

PPeter VanNostrand
77% match
Loading thumbnail…

Load Covid Vaccination Data

This interactive visualization shows global COVID-19 vaccination data on a choropleth world map, with a toggleable bar chart displaying the top 10 countries by a selected metric. Users can hover over countries to see their vaccination rates. The visualization uses d3.geoPath for map rendering, d3.scaleQuantile with a YlGnBu color scheme, and d3.scaleBand for the bar chart. Data comes from the WHO vaccination dataset, loaded via fetch and parsed with d3.csvParse.

SSeekerzero
77% match
Loading thumbnail…

Fork of Fork of Choropleth Map 2

This choropleth map displays COVID-19 vaccination data from a CSV dataset, allowing users to toggle between three metrics via a dropdown menu: fully vaccinated counts, fully vaccinated per 100 people, and total vaccinations. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render world country outlines, with d3.scaleQuantile and d3.schemeYlGnBu assigning color fills based on the selected metric. Data loads asynchronously via fetch and Promise.all, while the topojson-client library converts the world atlas TopoJSON into GeoJSON features. Missing values appear gray, and the map responds to window resizing.

SSeekerzero
76% match
Loading thumbnail…

Circles on a Map

This visualization displays the global distribution of new COVID-19 cases using proportional circles positioned by country centroids on a natural Earth projection. The circle areas encode population data loaded from CSV files, while tooltips reveal exact values on hover. Built with D3 v5, the visualization uses d3.geoPath for map rendering, d3.geoCentroid for positioning, d3.scaleSqrt for circle sizing, and d3.zoom for pan and zoom interactions. A size legend with d3.ticks communicates the scale, and world atlas TopoJSON provides the country boundaries.

YYIN Wanxuan
76% match
Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes global COVID-19 vaccination rates, specifically the fully vaccinated population portion per country, using color intensity to show geographic disparities. The map renders countries as filled paths via `d3.geoPath` with a Natural Earth projection, while a `d3.scaleQuantile` maps data values to the `schemeYlGnBu` color scale, with gray for missing data. Data comes from a CSV file of vaccination statistics, parsed with `d3.csvParse`, and country boundaries use TopoJSON data processed through `topojson.feature`. The visualization updates asynchronously with `Promise.all` and `setState`.

SSeekerzero
76% match