P

Peter Maida

@PeterMaidaRobot·32 public vizzes

Loading thumbnail…

Filtered Stacked Line Graph and Donut Graph of Deaths with Legend

This interactive visualization shows death counts across multiple categories, comparing firearm, suicide, and alcohol-related deaths over time using a stacked area chart. The visualization includes dropdown menus for filtering by sex, ethnicity, age group, and death type, though the current version only fully implements the death type filter. A donut chart displays proportional breakdowns of the selected data. The visualization uses React with D3 v5, implementing custom SVG rendering with axes, color legends, and natural curve interpolation for the stacked areas.

Loading thumbnail…

All Donut Chart Deaths

This visualization presents five donut charts comparing death statistics across different demographic and cause-based groupings. The data categorizes deaths by firearm, suicide, and alcohol-related causes, with breakdowns by sex and cause type. Each donut chart displays proportional segments using color-coded arcs, constructed with D3’s `arc` function and `d3.v5`, while the React framework manages component rendering as SVG elements. Labels appear outside each arc, and the data originates from a CSV file covering mortality records.

Loading thumbnail…

Stylized Donut Chart Deaths

This donut chart visualizes mortality data, breaking down firearm deaths, suicide deaths, and alcohol-related deaths for males and females. Three colored arcs represent each cause of death, with labels positioned around the circumference. The visualization uses React with D3’s `arc` generator to create the donut segments, calculating angles from proportional death counts. Data comes from a CSV file loaded via D3’s `csv` function, with values parsed and totaled by sex in the `Marks` component.

Loading thumbnail…

Stylized Donut Chart Population

This stylized donut chart visualizes the top 10 most populous countries as proportions of a circular ring, with each slice labeled by its population value. Built with React and D3 v5, it uses the `arc` generator from d3-shape to compute slice geometries based on population percentages, while data comes from the United Nations World Population Prospects 2019. The chart renders as SVG, applying a distinct color to each slice and positioning text labels with trigonometric calculations derived from the starting angle of each arc.

Loading thumbnail…

Donut Example Re-imagined 2 Final Week

This example shows an interactive pie chart built with React and D3 v5 that visualizes firearm, suicide, and alcohol-related death data from a CSV file. The chart displays a semi-circular arc for the mouth, while the pie slices represent data grouped by sex, with distinct colors from the `d3.schemeCategory10` palette. The code uses `d3.pie()` for the arc generation and `d3.arc()` for rendering, with a button to trigger data transformations. The visualization runs entirely in SVG, with data loaded asynchronously via `d3.csv` and rendered through React hooks and the D3 selection API.

Loading thumbnail…

Donut Example Re-imagined and Broken

This example re-imagines a standard D3 donut chart as a playful face, rendered as an SVG path that forms a mouth arc, while the pie slices remain unjoined and broken due to missing data-binding logic. The React component uses D3 v5’s `d3.pie` and `d3.arc` to compute and render arcs, with `d3.scaleOrdinal` for colors and `d3.format` for labels. Data comes from a CSV of firearm, suicide, and alcohol-related deaths, loaded via `d3.csv` in a custom `useData` hook.

Loading thumbnail…

React Starter with Pie

This example demonstrates a donut chart built with React and D3, displaying a small categorical dataset with five segments. It uses D3’s `pie` and `arc` functions to compute the angular positions and draw the SVG paths, while `scaleOrdinal` assigns a fixed color palette to each category. The chart is rendered inside a React component, with D3’s `select` and `append` methods managing the SVG elements directly within the React-rendered container. The code also includes a separate `useData` hook for loading CSV data, though the pie chart itself uses inline dummy data.

Loading thumbnail…

Copied Pie Chart with my Data

