Visualiser des données avec D3

100%

Visualiser des données avec D3

✓ Published0🌍 Public

Last edited Apr 13, 2020

Created on Apr 13, 2020

This example displays a choropleth map of French administrative departments, coloring each region according to its population size using a sequential red color scale ranging from light to dark hues. The visualization renders the geographic boundaries as SVG paths via D3.js, employing the `d3.geo.path()` and `d3.geo.conicConformal()` projection APIs to transform the GeoJSON data, while population values from a CSV file are mapped to color classes using `d3.scale.quantile()`.

AI-generated description

MIT Licensed

Similar vizzes

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

81% match

Loading thumbnail…

France Map

A choropleth-style map of France displays each department as a white polygon with black outlines, based on GeoJSON data from a gist. The visualization uses D3 v3’s `d3.geo.path()` with a `d3.geo.conicConformal` projection, centered on the country and scaled to fit a 600×600 SVG canvas. Departments are loaded from `departments.json` and rendered as SVG `<path>` elements, with no data encoding beyond the geographical boundaries.

EElisaDnr

81% match

Loading thumbnail…

Map exemple

This interactive choropleth displays global population estimates, with each country filled by a color scale ranging from light red to dark red according to its population. Built with D3 v5, the map uses TopoJSON to convert world-atlas GeoJSON features into SVG paths via a Mercator projection, while an accompanying TSV file supplies the population attributes. The visualization supports zooming and panning, and countries turn purple on hover.

EElodie31190

81% match

Loading thumbnail…

France population

This choropleth map shows the population of French metropolitan and overseas departments, with each region filled with a color corresponding to its total population. A threshold color scale maps population counts to a blue sequential palette, and a legend with an axis explains the color-to-value mapping. The visualization uses D3 v3, TopoJSON, and a queue to load the geographic data from `france.json` and population figures from `population.csv`. Geographic paths are rendered as SVG via `d3.geo.path` and an Albers projection, and coloring is applied by matching department names between the two datasets.

KKcnarf

81% match

Loading thumbnail…

covid en France avec légende!

A choropleth map of France displays cumulative COVID-19 hospitalizations per department, with a white-to-dark-red color scale using a power exponent to emphasize high totals. The visualization uses d3.geoMercator and d3.geoPath to project and draw geographic features from a JSON topology, while d3.scalePow maps the data domain to the color range. Department totals are loaded from a CSV file via d3.csv, and each path includes a title tooltip showing the department name and its value.

Yyvesponcon

78% match

Loading thumbnail…

DataViz - TP4

This example shows a choropleth map of French regions colored by the total number of flu cases reported during November 2014, with hover tooltips displaying the region name and value. It uses D3 v3 with `d3.geo.conicConformal` projection and `d3.geo.path` to render the GeoJSON regions, while a quantize color scale maps aggregated values from a CSV dataset. The tooltip uses D3’s mouse events and a simple HTML div.

HHakkahi

78% match

Loading thumbnail…

Gist 496f20b47774ec679ab5dd48beff9d7e

This example maps French regional data from a CSV file onto a geographic outline of France. It uses a conic conformal projection and a quantized color scale to shade each region according to a numeric value. The visualization loads GeoJSON topology for the region boundaries and joins it with the CSV data, filling regions with a five-step green color ramp, while regions without data appear gray. The code relies on D3 v4’s `d3.geoConformal`, `d3.geoPath`, `d3.scaleQuantize`, and CSV/JSON loading functions.

EElisaDnr

77% match

Loading thumbnail…

covid en France!

This choropleth map shows the number of COVID-19 hospitalizations per French department, encoded with a white-to-dark-red color scale. The visualization uses a Mercator projection via `d3.geoPath` and `d3.geoMercator`, with `d3.scalePow` mapping hospitalization counts to fill colors. Hovering reveals the department name and its count through a `<title>` element. The map supports pan and zoom through `d3.zoom`, and data is loaded from a CSV file using `d3.csv`.

Yyvesponcon

77% match