N

npelliccia

@npelliccia·31 public vizzes

Loading thumbnail…

Missing Migrants Multiple Views wtih Brushing

This interactive visualization combines a bubble map and a time-series histogram to explore global migrant deaths. The map uses D3's `geoNaturalEarth1` projection and `geoPath` to render landmasses, with circle size scaled by the square root of the total dead and missing. A brushable date histogram, built with `scaleTime` and `histogram`, allows users to filter the map by date range, dynamically updating the displayed data. Both views are implemented as React components using D3 scales and SVG rendering.

Loading thumbnail…

Missing Migrants Multiple Views

This visualization presents recorded incidents of missing migrants through two coordinated views. A bubble map uses a natural Earth projection with graticules to plot incident locations, where circle size encodes the total dead and missing count via a square-root scale. Below, a histogram bins incidents by reported date, summing casualties within monthly intervals. Both views render as SVG using React components and D3 v5 APIs, including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `scaleTime`, and `histogram`. Data comes from a CSV of global missing migrant incidents, while country boundaries come from the world-atlas TopoJSON dataset.

Loading thumbnail…

Missing Migrant Data Part 2

This visualization aggregates missing migrant incidents by month, displaying the total number of dead and missing individuals as vertical bars over time. The histogram uses d3.bin with timeMonths thresholds to group reported dates, while d3.scaleTime and d3.scaleLinear map the temporal and count axes. The React-based SVG rendering relies on d3.csv for data loading from a subset of the Missing Migrants Project dataset, with tooltips exposing exact monthly totals via SVG title elements.

Loading thumbnail…

Missing Migrants on a Map

This visualization displays a world map with circles representing missing migrants, where circle size corresponds to the total number of dead and missing individuals. Using React to render SVG marks, the code employs the D3 library's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to draw the sphere, graticules, landmasses, and interiors. Data is loaded from a CSV file containing migrant incident coordinates. Circle radii are determined via a square-root scale mapping the “Total Dead and Missing” values.

Loading thumbnail…

Missing Migrant Data Part 1

This example shows a scatter plot of total dead and missing migrants over time in 2019, with each point representing a reported incident. The visualization uses React to render SVG circles and D3 v5 scales (scaleTime, scaleLinear) to map date and counts. Axes are custom components built with D3 tick rendering, and data loading uses the d3.csv function.

Loading thumbnail…

Population Densities on a Map

A world map displays population densities of cities as semi-transparent blue circles, with circle size proportional to population using a square root scale. The map uses a Natural Earth projection with land shapes, graticules, and country interiors rendered as SVG paths. Built with React and D3 v5, the visualization loads geographic data from TopoJSON and city data from CSV, using `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for map geometry and `d3.scaleSqrt` for encoding population values.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting petal length against petal width, with each species represented by a distinct color. A legend on the right allows users to hover over a species name, which highlights that species' data points while fading all others, emphasizing comparisons between groups. The visualization is built using React, D3’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and renders marks as SVG circles with native `<title>` tooltips.

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the iris dataset, showing the relationship between petal length and petal width, with points colored by species. The D3.js scaleLinear function maps the dimensions to the SVG canvas, while scaleOrdinal assigns categorical colors. The React-based code renders SVG circles as marks, with a custom ColorLegend displaying the species categories. Data is loaded from a CSV file using the d3.csv function.

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal width against petal length for individual flowers. Each circle is colored by species using a D3 ordinal color scale, with a tooltip revealing the petal length on hover. The visualization is built with React and rendered as an SVG, using D3’s scaleLinear for axes and scaleOrdinal for categorical colors. Axis components and data marks are structured as modular React components, and the dataset is loaded via D3’s csv parser.

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the iris dataset, mapping petal length on the x-axis and petal width on the y-axis. The SVG rendering uses React components to build the axes and data marks, with circles representing individual flower measurements. The code leverages d3.axis functions indirectly through custom AxisBottom and AxisLeft components, while d3.scaleLinear handles the spatial scaling and d3.extent computes the domain. Tooltips are implemented using native SVG `<title>` elements, and the plot is styled with the Poppins font and a teal color scheme.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower attributes to display on the x- and y-axes via two dropdown menus. The SVG rendering uses React components with D3 scales (d3.scaleLinear) and axes, while the raw CSV data is loaded asynchronously using d3.csv. Points are drawn as circles with hover tooltips showing formatted values.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot of the iris dataset lets users explore relationships between four numeric attributes (sepal length/width, petal length/width) using two dropdown menus to select which attribute is plotted on each axis. The visualization uses React with D3 v5 for computing linear scales, rendering SVG axes and marks, and formatting axis tick labels. The scatter plot data loads from a remote CSV file via D3’s `csv` function. Changing a dropdown instantly re-scales the axes and updates the plotted points, with hover tooltips showing the x-axis value.

Loading thumbnail…

Menus with React

This example demonstrates how to build interactive dropdown menus using React, showing a pet selection interface that updates its state as the user chooses an option. The code uses React’s `useState` hook to manage the selected value and a custom `Dropdown` component that renders a native HTML `<select>` element. It leverages ReactDOM’s `render` method to mount the app, with options defined as a static array of pet objects. The example highlights React’s component-based approach for handling user input and state management without external visualization libraries.

Loading thumbnail…

React Starter Code

This example shows a minimal React application that renders the text “Hello React” inside a web page. The code imports the `react` and `react-dom` libraries and defines a simple `App` component that returns a `div` element. It then uses `ReactDOM.render` to mount this component into the `#root` div referenced in the HTML file. The HTML loads React and ReactDOM from unpkg CDN libraries, and the app’s behavior is limited to displaying the static greeting.