This pie chart displays the percentage of flight delays attributed to each airline, using color saturation to encode delay proportions. The tooltip reveals each airline’s delay percentage relative to the total delay of all flights. The visualization aggregates flight delay data from a Flight Delay Analysis Dataset, grouping delays by airline using `d3.nest()`. It renders SVG slices with `d3.pie()` and `d3.arc()`, applying a color scale via `d3.scaleOrdinal`, while custom hit-testing logic checks point-in-arc positions for interactivity.

Loading thumbnail…

Donut Example Re-imagined

A donut chart rendered with React and D3 v5 uses the `d3.arc` and `d3.pie` APIs to display five slices in a ring. A mouth-shaped arc sits at the center using a separate `mouthArc` path. A button labeled "Transform" regenerates random data through `generateData`, updating the chart via React state and D3 selection joins. The component also includes commented-out code for displaying formatted values using `d3.format`.

Loading thumbnail…

Donut Example

A donut chart displays five randomly generated numeric values as proportional arcs, with each slice labeled by its value in white text. The visualization updates its data on button press or when the data reference changes, demonstrating a React hook-based update pattern. Built with D3 v5 and React, the `Pie` component uses `d3.pie()` for arc generation, `d3.arc()` with configurable inner and outer radii, and a `scaleOrdinal` color scheme. SVG rendering occurs within a React component using `useRef` and `useEffect` hooks to manage the D3 selection lifecycle.

Loading thumbnail…

Filtered Stacked Line Graph of Deaths with Legend

This interactive visualization displays the breakdown of firearm, suicide, and alcohol-related deaths over time for specific demographic groups. Users can filter by sex, ethnicity, and age group using dropdown menus, and hover over the legend to highlight individual death categories. The stacked area chart renders with React and D3 v5, using d3's `area()`, `curveNatural()`, and scale functions to generate smooth SVG paths. Data comes from a CSV hosted on GitHub Gist.

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes death statistics by year, with each point representing a demographic group’s death count. The color legend encodes sex, and hovering over a legend item fades non-matching points while highlighting the selected category. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering. Data comes from a Gist CSV file, though sex, ethnicity, and age dropdowns remain non-functional.

Loading thumbnail…

Stacked Line Graph of Deaths with Legend

A stacked area chart tracks Firearm, Suicide, and Alcohol-Related deaths over time for total U.S. demographics. Three layered paths render with `d3.area()` and `curveNatural`, each filled with distinct colors and paired with a hover-able `ColorLegend`. This interactive legend dims non-selected layers via opacity. Built with React and D3 v5 in SVG, the visualization uses `scaleLinear` for axes and reads data from a GitHub gist CSV, though filtering menus remain non-functional.

Loading thumbnail…

Stacked Line Graph of Deaths

This stacked line graph shows the number of suicide, alcohol-related, and firearm deaths in the United States by year, rendered as layered area paths. The visualization uses React with D3 scales and the `area()` and `curveNatural` generators from d3-shape to create smooth, cumulative curves. SVG paths are colored red, green, and blue to represent each death type, with a color legend providing interactivity through hover states. The data comes from a CSV loaded using `d3.csv`, and the chart includes axes generated by custom React components.

Loading thumbnail…

Line Graph of Deaths

This visualization uses three natural curves to show annual counts of suicide, alcohol-related, and firearm deaths in the United States. The data is loaded via `d3.csv` from a GitHub Gist, and the React app uses `d3.scaleLinear`, `d3.line`, and `d3.curveNatural` to render SVG paths for each death type. Interactive dropdown menus for sex, ethnicity, age group, and y-axis death metric are present, though the README notes the filter logic is incomplete, so the displayed lines currently aggregate all demographics. A color legend for sex is also included but does not affect the rendered marks.

Loading thumbnail…

Line Graph with Interactive Color Legend

