Danilo De Rosa

@daniloderosa·5 public vizzes

Big Three Total Slams

This example visualizes the total Grand Slam titles won by tennis’s “Big Three” as an indented tree diagram. Node circles are sized by each player’s slam count, showing the hierarchy of players and their titles. The code uses the D3.js v7 library to load and stratify a CSV from a GitHub gist, then applies `d3.tree` to compute the layout. The resulting SVG is rendered with cubic Bézier links and labeled nodes, with circles sized by the `value` field.

Oct 1, 2021

Loading thumbnail…

My Scatterplot

This scatterplot visualizes daily PM10 emissions in Sacile, Italy, throughout 2020, with each circle representing a day’s measured average. Points are colored red when values meet or exceed the daily limit of 50, marked by a dashed red line, while gray indicates lower readings. The chart uses D3 v7 with SVG rendering, including a time-scaled x-axis, linear y-axis, and a hover tooltip that displays the exact date and value. Data is loaded asynchronously from a CSV file via `d3.csv`, and axes are generated using `d3.axisBottom` and `d3.axisLeft`.

Oct 1, 2021

Loading thumbnail…

Modify a circle's radius

A D3.js visualization demonstrates how a circle's radius changes interactively. A slider input controls the circle's size, with the current radius value displayed as text. The page renders a single SVG circle centered on a 600 by 400 canvas. The code uses the `d3.select` API to bind the range input's `input` event to an `update` function, which modifies both the circle's `r` attribute and the displayed numeric label. The initial radius is set to 100, and the slider allows adjustments from 1 to 150.

Oct 1, 2021

Loading thumbnail…

My Bar Chart

This bar chart displays average PM10 emissions during 2020 across municipalities in the Friuli Venezia Giulia region, sorted from highest to lowest values. The visualization includes a red dashed line marking the annual limit of 40 units, with a tooltip that appears on hover to show exact values for each location. Built with D3 v7, the chart uses `d3.csv` for data loading, `scaleLinear` and `scaleBand` for axes, and `d3.axisBottom` and `d3.axisLeft` for rendering. The SVG rendering includes animated transitions for tooltip opacity changes on mouse events.

Sep 30, 2021

Loading thumbnail…

My Line Chart with dropdown menu

This interactive line chart visualizes daily PM10 emissions for various Italian municipalities during 2020. A dropdown menu allows users to switch between the different locations, and the line path animates smoothly to the new data when a selection is made. The chart is built using D3.js v6, which handles the SVG rendering, time-based x-axis scaling, linear y-axis scaling, and the dropdown's change event listener. The data is loaded from a CSV file fetched via `d3.csv`.

Sep 30, 2021