Loading thumbnail…

World Map

A choropleth-style world map renders landmasses in teal on a light gray sphere, with interior country borders highlighted in a brighter cyan. The visualization is built with React and D3, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to draw the sphere, graticule, land, and interior boundaries. Geographic data comes from the `world-atlas` TopoJSON source, processed via `topojson.feature` and `topojson.mesh`. The SVG output is styled with the Poppins font and custom CSS classes.

Loading thumbnail…

Stylized Line Chart

This interactive line chart visualizes weekly temperature recordings in San Francisco over time, presenting temperature on the y-axis and time on the x-axis. While the code includes a commented-out circle rendering option, the active visualization displays only a smooth, natural curve through the data points using the `line` and `curveNatural` APIs from d3. The chart is built with React components, using d3’s `scaleTime` and `scaleLinear` for axes and `extent` for domain scaling. Custom styled axes and a Poppins font create a minimal, clean aesthetic.

Loading thumbnail…

Working with Time

This example visualizes temperature measurements in San Francisco over a week using a scatter plot. Each circle represents a temperature reading plotted against time on the x-axis and temperature on the y-axis, with a tooltip revealing the exact timestamp on hover. Built with React and D3 v5, the chart uses `scaleTime` and `scaleLinear` for axes, while `csv` loads the external dataset. The SVG rendering leverages custom components like `AxisBottom`, `AxisLeft`, and `Marks` to construct the visualization, styled with the Poppins font.

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the population of ten countries for 2020, with horizontal bars ranked vertically. The visualization uses React to render SVG elements, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a CSV file via D3’s `csv` function, then formatted with D3’s `format` for tick labels, using the ’B’ suffix for billions. Bars include a native SVG `<title>` element for tooltips, while the Poppins typeface and custom tick styling give the chart a refined, minimalist appearance.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the top ten countries by population in 2020, fetched from a CSV file via `d3.csv` and rendered as SVG using React. The chart employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. A bottom axis renders grid lines and tick labels, while a left axis displays country names. Refactored into separate components (`AxisBottom`, `AxisLeft`, `Marks`), it demonstrates a modular approach to building interactive data visualizations with React and D3 v5.

Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart of 2020 population estimates for ten countries, rendered as SVG from React components that directly call D3 scales and tick functions. It loads CSV data from a GitHub gist using `d3.csv` and a row-conversion function, then builds a band scale for country names and a linear scale for population values. Tick marks and labels for the x-axis are generated manually from `xScale.ticks()`, while y-axis labels use the band scale’s domain, and rectangles are drawn with computed widths and heights.

Loading thumbnail…

The Margine Convention

