Luca Liverani

@LucaLiverani·3 public vizzes

Olympics performance graph

This interactive map of the United States lets users zoom and pan across states, with hover highlighting and click-to-zoom on individual regions. Built with D3.js and TopoJSON, it loads US state boundaries from the d3js.org us-10m.v1.json dataset. The visualization uses d3.zoom for scaling between 1x and 8x, d3.geoPath for rendering the shapes, and transitions to smoothly animate color changes and zoom operations. A tooltip displays state names on hover, while clicking a state zooms in and colors it red, with a background click resetting the view.

Aug 17, 2024

Loading thumbnail…

Zoomable US Map

This interactive map of the United States allows users to zoom into individual states by clicking, with smooth animated transitions and hover highlighting. Built with D3.js v6 and TopoJSON, it loads US state boundaries from the `us-10m.v1.json` dataset and renders them using `d3.geoPath` within an SVG. The `d3.zoom` API handles pan and zoom gestures, while `transition` calls animate the viewport and state fill colors between default, hover, and clicked states. A tooltip displays each state’s name on mouseover.

Jul 29, 2024

Loading thumbnail…

Fork of CSV Dataset Template - Penguins

This example displays the first row of a penguin dataset as formatted JSON, demonstrating how CSV data is parsed and prepared for visualization. The code loads the data from `data.csv`, converts measurement columns like `bill_length_mm` and `body_mass_g` from strings to numbers, and then uses the `main` function to render the JSON string into the container. The dataset originates from the palmerpenguins GitHub repository, and the example uses D3.js conventions for data import and processing.

Jul 28, 2024