yvesponcon

@yvesponcon·6 public vizzes

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`.

Nov 17, 2020

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.

Nov 17, 2020

Loading thumbnail…

Untitled

This example shows a world map colored by population data, though the color encoding is incomplete as the code only logs country IDs to the console instead of applying the fill. It uses D3 v4 with `d3.geoMercator` projection, `d3.geoPath` for rendering countries as SVG paths, and a `d3.scaleThreshold` with `d3.schemeBlues` for potential color mapping. The external data includes a GeoJSON world topology and a CSV of country population values, loaded asynchronously via `d3.queue`. The map is rendered as an SVG element with a fixed width and height.

Nov 16, 2020

Loading thumbnail…

Radar chart

Two radar charts compare weekly service usage between smartphone and tablet owners across 22 axes. Each axis represents a service, such as Emails or Social Networks, with values plotted as percentages. The chart uses D3 v3 to render SVG polygons with translucent fills, supporting click and double-click interactions that adjust fill opacity. The legend identifies each device category, while the surrounding code draws concentric grid levels and axis labels.

Nov 16, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, displaying countries as light green SVG paths on a blue sphere with black outlines. It uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features, with country boundaries derived from the TopoJSON world-atlas dataset. The code loads geographic data asynchronously via `d3.json`, converts TopoJSON to GeoJSON using the `topojson.feature` method, and appends each country path to the SVG canvas. The map is rendered entirely with SVG elements in a minimalist style.

Nov 16, 2020

Loading thumbnail…

Lets make a face with with D3.JS

A yellow circle face rendered in SVG uses D3.js v6 to assemble eyes, eyebrows, and a smiling arc mouth from basic shapes. The code imports `select` and `arc` from D3, positioning features relative to the SVG’s width and height through translation. It draws two black eye circles with fixed spacing, rotated rectangles as eyebrows, and a mouth path generated by D3’s `arc` generator with specified inner and outer radii. The example demonstrates composing a recognizable figure from primitive geometric elements.

Nov 13, 2020