A horizontal bar chart displays the ten most populous countries for 2020, with each country's bar length proportional to its population. The visualization loads population data from a CSV file hosted on GitHub and renders the chart as an SVG. The React application uses D3's `csv` parser, `scaleBand`, `scaleLinear`, and `max` functions to process the data and map values to bar dimensions. Bars are drawn as `rect` elements within a transformed SVG group, sized according to the computed scales.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a bubble chart of population by religion across countries, using circle size to encode the population values. The data comes from the UCI Auto MPG dataset via a Gist, loaded asynchronously with `d3.csv`. The chart is built using the Vega-Lite API (`vl.markCircle`), which registers vega and vega-lite libraries, applies a custom dark-themed config, and renders the SVG output to the full window with a tooltip handler.

Loading thumbnail…

Loading Data in React using D3

This example demonstrates how to load external CSV data into a React component using D3 utilities and React state. The application fetches a CSS named colors dataset from a GitHub gist via `d3.csv` and stores the parsed result in React’s `useState` hook, triggered by `useEffect`. While loading, the interface displays the text “Loading…”; once the data arrives, it calculates and shows the file size in kilobytes, the row count, and the column count using `d3.csvFormat` and the dataset’s metadata properties. The code relies on React 16.9 hooks and D3 v5.

Loading thumbnail…

Loading Data with React and D3

A React component uses D3 and React state to manage data loading and rendering. The `useState` hook stores the data, while event handlers update mouse coordinates. The SVG renders a single circle that follows the cursor across a 960-by-500 canvas. The example demonstrates integrating React's declarative rendering with D3's data utilities in a minimal interactive visualization.

Loading thumbnail…

Parsing CSV data with D3

This example demonstrates the basic mechanics of loading and parsing a CSV dataset with D3. It fetches a remote file of named CSS colors and displays summary statistics about the parsed data in large text. The code uses `d3.csv` to retrieve and parse the data asynchronously, then calls `d3.csvFormat` to measure the raw size in kilobytes. It reports the total number of data rows and the count of columns from the parsed array, showing how D3 structures tabular data as an array of objects.

Loading thumbnail…

using D3 arcs

This example uses D3 arcs to render every named CSS color as a single wedge in a full circle, creating a color wheel from the CSS named colors CSV dataset. The React app loads the data with d3.csv, then uses d3.pie() and d3.arc() to compute the path geometry. Each path’s fill is set directly from the dataset’s RGB hex value column, producing a dense, evenly partitioned ring of colors rendered as SVG inside a React component.

Loading thumbnail…

CSS Named Colors - Rendering Data with React

This example displays all 148 CSS named colors as stacked horizontal bars, loading the data from a GitHub-hosted CSV using d3.csv. The React application stores the parsed data in state with useState and useEffect, then maps each row to a div whose backgroundColor is set to the RGB hex value from the CSV. Each bar is rendered at a fixed width of 960px and 3px height, creating a continuous color spectrum. The visualization demonstrates React’s declarative rendering combined with D3’s data-loading utilities, showing how CSV data directly drives DOM styling.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using the D3 `csv` function within a React application. It fetches a gist containing CSS named colors and renders each row as a 100x100 pixel square with its background color set to the `RGB hex value` from the data. The component initially displays a "Loading..." message until `setData` is called, then maps over the parsed array to create the color swatches. The code uses React hooks (`useState`, `useEffect`) and imports `csv` from `d3`.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The React component uses the `useState` and `useCallback` hooks to track mouse coordinates from `onMouseMove` events, then passes those coordinates to the circle's `cx` and `cy` attributes. The visualization is rendered with ReactDOM into a 960×500 SVG viewport.

Loading thumbnail…

Smiley Face Part 1

Nine randomly placed smiley faces display varied facial features, each generated by reusable React components that compose circles and an arc path. The code uses `d3.arc` to draw a mouth, while `d3.range` produces a 3x3 grid of faces, with random values for stroke width, eye offsets, eye radius, and mouth dimensions. All faces render as SVG within a translucent green background circle, using React's component hierarchy and D3's utility functions for geometry and iteration.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 version 6 setup: it renders the text “Hello D3 version 6” in the center of the page using a 13em font size. The code imports the `select` function from the `d3` module and calls `select('body').text(...)` to insert the string into the HTML body. The page loads D3 v6 from a CDN and references an external `bundle.js` script, which contains the imported JavaScript logic.