Andrea Picciau

PM Emissions in the Metropolitan City of Cagliari

This visualization displays daily average PM 2.5 and PM 10 emissions across multiple monitoring stations in the Metropolitan City of Cagliari. The chart shows time series lines with a dashed World Health Organization threshold line, using a Voronoi overlay via `d3.Delaunay` for hover detection. React manages state for pollutant selection and tooltips, while D3’s `scaleTime`, `scaleLinear`, and `line` handle scaling and path generation. Data comes from a CSV of daily emissions, rendered with SVG.

Jan 15, 2022

Scatter plot with color legend

This interactive scatter plot of the Iris dataset lets users explore relationships between four flower measurements by selecting which attributes appear on the x- and y-axes via two dropdown menus. Points are colored by species using a color legend built with React components. The visualization uses d3.scaleLinear for positioning, d3.scaleOrdinal for color mapping, and renders axes and marks as SVG elements within a React framework, with data loaded asynchronously via d3.csv.

Jan 12, 2022

React dropdown

A React dropdown component demonstrates a simple interactive selector for family relationships. The example renders a dropdown menu with options like Self, Son, Daughter, and Relative, using the `react-dropdown` library and its default styling. The app is built with React 16 and ReactDOM, with the dropdown’s state managed through the component’s `value` and `options` props. The code uses a plain JavaScript array for the option data and renders the selection within a styled div using React’s JSX syntax.

Jan 10, 2022

PM 2.5 Emissions in the Metropolitan City of Cagliari

This chart displays daily PM2.5 emissions from multiple monitoring stations in the Metropolitan City of Cagliari, using a logarithmic y-scale to accommodate wide value ranges. A dashed threshold line marks the WHO guideline of 25 μg/m³, with tooltips showing each station’s value and its percentage above or below this limit. The visualization relies on React components and D3 v7, employing `d3.scaleLog`, `d3.line`, and `d3.Delaunay` for Voronoi-based hover detection. Hovering over any point highlights the corresponding station’s full time series in color.

Dec 2, 2021

Testing React Dropdown

This interactive scatter plot displays the Iris dataset, allowing users to select which floral measurements appear on the X and Y axes via dropdown menus. The visualization uses D3 scales for positioning and color encoding, rendered as SVG circles through React components. A color legend highlights individual species on hover by fading other data points, filtering the underlying display. The example demonstrates combining a React interface with D3's `scaleLinear` and `scaleOrdinal` for interactive exploration.

Dec 1, 2021

Interactive color legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two flower measurements via dropdown menus while colors distinguish species. A custom color legend enables highlighting individual species by hovering, which fades non-matching points to reveal patterns. Built with React and D3 v5, it uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, with SVG circles rendered from CSV data loaded via d3.csv.

Dec 1, 2021

Mortus de COVID in su mundu po paisu

A timeline of cumulative COVID-19 deaths per country, plotted with a log-scaled y-axis, shows each nation as a separate line. A Voronoi overlay enables interactive highlighting: hovering reveals a tooltip with the country name, total deaths, and date. The chart, built with React and D3 v7, uses `d3.scaleLog`, `d3.line`, and `d3.Delaunay` for the overlay. Data comes from the CSSEGISandData COVID-19 GitHub repository.

Nov 20, 2021

Voronoi Overlay with Labels

This chart displays cumulative COVID-19 death counts over time for multiple countries, with a logarithmic y-axis. A Voronoi overlay (computed via `d3.Delaunay.from` and `voronoi.renderCell`) enables hover detection on any data point, highlighting the corresponding country's line and showing a tooltip with the exact date, death count, and country name. The SVG renders reactively, using `d3.scaleLog`, `d3.scaleTime`, and the `d3.line` generator, with data from the CSSE COVID-19 time series.

Nov 19, 2021

Migrantis cun spumadori

This interactive visualization combines a proportional symbol map with a time-series histogram to explore the global distribution of migrant deaths and disappearances. The map uses a square-root size scale for circles, projecting coordinates with D3's geoNaturalEarth1 projection and geoPath, while the histogram aggregates monthly totals using d3.bin and displays them as bars. A brushX interaction on the histogram filters the map's displayed data by date range. The visualization is built with React, D3 v5, and TopoJSON, rendering entirely in SVG, with the source data loaded from a CSV of missing migrants incidents.

Nov 8, 2021

Force Directed Graph Starter

A force-directed graph visualization positions three nodes—Arts web, Community vision, and Silicon valley creates—according to user-defined link distances. The d3.forceSimulation API applies charge, link, and centering forces, with SVG circles, text labels, and connecting lines updated on each tick. Node size varies by a fixed value, while link distances (30 and 100) influence the final layout. Data comes from a static JavaScript module.

Nov 7, 2021