This interactive line graph tracks three categories of death rates—suicide, alcohol-related, and firearm deaths—across years using a single dataset from a gist. Three colored lines represent each cause, while an interactive color legend lets users hover to highlight one category and fade the others. The visualization is built with React and D3 v5, using SVG paths generated by `d3.line()` with `curveNatural` interpolation, and relies on React hooks like `useState` and `useCallback` to manage hover state and legend interactions.

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes death statistics by year and cause, with each point colored by sex using a red and blue ordinal scale. The React-based component uses D3 v5 scales for positioning axes and circles, rendering as SVG. A color legend on the right explains the sex encoding, while dropdown menus allow selecting different death metrics. The current implementation filters data by age group, though the README notes the sex, ethnicity, and age menus are not fully functional. Data is loaded from a CSV file via D3’s CSV parser.

Loading thumbnail…

Scatter Plot with Death Menu

This scatter plot visualizes death statistics across demographic categories, with blue and red circles representing male and female subjects respectively across years. The visualization uses React with d3.v5 scales to map Year on the x-axis and death counts on the y-axis, rendered as SVG elements. Interactive dropdown menus allow selection of sex, ethnicity, and age group filters, though only the age group filter currently functions. Data comes from a Gist CSV file containing firearm, suicide, and alcohol-related death counts.

Loading thumbnail…

Scatter Plot with X Y Menus

This interactive scatter plot displays U.S. mortality statistics, letting users choose which demographic attributes or death types to plot on the x- and y-axes via ReactDropdown menus. The code uses the d3.csv loader, d3.scaleLinear, and d3.extent to parse and scale data from a Gist, then renders SVG circles and axes using React components such as AxisBottom, AxisLeft, and Marks. Only points matching a hard-coded "Total" age group are visible, with all other circles rendered at zero radius.

Loading thumbnail…

Line Graph with Menus

A line graph displays mortality counts across multiple demographic categories, allowing users to explore relationships between variables. Interactive dropdown menus let viewers select which attributes appear on the X and Y axes, changing the visualization dynamically. Built with React and D3, the chart uses `scaleLinear` for axes, `csv` for data loading, and `ReactDropdown` for menu controls. Circles represent individual data points from a Gist dataset covering firearm, suicide, and alcohol-related deaths.

Loading thumbnail…

Independently Animated and Stylized Bar Chart

