Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

TP3 DataViz 2024

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

5a2b7fa66caf4406aa7c5ef20ee8aca1

Open

TP3 DataViz 2024

0 stars0🌍 Public
IInès Liroulet
Last edited Dec 17, 2024
Created on Dec 17, 2024
Forked from Map hover

A choropleth map displays waste tonnage (DEEE) across French departments for each year selected via a slider, with color intensity encoded by d3.scaleQuantize and hover tooltips. The visualization updates GeoJSON feature values per year and renders them using d3.geoConicConformal, d3.geoPath, and SVG. Data comes from a CSV on data.gouv.fr, filtered by waste type, while department boundaries use a simplified France GeoJSON from GitHub.

AI-generated description

An example showing hovering on a map:

  • Loads d3v7 via UNPKG.
  • Loads map of Canada
  • On mouse move :
    • shows a div by modifying its css properties
    • modifies the content and position of a div (the tooltip)
    • changes the css class of the state to change its color
  • On mouse out :
    • hides the tooltip div