Coronavirus deaths over time by country with Voronoi Overlay

This chart displays the cumulative COVID-19 death counts over time for multiple countries, using a logarithmic Y-axis to accommodate wide value ranges. A Voronoi overlay, constructed via `d3.Delaunay` and `voronoi.renderCell`, enables intuitive mouse-hover interactions to highlight and emphasize the closest line path. The React-based visualization, rendered as SVG with D3 v7 scales and axes, loads its time-series data from a GitHub-hosted CSV file.

Nov 7, 2021

Curran's Coronavirus Deaths by Country over Time (with Voronoi Hover)

This multi-line chart shows cumulative COVID-19 deaths over time for each country, with all countries plotted using semi-transparent gray lines. A Voronoi overlay enables hover interaction, highlighting the nearest data point’s country and displaying a tooltip with its name, death total, and date. Built with React and D3 v5, the visualization uses `d3.scaleLog` for the y-axis, `d3.scaleTime` for the x-axis, and `d3.Delaunay` from the `d3-delaunay` library to construct the Voronoi cells for efficient hit-testing. Data comes from the Johns Hopkins Coronavirus dataset.

Nov 7, 2021

Coronavirus deaths over time by country

This chart visualizes cumulative COVID-19 deaths over time for multiple countries, using a logarithmic y-axis to accommodate varying death tolls. Each country’s time series is drawn as a separate black path. The visualization is built with React and D3 v7, using `d3.scaleLog`, `scaleTime`, and `line` generators, with SVG rendering. Data comes from a global CSV file, and axes are rendered via D3’s `axisBottom` and `axisLeft` components.

Nov 6, 2021

Coronavirus line chart

This chart shows the global cumulative death toll from COVID-19 over time as a single black line on a logarithmic scale, with gridlines and labeled axes for Time and Cumulative Deaths. It uses d3.scaleLog for the y-axis and d3.scaleTime for the x-axis, with d3.line generating the SVG path from data fetched from a Johns Hopkins CSSE CSV via d3.csv. Aerial labels and tick marks are rendered by custom React components (XAxis, YAxis) invoking d3.axisBottom and d3.axisLeft.

Nov 6, 2021

Summarising Coronavirus Data

This visualization summarizes global COVID-19 mortality by displaying a single, large number in red text. It shows the cumulative death total from the latest date in the Johns Hopkins dataset, along with the corresponding date. The program loads the comma-separated time-series data via `d3.csv`, identifies the final column as the most recent date, sums all values using `reduce`, and formats the result with `d3.format` before inserting the text into an HTML `pre` element.

Loading and Parsing Coronavirus Data

This example demonstrates the raw size and structure of the Johns Hopkins Coronavirus Dataset by displaying three key metrics: file size in kilobytes, row count, and column count. It loads the global deaths time-series CSV and parses it using `d3.csv`, then reports the number of columns from the dataset’s header. The code computes the file size from `d3.csvFormat(data).length` and renders the results as large text in a `<pre>` element via `textContent`. It uses D3 v5’s promise-based loading API.

HIV/AIDS choropleth map

This choropleth map visualizes the global share of the population infected with HIV/AIDS for the year 2017, using a yellow-to-red sequential color scale to encode prevalence. The visualization renders country polygons via `d3.geoPath` with a Natural Earth projection, overlaying graticule lines and interior borders. Data from the IHME dataset is joined to map features through ISO alpha-3 to numeric country codes, with missing countries shown in gray. The React component uses `d3.scaleSequential` and `d3.interpolateYlOrRd` for color encoding, with TopoJSON from world-atlas providing the geographic boundaries.

Missing migrants scatter plot logscale

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis shows reported dates over time, while the y-axis uses a logarithmic scale to display the total number of dead and missing individuals, enabling comparison across widely varying magnitudes. Built with React and D3 v5, it implements custom AxisBottom and AxisLeft components using scaleTime and scaleLog, renders SVG circles via a Marks component, and includes tooltips showing dates through SVG title elements.

Migrants with brushing

This visualization shows global migrant deaths and disappearances using a world map with circular markers scaled by the total dead and missing count. A linked time-series histogram below displays monthly death totals, and users can brush across time to filter the map’s displayed data. The map uses `geoNaturalEarth1` and `geoPath`, while the histogram relies on `scaleTime`, `bin`, and `brushX`. Data comes from the Missing Migrants Project CSV, rendered as SVG within a React framework powered by d3.v5.

Missing migrants map and histogram

This visualization combines a natural Earth projection bubble map with a time-series histogram to show the geographic distribution and monthly totals of missing migrants. The map uses d3.geoNaturalEarth1 and d3.geoPath to render country boundaries, with circle areas scaled by the square root of deaths via d3.scaleSqrt. The histogram below bins reported dates into monthly intervals using d3.histogram and sums the corresponding casualties. Data comes from the Missing Migrants Project CSV, loaded via d3.csv, with React managing the composite SVG layout.