This interactive bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data. As the user moves the mouse across the visualization, three bars independently animate with random fluctuations in width, creating a stylized, kinetic effect. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` for axes and renders SVG rectangles whose widths are modified by randomized values on each mouse movement. The axis labels are formatted using D3's `format` function to display population values in billions.

Loading thumbnail…

Animated and Stylized Bar Chart

This visualization displays the top 10 most populous countries as an animated bar chart with a stylized, non-proportional aesthetic. Using React with D3 v5, the chart renders SVG bar marks via the `Marks` component and includes reusable `AxisBottom` and `AxisLeft` components. Moving the mouse triggers the `onMouseMove` handler, which randomly increments or decrements a `randomVal` state, subtly distorting each bar’s width. Data comes from the 2019 United Nations World Population Prospects, loaded via D3’s `csv` function, with populations scaled linearly and formatted using D3’s `format` utility.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data. The visualization uses React with SVG rendering, employing d3.scaleBand for the categorical y-axis and d3.scaleLinear for the population x-axis. The d3.csv loader fetches and formats the data, while d3.format converts population values into abbreviated tick labels like "1.4B". Custom React components construct the axes and rectangular marks, with each bar featuring a native SVG tooltip showing the precise population figure.

Loading thumbnail…

Danny Phantom Face

This interactive portrait of Danny Phantom uses React and D3 v6 to render a stylized face entirely with SVG primitives. The code constructs the head from a circle, adds polygonal hair and nose shapes, and uses D3’s `arc` generator for the mouth. Eye details—sclera, iris, and pupil—are layered circles, while eyebrow rectangles are rotated via SVG transforms. All coordinates scale relative to the browser window dimensions, producing a responsive cartoon illustration centered on the screen.

Loading thumbnail…

Danny Phantom Face Refactored

A stylized SVG portrait of Danny Phantom is rendered using React components, separating the face into modular pieces like eyes, eyebrows, hair, and mouth. The code constructs the image with basic shapes—circles, rectangles, and polygons—arranged through React’s JSX and positioned via coordinate offsets. D3’s `arc` generator creates the mouth path, while static coordinates define the hair and nose. The visualization demonstrates component-based composition within a React framework, using d3.v6 only for the arc calculation, and relies on full-window dimensions for the SVG canvas.

Loading thumbnail…

LGBTQI Country Laws CSV Data

This example loads the LGBTQI Country Laws dataset from a GitHub gist and displays summary statistics about the CSV file in a large text block. It shows the file size in kilobytes, the number of data rows, and the number of columns. The code uses d3.csv to fetch and parse the remote CSV, then applies d3.csvFormat and array properties to compute these metrics. An alternative commented approach demonstrates the same task using the Fetch API, async/await, and d3.csvParse, highlighting different asynchronous patterns in D3 v5.

Loading thumbnail…

Suicide, Firearm, Alcohol Deaths CSV Data

This example displays raw summary statistics about a CSV file containing suicide, firearm, and alcohol death data. It shows the approximate file size in kilobytes, the number of data rows, and the number of columns after loading and parsing the dataset with `d3.csv`. The page renders these three numbers as large text in a `<pre>` element. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, demonstrating different parsing methods.

Loading thumbnail…

COVID-19 Place of Death CSV Data

This example displays basic metadata about a COVID-19 place-of-death CSV dataset, showing file size in kilobytes, row count, and column count as large text. It loads the remote CSV using d3.csv, then computes the formatted size with d3.csvFormat, while also counting rows and columns from the parsed array. The code includes commented alternatives using fetch, async/await, and d3.csvParse for the same task. The visualization is minimal, focusing on data-loading mechanics rather than graphical output, with the source data fetched from a GitHub gist.

Loading thumbnail…

Stacked Line: Deaths by Suicide, Firearm, Alcohol

This stacked bar visualization displays total deaths from suicide, firearms, and alcohol from 2003 to 2017, revealing an upward trend and consistently higher alcohol-related deaths than suicide, which exceed firearm deaths. It uses vega-lite-api with d3.csv to load data from a Gist-hosted GitHub raw file, rendering bars with encoded time, quantitative total, and nominal type fields. The visualization applies a custom color scheme and styled axes from a config object, with a React-based bundle and tooltip support via vega-tooltip.

Loading thumbnail…

LGBTQI Country Laws

This visualization shows the number of LGBTQI-related laws across continents, distinguishing between legal all-genders protections and age-of-consent equality through colored bars. The bar chart uses a count aggregation to display how many countries in each continent have specific legal provisions, with each bar representing a count of laws categorized by the continent and legal status. Built with vega-lite-api, the code loads CSV data from a GitHub Gist, calculates a combined total of laws using a D3 transform, and renders the chart with vega-lite, vega, and vega-tooltip. The visualization is configured with custom axis and label styling for improved readability.

Loading thumbnail…

COVID-19 Deaths by Place of Death and Age

This visualization shows COVID-19 deaths grouped by age and place of death, using a bar chart where each bar’s height represents the count and color encodes the location. The code builds the chart with the vega-lite-api, fetching data from a CSV via d3.csv. It renders an SVG view, with axes styled through a custom config to improve readability. The data originates from a public Gist detailing death counts across age and place categories.

Loading thumbnail…

Deaths by Suicide, Firearm, Alcohol

This visualization displays annual firearm suicide deaths from 2003 to 2017, grouped by sex, with each bar’s height representing death counts. The view uses the Vega-Lite API to encode the Year as a temporal field on the x-axis and Firearm Deaths as a quantitative field on the y-axis, while color distinguishes male and female data. The underlying data is loaded via d3.csv from a public Gist, and the chart is rendered as an SVG using vega-lite-api with vega-tooltip for interactive hover details. Bar opacity and size are fixed at 0.5 and 30 pixels, respectively.