Anthony Zornig

Points on a Map

This map displays world cities as glowing gold points, with point size proportional to population using a square-root scale. Landmasses appear in muted brown, interior borders in blue-gray, and a graticule overlays the sphere. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath` for shapes, and `geoGraticule` for the grid. City coordinates and populations load from a CSV via D3’s `csv` parser, while world topology comes from a TopoJSON file processed with `topojson`’s `feature` and `mesh` functions.

Feb 14, 2022

Fork of Interactive pie and bar

This interactive dashboard combines a histogram with a pie chart and legend to explore categorical frequency data for different states. Hovering over a bar filters the pie chart and legend to display the distribution of low, mid, and high categories for that state, while moving the mouse away resets the view. Built with React and D3.js v3, it uses `d3.select` for SVG creation, `d3.scale.ordinal` with `rangeRoundBands` for the x-axis, `d3.scale.linear` for the y-axis, `d3.layout.pie` for the pie slices, and `d3.transition` for animated updates. The SVG elements also respond to mouseover and mouseout events, and the bar color changes to blue on hover.

Jan 31, 2022

Fork of Interactive Visualization (Brush) - Earthquake Data

This interactive visualization explores earthquake data from the 19th century through three coordinated views: a bar plot of total deaths by region, a world map with circles sized by Richter magnitude, and a scatter plot relating year, magnitude, and death toll. A brush on the scatter plot filters data across all views, while tooltips display country names on the map alongside a legend for magnitude. The code uses D3 v7 APIs including d3.csv, d3.scaleBand, d3.scaleLinear, d3.geoMercator, d3.geoPath, and d3.brushX to render SVG with animations, sourcing data from a GitHub gist.

Fork of Chart

This example visualizes crime cases against women in India, combining a choropleth map with two interactive donut charts. The main map displays state-level data for a selected year and crime type, while the donut charts break down totals by year and by category. Users switch between options via dropdown menus, triggering animated transitions that update the visualization. Built with D3 v7, the map uses `d3.geoPath` with TopoJSON for India’s state boundaries, while the donut charts employ `d3.arc` and `d3.pie` with smooth tween animations. The dataset comes from a CSV file hosted on GitHub.

Fork of Fork of Brush, Trendline, Legend, Linechart, Barchart

Two linked line charts, built with D3 v5, visualize EPA groundwater monitoring data from two observation wells. The main chart displays a trendline calculated with a least-squares regression, while a smaller brush chart allows users to select a date range. The brush selection filters the data and updates the trendline and its equation in the main chart, with a color legend distinguishing the wells.

Fork of Untitled

Twenty colored rectangles bounce and slide within a fixed SVG canvas, colliding with each other and the boundaries. The animation runs on a `d3.forceSimulation` with custom forces for rectangular collision and bounding-box containment, while a drag handler lets users move any rectangle. Each particle has a random size, velocity, and direction, with a distinct color from `d3.schemeCategory20`. The custom `rectCollide` force uses a `d3.quadtree` to efficiently resolve overlaps.

Students by wanted city

This interactive visualization combines a world map with a time-series histogram to explore migrant deaths and disappearances. The map displays circles sized by the total dead and missing for each location, using a square root scale, while the histogram shows monthly totals. Users can brush over the histogram to filter the map’s data. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map rendering, and `brushX` for filtering. Data comes from the Missing Migrants Project CSV.

Multiple Views with Brushing

A geographic map of the world displays cities, with circles sized by the "Total Dead and Missing" count. A time-series histogram at the bottom allows brushing to filter the map. The brush selection, implemented with `d3.brushX`, dynamically updates the visible data points. This example uses `d3.geoNaturalEarth1` projection and SVG rendering within a React framework, pulling from a CSV of missing migrant data.

Fork of Color and Size Legends - Component Experiment

This fork of the D3.js legend component experiment passes parameters into chart functions by assigning properties directly onto the functions themselves, following the reusable charts pattern. It renders an SVG with two legends: a color legend using `d3.scaleOrdinal` for fruit categories and a size legend built with `d3.scaleSqrt` for numeric ticks. The code uses `selection.call()` to invoke each component, with styles defined in CSS for tick text and circle strokes.

Oct 17, 2021

Fork of Color and Size Legends - Component Experiment

This example shows two legends rendered side-by-side in an SVG: one for ordinal color scales and one for square-root size scales. The color legend maps fruit categories to distinct fills, while the size legend displays circular marks scaled by numeric tick values. Both legends are built as reusable component functions that receive parameters via `Object.assign` properties, following the “Towards Reusable Charts” pattern. The code uses d3.v5 APIs including `scaleOrdinal`, `scaleSqrt`, and selection methods like `.call()`, `.enter()`, and `.merge()` to bind data and update the visualization.

Oct 17, 2021

Fork of Moon Calendar 2021

This visualization displays the moon’s phase for each day of 2021, arranged as a calendar grid with months on the vertical axis and days on the horizontal axis. Each moon is rendered via `d3.geoPath` and `d3.geoOrthographic` with circles and paths showing the illuminated portion based on a simplified lunar phase calculation from ben-daglish.net. Clicking anywhere on the SVG animates a red ring to highlight the current day using a `transition` with duration and stroke attributes, while axes are built with `d3.axisTop` and `d3.axisBottom`.

Oct 16, 2021

Fork of Fork of Mountains on a Map-1

This visualization displays a world map with cities over 50,000 inhabitants, using triangular "mountain" marks to encode population as height and country as color. A natural Earth projection renders landmasses, graticules, and borders, with city data from a Simplemaps CSV. The React-based code uses D3 v5’s geoPath, geoNaturalEarth1, and scaleLinear for sizing, while scaleOrdinal assigns hues from a color scale; interactive tooltips appear on hover.

Oct 16, 2021

Fork of World Countries Tree

This visualization presents the hierarchical structure of world countries as an interactive tree diagram, organized by continent and subregion before listing individual nations. Using D3 v5’s `tree` layout and `linkHorizontal` path generator, the SVG renders curved links and text labels, with font size scaling by node depth. Pan and zoom functionality is enabled via the `zoom` behavior, allowing users to explore the full dataset loaded from `data.json`. The data is drawn from a static JSON file, and the styling employs the Playfair Display font with teal link strokes.

Oct 15, 2021

Fork of Bowl of Fruit - Hover to Select

Five circles represent apples in an SVG bowl, rendered with d3 v5 via the `fruitBowl` module. Hovering an apple selects it with a black stroke, using `mouseover` and `mouseout` events that call `setSelectedFruit`. The `scaleOrdinal` color and radius scales map fruit types to red or yellow and sizes. Animated `transition` calls adjust circle positions and radii over one second, while `exit` transitions shrink removed fruits; timers replace an apple with a lemon and remove fruits.

Oct 14, 2021

Fork of Missing Migrants Date Histogram

This fork of the Missing Migrants visualization is a date histogram that displays the total number of dead and missing migrants per month. The SVG bars are rendered using React components, with axes built from custom D3.js functions. The code leverages `d3.bin` to group data into monthly bins and `d3.sum` to aggregate the values within each bin. The visualization reads from a JSON data source and uses D3's scale functions for the time-based x-axis and linear y-axis.

Oct 11, 2021

Axis with React & D3

A horizontal bar chart displays the ten most populous countries for 2020, using UN population data loaded as CSV via d3.csv. The React component manages state with useState and useEffect, while D3’s scaleBand and scaleLinear compute the y- and x-axis positions. SVG elements are generated directly in JSX, with custom tick marks rendered from xScale.ticks() and text labels using the band scale’s domain. Each bar is a rectangle whose width maps population via xScale, and the chart updates after data asynchronously arrives.

Oct 11, 2021

Fork of Ordinal Scatter Plot

This fork of an ordinal scatter plot displays the top 10 most populous countries in 2018, with population size on the x-axis and country names on the y-axis. Using d3.scaleLinear and d3.scalePoint, the code maps data from a CSV file to circles, with d3.axisBottom and d3.axisLeft rendering grid lines and labels. The SVG chart applies a custom tick formatter to abbreviate large numbers, and data originates from the United Nations World Population Prospects 2017 estimate.

Oct 9, 2021

Fork of World Population Area Chart

This visualization shows world population growth over time as an area chart, with the x-axis representing years and the y-axis showing population in billions. The data comes from a CSV file loaded via `d3.csv`, with population values parsed as numbers and years converted to `Date` objects. The chart uses `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.area` with a `curveBasis` curve to generate the filled path rendered as SVG.

Oct 9, 2021

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 with an SVG renderer to draw horizontal bars, a linear scale for population, and a band scale for country names. The axes are customized with tick formatting that abbreviates large numbers, and gridlines are drawn via the x-axis. Data is loaded from a CSV file using the `d3.csv` method, with population values multiplied by 1000 for display.

Oct 8, 2021

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization links a world map of migrant deaths with a time-series histogram. The map uses a natural Earth projection and circles sized by the total dead and missing, while brushing the histogram filters the map's data. Built with React and D3 v5, it uses `geoNaturalEarth1`, `scaleSqrt`, `bin`, and `brushX` for linked brushing. The underlying data comes from the Missing Migrants Project, and the map includes land, graticule, and interior boundaries from the World Atlas TopoJSON.

Fork of Missing Migrants Multiple Views

This interactive visualization combines a world map and a time-series histogram to explore migrant deaths and disappearances. The map uses a natural Earth projection with graticules, rendering circles scaled by the square root of the total dead and missing, filtered by a brush selection on the histogram below. The histogram bins reported dates by month, summing fatalities per bin, and uses d3.brushX to update the map. Data comes from a CSV of the Missing Migrants Project, with country boundaries from World Atlas TopoJSON, all built with React and d3.v5.

Fork of Points on a Map

This interactive visualization plots missing migrant incidents from a 2019 global dataset on an SVG world map. The map uses d3.geoNaturalEarth1, d3.geoPath, and topojson to render landmasses, graticules, and interiors, while scaled circles (d3.scaleSqrt) encode total deaths and missing persons per location. The React-based bubble map displays the raw geographic distribution, with a temporal histogram component available for analyzing casualty counts by reported date. The visualization is built with d3.v5 and React, loading data via d3.csv and world atlas GeoJSON.

Fork of Missing Migrants Date Histogram

This histogram displays the total number of dead and missing migrants per month, using data from the Missing Migrants Dataset. It aggregates individual incident records into monthly bins, with bar heights representing the summed fatalities and disappearances. The visualization is built with React and D3 v5, using d3.bin to create time-based bins and d3.sum to calculate monthly totals. The SVG chart includes custom axis components and tooltips that reveal exact values on hover.

Missing Migrants

This visualization maps the global distribution of migrant deaths and disappearances using a natural Earth projection rendered with SVG. Each incident appears as a golden circle, with its radius scaled by the square root of the reported total dead and missing, overlaid on a dark world map with graticules and country borders. The example combines React for component state and rendering, D3’s `geoNaturalEarth1` and `geoPath` for geographic projections, and `topojson` for world atlas topology. Data comes from a CSV of Missing Migrants Project records, loaded via D3’s `csv` parser.

Interactive Color Legend

A scatter plot of the Iris dataset shows petal length against sepal width, with points colored by species. Hovering over a species in the interactive color legend fades all other points to 20% opacity, highlighting only the selected group. The visualization is built with React and D3 v5, using `scaleOrdinal`, `scaleLinear`, and SVG circles, with data loaded via `d3.csv` from a gist.

Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. A color legend categorizes the three iris species, and hovering over a legend item highlights the corresponding points while fading the rest. The visualization uses React with ReactDOM, D3 v5’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and renders SVG circles with tooltips. Data is loaded asynchronously via `csv`, and interactivity is managed through React state hooks.

ScatterPlot with Color

This interactive scatter plot visualizes the Iris dataset, displaying relationships between user-selected attributes via dropdown menus. The chart uses D3.js scaling functions and SVG circles, with color encoding by species through an ordinal color scale. Built with React, the visualization updates axes and marks dynamically, leveraging D3's `csv` parser for data loading and `scaleLinear` for axis construction.

Polished Scatter Plot with Menues

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus let viewers select which attributes to plot on the x and y axes, with the chart updating immediately. The visualization uses D3.js's `scaleLinear` and `extent` functions for axis scaling, rendered as SVG circles via React components. The interface includes labeled axes, tooltips showing formatted values, and uses the Poppins font for a polished appearance.

Menues with React

This example demonstrates a simple pet-selection dropdown menu built with React. It shows how a controlled component manages user input through the `useState` hook, displaying the selected value in the console. The `Dropdown` component receives an array of pet options and a callback to update the selection state. The code uses React 16.9, ReactDOM, and the `Dropdown` component with a native HTML `<select>` element, rendering options dynamically from a hardcoded list of pets.

React Starter

This example displays a minimal React application that renders the text "Hello React" on a blank page. The code imports React and ReactDOM, defines a simple functional component called `App`, and mounts it to the root DOM element using `ReactDOM.render`. It loads React and ReactDOM from external UMD builds via a CDN in the HTML file, while the JavaScript logic is bundled separately as `bundle.js`. No data or interaction is involved; it serves as a bare-bones starting point for integrating React with a visualization library.

world map

This visualization displays a world map using a natural Earth projection, with landmasses, country borders, graticules, and a sphere outline rendered in muted colors. The map is built with React and D3, using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw geographic features. Country and land data come from the World Atlas TopoJSON file, processed with `feature` and `mesh` from TopoJSON. The SVG output is generated declaratively through React components, with each map element styled via CSS classes.

Stylitzed ScatterPlot

This scatterplot visualizes the Iris dataset, plotting sepal length against sepal width. It uses React with D3 v5 scale functions, specifically `scaleLinear` and `extent`, to map data values to SVG coordinates. The chart includes custom axis components that render tick marks and labels, with Poppins typography and a teal mark color. The data is loaded asynchronously via `d3.csv` from a GitHub gist, and each data point is rendered as a circle with a tooltip showing the formatted x-value.

Stylitzed Bar Chart

A stylized bar chart displays the top 10 most populous countries from UN population data. The React app loads CSV data via `d3.csv`, then uses `scaleBand` and `scaleLinear` to map countries and populations. SVG bars, styled with a teal fill, include tooltips formatted with `d3.format`. The Poppins font and minimal gridlines give the chart a clean, modern aesthetic.

Refarctored Bar Chart

This example visualizes the population of the top 10 countries in 2020 using a horizontal bar chart. The bars are scaled proportionally to population values, with country names displayed on the vertical axis and population numbers on the horizontal scale. Built with React and D3 v5, the code loads CSV data via `d3.csv`, uses `scaleBand` and `scaleLinear` for axes, and renders SVG rectangles for each bar. The React component structure separates axes and marks into distinct modules, with data fetched asynchronously using a custom `useData` hook.

The Margin Convention

This example demonstrates the Margin Convention by rendering a horizontal bar chart of the ten most populous countries from the 2019 UN Population dataset. The visualization uses React state to manage data loading via `d3.csv` and translates an SVG `<g>` element by the margin values to position the chart inside a 960×500 viewport. Bars are drawn with `scaleBand` for the y-axis (country names) and `scaleLinear` for the x-axis (population), with each rectangle’s width proportional to the data value. The code explicitly separates the outer SVG dimensions from the inner plotting area using the defined margin object.

Fork of Fork of Rendering Data with React

This bar chart displays the top 10 countries by projected 2020 population from a CSV dataset. It uses React’s `useState` and `useEffect` hooks to fetch and parse the data with `d3.csv`, then maps the data to SVG rectangles. D3’s `scaleBand` positions bars on the y-axis, while `scaleLinear` scales the x-axis based on population values from `d3.max`. The visualization is rendered using `ReactDOM`, producing generic colored rectangles without labels or axes.

Fork of Rendering Data with React

A fork of "Rendering Data with React" presents a pie chart visualization of CSS named colors. The circular chart is drawn using D3's `arc` and `pie` functions within a React component, with each slice filled by its corresponding hex color value. The data is loaded asynchronously from a CSV file via D3's `csv` utility, and React's `useState` and `useEffect` hooks manage the state. The visualization renders on an SVG canvas centered within a 960 by 500 pixel area.

Rendering Data with React

This example visualizes CSS named colors by rendering each one as a horizontal stripe, creating a full-width color spectrum from a CSV dataset. The code loads the data using `d3.csv`, stores it in React state with the `useState` and `useEffect` hooks, and displays a loading message until the data arrives. Once loaded, it maps over the array to produce styled `<div>` elements whose background colors come from the `RGN hex value` column, using React’s declarative rendering approach with `ReactDOM.render`.

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting array values against props4 as bar marks with a tooltip showing props2. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries, configures axis styling with dark labels and yellow ticks, and uses D3’s csv loader to fetch remote data. The visualization renders full-window with SVG output, enabling interactive tooltips via Vega-Tooltip.

Loading Data with React & D3

This example demonstrates how to combine React state and D3’s data-loading utilities in a simple data summary application. The component fetches a CSV file from a GitHub gist using the `csv` method from d3.v5, storing the parsed result in React’s `useState` hook. While the data is pending, the interface displays “loading”; once resolved, it computes and presents the file size in kilobytes, row count, and column count via `d3.csvFormat` and the data’s `columns` array. The implementation uses `useEffect` and `useCallback` for lifecycle management, with ReactDOM rendering the final message as large, styled text.

Loading & Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data by displaying key statistics about the dataset: its size in kilobytes, the number of rows, and the number of columns. It uses D3 v5’s `d3.csv` method to fetch and parse the data from a GitHub Gist URL, then formats the statistics into a readable message using `d3.csvFormat`. The result is rendered as large text inside a `<pre>` element styled with CSS. The code also includes an alternative commented-out approach using `fetchText` and `d3.csvParse`.

Mouse Follower

A smiling face follows the mouse cursor across an SVG canvas, responding instantly to pointer movement. The example demonstrates a minimal React integration with D3, using React's `useState` and `useCallback` hooks to track mouse coordinates and re-render the circle's position. Rendered as a single SVG circle, it relies on D3 v5's `arc` import, though the visible shape is a simple circle rather than an arc. The code pairs React 16.9 with d3.min.js, updating the circle's `cx` and `cy` attributes via React state on every mousemove event.

Fork of Loading and Parsing CSV Data

This visualization demonstrates the size and structure of a CSS Named Colors CSV dataset by displaying its file size in kilobytes, row count, and column count in large text. The example highlights two approaches to loading data: using the D3.js `d3.csv` function, and an alternative method with JavaScript's native `fetch`, `async`, and `await`, along with `d3.csvParse`. The data originates from a GitHub Gist containing named CSS colors, and the output is rendered into a preformatted HTML element.

Smiley Face Part V

This example displays a grid of eighteen randomly generated smiley faces, each rendered as an independent React component. The faces vary in stroke width, eye position and radius, and mouth thickness and curvature. The visualization uses React with D3’s `arc` generator to create the mouth paths, while SVG circles compose the background and eyes. All faces share the same center point within a 160×160 viewport, and the code relies on `Math.random()` to produce each face’s unique attributes.

Fork of Smiley Face Part III

This example draws a smiley face using React and D3 version 5. The face consists of a yellow circle for the head, two black circles for the eyes, and a mouth rendered as an arc path. The code defines the head, eye, and mouth dimensions as constants, then uses React to create SVG elements and the D3 `arc` generator to compute the mouth’s path. The `stroke-width` attribute is set via JSX, and the entire group is centered using a transform translation. The visualization is rendered into the DOM via `ReactDOM.render`.