Analysing missing migrants

This histogram displays the monthly totals of dead and missing migrants, with time on the x-axis and the count on the y-axis. Using D3’s `scaleTime` and `bin` (histogram) API, the code aggregates the dataset by month, sums the reported casualties per bin, and renders the bars as SVG rectangles. The data comes from a CSV file loaded via D3’s `csv` function, and the visualization is built with React, D3 v5, and rendered as SVG.

Missing migrants on a map

This visualization plots missing migrant incidents on a natural Earth projection map using React and D3 v5. Semi-transparent circles, scaled by square root of the total dead and missing count, mark incident locations overlaid on land and graticule paths drawn with `d3.geoPath`. The dataset comes from a CSV of global migrant incidents in 2019, while country boundaries use TopoJSON from the world-atlas package.

Points on a Map

A world map rendered with SVG marks shows the globe in muted grays with graticule lines and country borders, overlaid with translucent teal circles sized by city population. The visualization uses a React component with d3’s geoNaturalEarth1 projection and geoPath to draw land and interiors from a TopoJSON world atlas, while city coordinates from a CSV are projected and drawn as circles with a square-root scale mapped to population. The data comes from the Data Canvas Sense Your City Dataset.

Nov 3, 2021

Polished scatter plot with menus

This interactive scatter plot of the Iris dataset lets users switch between four flower measurements for both the x and y axes using ReactDropdown menus. The visualization uses React and D3 v5 to render SVG circles, with the d3.csv module loading data from a remote gist. Axis components generated with scaleLinear and explicit tick marks update dynamically as menu selections change, while hover tooltips display formatted values.

Nov 2, 2021

Scatter plot with colour

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus select which attributes appear on the x and y axes, while color distinguishes the three iris species. The visualization uses React with functional components, D3 v5 scales including `scaleLinear` and `scaleOrdinal` for mapping data to positions and colors, and renders marks as SVG circles. Axes are custom components built from D3 tick values, and the data loads asynchronously from a CSV file using `d3.csv`.

Nov 1, 2021

Menus with React

A React app renders a pet-selection menu with a labeled dropdown. The component tracks the selected animal in state and logs each change to the console. Options are defined in a static array and passed to a reusable `Dropdown` component, which builds a native `<select>` element with `<option>` children. The example uses React's `useState` hook and the ReactDOM `render` method, along with the component's `onSelectedValueChange` callback to update the selection.

Nov 1, 2021

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between four flower measurements. Two dropdown menus let users select which attribute is mapped to the x-axis and y-axis, dynamically updating the plotted circles and axis labels. The visualization is built with React and rendered as SVG, using D3 v5 utilities like `scaleLinear` for axes and `csv()` for data loading. Hovering over a point reveals its x-value via an SVG `<title>` tooltip.

Nov 1, 2021

React Starter

This example demonstrates a minimal React application that renders a simple "Hello react" message into the DOM. Built with the React and ReactDOM production builds from unpkg, the code defines an `App` functional component and mounts it to a root element using `ReactDOM.render`. The accompanying HTML page hides body margins and overflow for a clean, full-viewport display. It serves as a template for integrating React with other visualization libraries in the gallery.

World Map

This example displays a world map using the Natural Earth projection, rendering landmasses in teal against a light gray sphere with graticule lines. The visualization is built with React and D3 v5, using `d3.geoPath` and `geoNaturalEarth1` to project geographic features, while `topojson` converts the World Atlas dataset into GeoJSON. Country borders appear as thin interior lines, and the map loads asynchronously from a remote TopoJSON source.

Working with time

This line chart visualizes temperature readings over a week, with each point representing a measurement and a curved path connecting the sequence. The x-axis uses a time scale with day-of-week labels, while the y-axis shows temperature values. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `line`, and `curveNatural` to render the SVG. The data comes from a CSV file loaded via `csv()`, and tooltips display the full timestamp for each circle using `timeFormat`.

Iris Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width in the Iris dataset. The React and D3 v5 code uses `scaleLinear` to map data values to SVG coordinates, with custom `AxisBottom` and `AxisLeft` components rendering ticks and labels. Each flower is drawn as a circle with a `title` element providing a native browser tooltip. Data loads asynchronously via D3’s `csv` function from a remote GitHub gist.

Fork of Stylized Scatter Plot -- from video

This example shows a scatter plot of the Iris Dataset, mapping petal length against sepal width with points rendered as fixed-size circles. The visualization relies on React for component structure and SVG for rendering, while D3 v5’s `scaleLinear` and `extent` handle axis scaling and domain calculation. Axes are built from reusable React components, and each circle includes a native SVG `<title>` element for tooltips. Data loads asynchronously via D3’s `csv` parser, with numeric coercion applied to all measurement columns.

