Lets make a map

100%

Lets make a map

✓ Published0🌍 Public

Last edited Jan 20, 2020

Created on Jan 11, 2020

An interactive choropleth of South Korea lets users click any district to see its vote distribution rendered as a pie chart. The map is drawn with `d3.geoPath` and a Mercator projection, while district names come from a CSV mapped by `SIG_CD`. Clicking a city triggers a pie chart built with `d3.pie` and `d3.arc`, populating a second SVG. The visualization relies on TopoJSON for district boundaries, D3’s `select`, `csv`, and `json` loaders, and encodes vote counts from a separate CSV file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

KoreaMap

This example displays a choropleth map of South Korea’s provinces, rendered as SVG paths. The visualization uses d3.geoMercator and d3.geoPath to project and draw the geographic features, while React manages the component structure. Data is loaded from a TopoJSON file via d3.json and processed with topojson.feature. Static styling defines the map’s stroke and fill colors. The visualization waits for data to load, showing a loading message until the map is ready.

SSeheeP1217

77% match

Loading thumbnail…

country map

This choropleth-style map displays the regions of South Korea, with each province filled in coral and separated by black boundary lines. The visualization uses a React front end with D3’s geoNaturalEarth1 projection and geoPath to render the geographic shapes from a TopoJSON file. Data is fetched via d3.json and processed with topojson.feature and topojson.mesh, and the map is drawn as inline SVG elements.

JJasvitha Allamsetty

75% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the top 10 provinces in South Korea by confirmed COVID-19 case counts, sorted in descending order with each slice colored via `d3.scaleOrdinal` and `d3.schemeCategory10`. The data is loaded from a CSV file using `d3.csv` and rendered as SVG paths with the `d3.pie` and `d3.arc` generators. A legend, positioned to the right, pairs each province with its confirmed count using text and rectangles. Mouseover events log the selected province’s value to the console.

Ggayathrikavya

73% match

Loading thumbnail…

world map

This example visualizes the country of South Korea as a shaded map on a blank SVG canvas. It loads geographic data from the world-atlas TopoJSON dataset and uses the `topojson.feature` method to extract the country’s geometry. A `d3.geoMercator` projection fits the map to a 960×500 viewport via `fitSize`, and `d3.geoPath` renders the resulting polygon as a single dark path. The code demonstrates both external library imports via script tags and the basic D3 data-join pattern for drawing SVG shapes.

SSwapna1915

72% match

Loading thumbnail…

Activity 5_task 6(1)

This visualization displays a map of South Korea using a Mercator projection. The code loads world country geometries from a TopoJSON file, extracts the South Korea feature, and renders it as an SVG path. It uses `d3.geoMercator` and `d3.geoPath` to project and draw the map, with the data sourced from the `world-atlas` package. The resulting visualization shows just the country outline, fitted to the 960x500 pixel canvas.

KKeerthiAnnem

71% match

Loading thumbnail…

Worldmap

This example displays a map of South Korea using a Mercator projection fitted to the country’s geographic bounds. It loads world country boundaries from a TopoJSON file via `d3.json`, extracts the South Korea feature with `topojson.feature`, and renders it as an SVG path using `d3.geoPath`. The visualization also demonstrates VizHub’s ES6 module imports and D3 loading through UNPKG.

SSwapna1915

71% match

Loading thumbnail…

Untitled

This interactive visualization presents the results of Singapore’s 2020 general election, showing popular vote shares by party in a pie chart alongside constituency-level maps and tables. Users can switch between tabs for overall results, single-member constituencies (SMCs), group representation constituencies (GRCs), and party breakdowns. The code uses d3.pie and d3.arc to generate the animated pie chart, while d3.geoPath renders the geographic maps from TopoJSON data. Tooltips, implemented via d3-tip, display additional details on hover, and the CSV data is loaded and bound to the visual elements.

SSeanisgod1994

70% match

Loading thumbnail…

Activity 8 Country

This example displays a map of South Korea rendered as an SVG using D3 v5 and TopoJSON data from the world-atlas package. It extracts the country’s geometry with `topojson.feature`, fits a `d3.geoMercator` projection to the shape with `fitSize`, and draws the path via `d3.geoPath`. The code loads D3 from a CDN script tag and appends the map to the page body.

Hharipriyaa07

70% match