Untitled

100%

✓ Published0🌍 Public

Last edited Jun 4, 2023

Created on Jun 1, 2023

A map of France displays colored circles sized by the percentage of survey responses from each university, with a tooltip showing the exact value on hover. The visualization loads geographic boundaries from a TopoJSON file and renders them as SVG paths using `d3.geoPath` with a custom composite projection from compmap.js. Circles are positioned via the projection, sized with `d3.scaleSqrt`, and animated on mouseover through D3 transitions, while CSV data drives the interactive tooltips.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A choropleth map of France displays the response rate per university, with red circles sized by percentage using `d3.scaleSqrt`. The map uses `d3.geoConicConformalFrance` from the composite projections library, renders SVG paths via `d3.geoPath`, and overlays city coordinates from a CSV file. Interactive tooltips appear on mouseover, showing each city’s response percentage, with data loaded using `d3.csv` and `topojson`.

Ddartigues

90% match

Loading thumbnail…

Untitled

This example displays a map of France, rendered in yellow on a pink background using a Mercator projection centered on the country. The visualization loads GeoJSON data from an external URL, filters the dataset to select only the feature named "France", and draws it as an SVG path using `d3.geoPath` with a `d3.geoMercator` projection. The code relies on D3 v4's `d3.json` method to fetch the geographic data and applies a custom scale and translation to position the map within the 540x400 pixel canvas.

SSNarasimhar

81% match

Loading thumbnail…

Untitled

This example visualizes six French cities on a Mercator map, encoding each location with a circle whose size corresponds to a numeric value and whose fill pattern distinguishes three categorical groups (A, B, C). The map uses `d3.geoMercator` and `d3.geoPath` to project and draw France from a GeoJSON source, while the textures library generates distinct striped patterns via `textures.lines()` for each group. Circles are positioned with the projection, sized via `d3.scaleLinear`, and styled with dashed black strokes and transparent fills to emphasize the pattern overlays.

Zzoniyac

78% match

Loading thumbnail…

Untitled

A choropleth map colors countries according to the number of students per country, with a sequential red color scale and a legend showing count ranges. The visualization uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render world topology from the World Atlas TopoJSON, while data from a TSV file is joined to country features. Country boundaries are styled with white strokes, and hovering highlights the selected country.

Bbambaleq

76% match

Loading thumbnail…

Untitled

A choropleth world map visualizes mock document counts by country, with countries colored on a scale from green to red based on their associated values. The map renders in SVG using the Mercator projection via `d3.geo.mercator` and `d3.geo.path`, with graticule lines drawn for reference. TopoJSON data from `world.json` is loaded and merged with aggregation data containing country codes and document counts, then filtered to exclude Antarctica. Country boundaries appear as white strokes, and users can hover to reveal labels, though labels remain hidden by default.

FFatemeh Safarlou

76% match

Loading thumbnail…

Untitled

This example displays a choropleth map of the United States with counties rendered as SVG paths, filled in light gray and highlighted in light blue on hover. The code loads a TopoJSON file of US counties from a remote GitHub repository and uses `d3.geo.mercator` with a fitted projection to size and position the map within the viewport. Counties are drawn via `d3.geo.path`, and the script references an additional tooltip feature using `d3.tip` in the accompanying test.js file, though that tooltip is not implemented in the visible code. The map is rendered entirely with D3 v3 and SVG.

AAnnie Ulichney

75% match

Loading thumbnail…

France Map

This example displays a choropleth map of French departments, using a Mercator projection to render each region as a colored SVG path with its name label positioned at the centroid. The visualization loads GeoJSON TopoJSON data from a remote URL, processing it with `feature` from topojson, and generates the paths and labels using `d3.geoPath` and `d3.geoMercator`. Fill colors come from `scaleOrdinal` with `schemeCategory10`, while the map’s layout is adjusted via projection translation and scale parameters in d3 v5 within a React framework.

Kkakumanusreya

75% match

Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, with each country filled in grey and stroked with white. The visualization uses a Mercator projection centered on the equator, configured via `d3.geoMercator` with a custom scale and rotation. The code loads US Atlas topology data from a remote JSON file and uses `topojson.feature` to extract country boundaries, which are then drawn with `d3.geoPath`. The SVG container is created using `d3.select` and appended to the document body.

Sspace-captain96

75% match