Sylised Bar Chart

This example shows a horizontal bar chart of the top ten countries by population in 2020, using rectangles scaled along the x-axis. The chart is built with React and D3 v5, rendering to SVG. The scales are created with `scaleBand` and `scaleLinear`, axes are drawn using custom components, and tooltips are provided via SVG `<title>` elements. Data is fetched from a CSV file using D3’s `csv` function, with population values formatted using D3’s `format` to display in billions.

Refactored Bar Chart

This bar chart displays the population of ten countries in 2020, using horizontal bars with countries labeled on the y-axis and population values on the x-axis. It is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map data to SVG rectangles, with axes rendered as React components. The data is loaded asynchronously from a CSV via `useData` and `csv`, and the chart updates after the data arrives.

Axes with React and D3

This example shows a horizontal bar chart of the top 10 countries by population in 2020, rendered as an SVG in a React component. D3’s `scaleBand` and `scaleLinear` position the bars and axes, while React generates the tick marks and axis labels as JSX elements. Population data loads from a CSV URL via `d3.csv`. The chart combines D3’s scales and data parsing with React’s state management and declarative rendering.

World population bar chart

This example shows a horizontal bar chart displaying the top ten countries by 2020 population estimates. The chart uses React state and effects to load and transform the data with `d3.csv`, then renders SVG rectangles scaled by `d3.scaleLinear` and positioned with `d3.scaleBand`. The data comes from the UN Population 2019 dataset, and the visualization updates asynchronously after loading.

Oct 30, 2021

Loading data with React & D3 #2

A pie chart renders the 148 named CSS colors by mapping each row of the source CSV to an equal‑sized slice. Built with React 16.9 and D3 v5, it uses `d3.csv` to load the data asynchronously, then `d3.pie` and `d3.arc` to generate the SVG paths. The fill color of each slice is taken directly from the `RGB hex value` column, creating a color wheel from the dataset’s own values.

Oct 30, 2021

Fork of Vega-Lite API Template

A scatter plot of the Auto MPG dataset shows vehicle time on the x-axis, miles per gallon on the y-axis, and weight encoded by color, with tooltips for temperature. The visualization is built using the Vega-Lite API, with `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` to define the encoding. Data is loaded via `d3.csv` from a Gist, and the chart is rendered as an SVG with custom axis styling from a config object. Tooltips are handled by the Vega-Tooltip handler.

Loading data with React and D3

This example demonstrates how to load and summarize a CSV dataset using React and D3. The app fetches a list of CSS named colors via `d3.csv` inside a `useEffect` hook, then conditionally renders either a loading message or a text summary. The summary displays the data size in kilobytes, row count, and column count, computed with `d3.csvFormat`. The visualization uses React state and hooks to manage the asynchronous data loading, while the final output is plain text rendered in a `<pre>` element.

CSS colors

This example demonstrates how to load and inspect a CSV file of CSS named colors using D3.js v7. It fetches a remote CSV dataset and displays the raw file size in kilobytes, the number of data rows, and the number of columns in a large-text HTML element. The code uses D3’s `d3.csv` for async fetching and parsing, and `d3.csvFormat` to calculate the string length. The page is styled with CSS, and the result is rendered as plain text inside a `<pre>` element.

Circle following cursor

A yellow circle follows the cursor's movement across an SVG canvas. The circle's position updates in real-time based on mouse coordinates captured by React's `onMouseMove` event handler. The application uses React state management through `useState` and `useCallback` to track the cursor position, while D3's `arc` function is imported but not directly utilized in the visible code. The rendering is handled entirely through React's declarative SVG elements.

Let's Make a Face

This example displays a grid of 80 yellow smiley faces, each rendered as an SVG using React components. The faces are constructed from separate reusable parts—a background circle, two eyes, and a mouth created with D3’s `arc` generator for the curved smile. Each face uses randomized eye radius values to introduce slight variation, while all other dimensions like eye offset and mouth width remain fixed. The code combines React’s component composition with D3 v7’s shape utilities, embedding the SVG elements through a `FaceContainer` that centers the drawing within the viewport.

div alignment

This example demonstrates how CSS Flexbox aligns nested divs along a shared baseline. A black background container holds two groups—a yellow left section with red, green, and cyan boxes, and a red right block—all arranged using `display: flex`, `flex-direction: row`, and `align-items: baseline`. The left group uses `justify-content: flex-start` and `align-content: flex-start` to pack the child divs tightly. Different heights and line-height values show how baseline alignment affects vertical positioning of text and block elements.

Oct 4, 2021