Affection Type Social Map

100%

Affection Type Social Map

✓ Published1🌍 Public

Last edited Oct 19, 2020

Created on Mar 26, 2020

A choropleth map of China displays each province colored by category, overlaid with circles sized by social affection values using a square-root scale. The map uses `d3.geoMercator` projection and `d3.geoPath` to render province boundaries from TopoJSON data, while CSV data is merged with geographic features. A custom legend built with `d3.scaleSqrt` and `sizeLengend` shows circle radius mappings. Hovering highlights provinces, and the SVG rendering uses D3 v5 with `d3.csv` and `d3.json` for data loading.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Affection Type Relative Map

This map of China visualizes the relative frequency of “Relative” as an affection type by province, using circles sized with a d3.scaleSqrt and positioned via d3.geoCentroid. The choropleth-style province paths are colored with d3.scaleOrdinal, and province names are shown via tooltips. The code loads CSV data and TopoJSON geometry, then applies a d3.geoMercator projection with d3.geoPath to render the SVG. A custom size legend is drawn with D3 scales and formatting.

LLex

90% match

Loading thumbnail…

Affection Type Travel Map

This map visualizes travel-related affection types across Chinese provinces, using circle size overlaid on geographic regions to represent the number of travel records per province. The choropleth-style fills assign each province a categorical color based on its ID. Built with D3 v5, the visualization loads CSV data and TopoJSON geometry, then projects the map using `d3.geoMercator` and renders paths with `d3.geoPath`. Circle radii derive from a square-root scale, and a custom legend component displays tick values with formatted labels.

LLex

88% match

Loading thumbnail…

Affection Type Unknown Map

This map of Chinese provinces visualizes the number of people with unknown affection types, alongside other categories like social, relative, and travel connections. The map renders geographic boundaries using `d3.geoPath` and `geoMercator`, with circles scaled via `d3.scaleSqrt` to represent counts for each province. The choropleth fill, using `d3.scaleOrdinal`, encodes province IDs, while hover effects highlight regions. Data comes from a CSV joined with TopoJSON from a remote GitHub source. A size legend is custom-built to aid interpretation.

SSrishti2398

87% match

Loading thumbnail…

Affection Type Unknown Map

This map of China visualizes provincial data on affection types, specifically highlighting the "Unknown" category through red circles positioned at each province’s centroid. The map uses an SVG rendering with a Mercator projection and loads geographic boundaries from a TopoJSON file while joining CSV data by province ID. Circle radii are scaled using `d3.scaleSqrt` based on unknown values, with a custom size legend showing tick values. Provinces are colored using `d3.scaleOrdinal` with `schemeCategory10`, and hover effects change fill to red. The visualization relies on `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for interaction.

SSrishti2398

86% match

Loading thumbnail…

Affection Type Unknown Map

This map of Chinese provinces visualizes the number of survey responses with an unknown affection type, using red circles sized by `d3.scaleSqrt` and positioned with `d3.geoCentroid` and the `d3.geoMercator` projection. Province borders are drawn as SVG paths from a TopoJSON file. Each circle’s radius encodes the `Unknown` column from a CSV dataset, joined to the map features via province ID. A square-root size scale maps values from 0 to 500 into radii between 0 and 20 pixels. The visualization uses `d3.geoPath` for rendering geographic features and includes a legend with circles and tick labels generated by a custom `sizeLengend` function.

LLex

85% match

Loading thumbnail…

Fork of Affection Type Unknown Map

This map of China displays the number of unknown-affection cases per province, with red circles sized proportionally to the count and provinces colored by category. The visualization uses a Mercator projection with `d3.geoPath` to render province boundaries, and `d3.scaleSqrt` to map case counts to circle radii via `d3.geoCentroid`. A legend, generated by a custom `sizeLengend` function, explains the circle sizes, while data comes from a CSV file merged with TopoJSON-provided province geometries. The map also supports hover highlighting through CSS, and code loads data asynchronously using `Promise.all` with `d3.csv` and `d3.json`.

NNelly-ux10

82% match

Loading thumbnail…

Chinese Map Template

This map of China displays province-level data with a proportional symbol overlay, where circle size encodes a numeric value from a local CSV joined to TopoJSON geographic features. Each province is colored with a categorical scale and shows its name on hover. The visualization uses d3.geoMercator for projection, d3.geoPath for rendering SVG paths, d3.geoCentroid for positioning circles, and a custom legend component built with d3.scaleSqrt.

Iinroadings

79% match

Loading thumbnail…

中国地图

A choropleth map of China renders each province as an SVG path using a Mercator projection centered on the country. The D3.js code loads GeoJSON map data and applies a categorical color scale, with provinces highlighted yellow on mouseover. Province names are positioned using projected centroid coordinates, with a vertical offset applied to prevent overlap between Macau and Hong Kong labels. The visualization demonstrates D3’s geographic path generator (`d3.geoPath`) and projection utilities.

Zzhuomo-maker

79% match