jbruzzo

Humidity histogram

This histogram shows the distribution of daily humidity levels in 2016. The chart uses twelve bins to display the frequency of days across the humidity range, with a dashed line marking the mean humidity and its corresponding label. Built with React and D3 v5, the code loads JSON weather data, calculates histogram bins using the d3.histogram API, and renders the SVG output as an accessible figure with region labels and keyboard navigation support.

Nov 22, 2022

Starter Template

This example shows a histogram of humidity measurements from weather data, with bars colored cornflower blue and a maroon dashed line marking the mean humidity. The visualization is built using D3 v5 and renders to SVG, using `d3.histogram` to bin the continuous humidity values and `d3.scaleLinear` for both axes. The chart is made accessible with ARIA roles and labels, and it includes a labeled x-axis for humidity. The data is loaded asynchronously from a JSON file hosted on GitHub.

Nov 17, 2022

Verokone Example 1

This example visualizes aggregated tax and income data across various birth-year cohorts, ranging from 1922 to 2011, with a total population of 93,945 individuals. The chart displays the distribution of counts, combined incomes, and taxes per decade bucket. The visualization uses D3.v5 within a React framework, rendering to an SVG canvas. The code loads data from a JSON file and initially processes it by filtering out the total entry before setting up chart dimensions. While the core data access and dimension setup are implemented, the subsequent scale creation, drawing of data elements, and axis rendering are currently commented out, leaving the final visual output incomplete.

Nov 17, 2022

Chart redesign

This visualization redesigns a line chart of daily humidity data from a local weather dataset, highlighting seasonal patterns and mean humidity levels. Using D3 v5 within a React framework, it sorts and downsamples the time-series data, then renders an SVG with an area chart, individual data points, and seasonal background bands for Spring, Summer, Fall, and Winter. The code employs `d3.area`, `d3.scaleTime`, and `d3.timeParse` to generate the chart, while linear gradient definitions and season mean lines provide additional visual context.

Nov 6, 2022

Choropleth map

This choropleth map visualizes annual population growth rates by country for 2017, using a diverging color scale from indigo (negative growth) to white (no change) to dark green (positive growth). The visualization renders world country shapes using D3’s `geoEqualEarth` projection and `geoPath`, with graticule and sphere overlays. It loads World Bank data from a CSV and geospatial data from GeoJSON, and includes an interactive tooltip on hover plus a user-location marker via the Geolocation API.

Nov 6, 2022

Line plot interaction

A line plot of maximum daily temperatures for 100 days, rendered as an SVG using D3 v5 and React, displays a time series. Moving the mouse over the plot reveals a tooltip with the exact date and temperature of the nearest data point, determined via a scan for the closest date. The interaction includes a highlighted circle on the line, with the chart also shading temperatures below freezing.

Nov 1, 2022

Voronov scatter plot

This interactive scatter plot visualizes the relationship between dew point and relative humidity for weather data. Each point represents a day, and the chart uses a Voronoi diagram to define hover regions around each point, making it easier to select and inspect individual data points. The visualization, rendered as an SVG using D3.js v5 and the d3-delaunay library, displays a tooltip with the exact date, humidity, and dew point values upon mouseover. The data is loaded as JSON and plotted using linear scales for both axes.

Nov 1, 2022

Interactive scatter plot

A scatter plot uses the D3.js library to visualize the relationship between dew point and relative humidity, drawing each day of the weather dataset as a circle on an SVG canvas. The code creates linear scales for both axes, renders the axes with labels, and implements interactive hover effects that display a tooltip with the exact date, humidity, and dew point values using D3’s time parsing and formatting functions. React is loaded for potential integration, but the visualization itself is built with vanilla D3 selections and transitions.

Oct 27, 2022

Interactions 1

Four colored squares render in an SVG, initially gray. Hovering over a square fills it with its assigned color using D3's `mouseenter` and `mouseout` events, which call `d3.select(this).style` to change the fill. After three seconds, a `setTimeout` triggers the `dispatch` method to simulate a mouseout, and then removes both event listeners, leaving the squares interactive only briefly. The code binds an array of hex colors to `rect` elements using `d3.selectAll` and `data`.

Oct 26, 2022

Line Transition

A line chart displays daily maximum temperatures for 100 days of weather data, updating every 1.5 seconds by shifting the dataset forward one day. The y-axis highlights temperatures below freezing with a light blue fill. Built with D3 v5, the visualization uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear`, animating transitions via `transition().duration()`. Each update shifts the newest point into view with a sliding transform, while the x-axis smoothly re-renders. Data loads from a JSON file containing temperature records.

Oct 26, 2022

Histogram Transition

This example shows how a histogram transitions between different weather metrics, such as wind speed and temperature, from a JSON dataset. Clicking the “Change metric” button updates the display, with exiting bars collapsing downward in red, new bars rising in yellow-green, and final bars colored cornflower blue. Built with React and D3 v5, it uses `d3.histogram` to bin data, `d3.scaleLinear` for axes, and D3 transitions with chained `transition().duration()` calls to animate bar height, position, and a dashed mean line. The visualization renders in SVG.

Oct 26, 2022

Generalized histogram

The visualization displays a grid of generalized histograms for eight weather metrics, including windSpeed, humidity, and temperatureMax, sourced from a JSON dataset. Each chart renders bars using SVG rectangles, with a dashed line and label marking the mean. Built with React and D3 v5, the code employs `d3.json`, `d3.histogram`, and `d3.scaleLinear` to compute bins and scales, while `d3.axisBottom` handles the x-axis labels.

Oct 25, 2022

D3 ScatterPlot

This scatter plot visualizes the relationship between dew point and relative humidity, with each point’s color mapped to cloud cover. The SVG visualization uses the D3 v5 library’s `scaleLinear` for axes and color, rendering circles with `attr("cx")` and `attr("cy")` based on a JSON dataset of weather observations. Axis labels and tick marks are generated via `axisBottom` and `axisLeft`, while the chart’s size adjusts to the viewport.

Oct 21, 2022

Fork of New Initial Face part 2 React

This example visualizes daily temperature maxima from a JSON weather dataset, plotting them as a line chart that highlights days above the freezing point with a light blue background. It uses D3 v5’s `d3.json` to load data, `d3.timeParse` to parse dates, `d3.scaleLinear` and `d3.scaleTime` for scaling, and `d3.line` with `d3.axisLeft` and `d3.axisBottom` to generate the SVG elements. The chart is embedded in a React 18 wrapper, though the drawing logic runs imperatively in `chart.js` within a fixed `#wrapper` div.

Oct 14, 2022

New Initial Face part 1

This example draws a simple face using SVG shape elements defined directly in the HTML. It renders a large yellow circle as the head with a black outline, flanked by two smaller stroked circles for eyes, all positioned within an 960×500 viewport. The visualization uses static SVG `<circle>` elements with `cx`, `cy`, `r`, and stroke attributes, requiring no JavaScript logic or data binding. The CSS sets the body margin to zero and hides overflow, letting the SVG fill the page without scrollbars.

Oct 12, 2022

HIV/AIS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS for the year 2017, using a sequential yellow-orange-red color scale to encode prevalence rates across countries. Gray marks indicate missing data. The visualization combines React state management with D3 utilities, including `d3.geoNaturalEarth1` for the map projection, `d3.geoPath` for rendering SVG paths, and `d3.scaleSequential` with `interpolateYlOrRd` for color encoding. Country boundaries and graticules are drawn from TopoJSON data, while prevalence values come from the IHME dataset.

Jul 6, 2022

Migrant Chart Log Scale

This visualization plots the total number of dead and missing migrants over time, using a logarithmic y-axis to accommodate the wide range of values in the dataset. The chart displays individual data points as circles, with tooltips showing the exact reported date for each point. Built with React and D3 v7, the code uses scaleTime and scaleLog for the axes, while the data is loaded asynchronously via d3.csv from a Missing Migrants subset. The SVG rendering includes custom axis components and styled tick marks.

Missing Migrants on a Map with a Brush Part 2

This visualization shows global migrant deaths and disappearances over time and location. A brushed timeline at the bottom filters the bubble map above, which uses `d3.geoNaturalEarth1` and `d3.geoPath` to render world landmasses, with circle radii scaled by the total dead and missing per incident. The histogram uses `d3.bin`, `d3.scaleTime`, and `d3.brushX` to select date ranges, driving React state updates that filter the map’s displayed data.

Missing Migrants on a Map with a Brush

This interactive visualization combines a natural Earth projection bubble map with a time-series histogram to explore recorded missing migrant incidents. The map uses d3.geoNaturalEarth1 and d3.geoPath to render world landmasses and graticules, with circle sizes scaled by d3.scaleSqrt according to total deaths. The bottom histogram bins incidents by reported date using d3.bin and d3.timeMonths, aggregating values with d3.sum. Both views draw from a CSV of Missing Migrants data, with the map plotting coordinates and the histogram showing temporal trends.

Migrant Chart Aggregation Part 2

This interactive visualization aggregates migrant deaths and disappearances over time by binning the reported dates into monthly intervals. The bar chart, built with React and D3 (d3.bin, d3.timeMonths, d3.sum), sums the "Total Dead and Missing" values for each month. Using d3.scaleTime and d3.scaleLinear, the SVG renderings map dates and counts to positions along the axes. Tooltips display exact monthly totals. The dataset comes from a CSV file of global Missing Migrants records.

Missing Migrants on a Map

This map visualizes the global distribution of missing migrants, with circle size proportional to the total number of dead and missing per location. Using D3’s `geoNaturalEarth1` projection with `geoPath`, the visualization renders landmasses and graticules, while `scaleSqrt` encodes data values into circle radii. Data comes from a CSV of Missing Migrants incidents, loaded via `d3.csv`, and the world atlas is fetched as TopoJSON and converted to GeoJSON using `topojson.feature`.

Migrant Chart

This chart displays the total number of dead and missing migrants over time, using a scatter plot where each point represents a reported date and its corresponding death toll. The visualization loads data from a CSV file using D3’s `csv` utility and React state, then renders the chart with SVG elements. The x-axis employs `scaleTime` with a formatted date tick label, while the y-axis uses `scaleLinear` to map the count values. The React components for axes and data marks are built with `d3` utilities and styled via Poppins font and custom CSS classes.

Points on a Map

This example displays world cities as semi-transparent circles on a natural Earth projection, with circle size encoding each city's population. The map renders landmasses and country borders from the world-atlas TopoJSON dataset, with graticules and a sphere outline providing geographic context. Using React hooks to load data asynchronously, the visualization applies d3.geoNaturalEarth1 and d3.geoPath for projection, d3.scaleSqrt for radius scaling, and maps city coordinates through the projection to position SVG circles.

Interactive Color Legend

This interactive scatterplot visualizes the Iris dataset, plotting petal length against sepal width. Users can hover over the color legend to highlight data points belonging to a specific species, with non-matching points fading to 20% opacity. Built with React state management and D3 v7 scales (`scaleLinear`, `scaleOrdinal`), the visualization renders SVG circles with axis components replicated from the gallery. The color legend itself responds to mouse events, triggering filtering logic that redraws highlighted marks on top of the dimmed full dataset.

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset, plotting petal length against sepal width for three species of iris flowers. Each point is colored according to its species, with a color legend on the right side identifying the categories. The implementation uses React for component structure and state management, while D3 v7 utilities like `scaleLinear`, `scaleOrdinal`, and `csv` handle data loading, scaling, and coordinate mapping. The SVG rendering includes custom axis and legend components, with hover tooltips showing exact petal length values.

Stilized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Each point is colored by species using a D3 ordinal scale with a custom palette. The visualization is built with React and D3 v7, using React state to manage data loaded via the `csv` utility. SVG rendering handles the marks and axes, with custom formatting for tick labels and styling applied through a Poppins font and custom CSS rules.

Scatter Plot with Colors and Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, while the chart updates dynamically using React state management. The visualization is built with D3 v7 for scales, axes, and SVG rendering, and React for component structure and user interaction. Data is loaded asynchronously via D3's `csv` utility, and tooltips display values on hover.

Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via dropdown menus. Built with React and D3 v7, the visualization uses `d3.csv` to load data, `scaleLinear` for axis scaling, and SVG rendering with custom React components for axes and marks. Tooltips reveal precise values on hover, while axis labels dynamically update based on menu selections.

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically change which attributes are displayed on the x and y axes through two dropdown menus. Built with React managing state and D3 v7 utilities like `scaleLinear` and `extent` for scaling, the SVG rendering includes custom axis components and circles with tooltips. The code uses a custom `useData` hook with the `csv` function to load and parse the dataset, coordinating menu selections with axis labels and data values.

Menus with React

This example showcases a pet selector menu built with React, demonstrating how to manage state for a dropdown component. The interface displays a label and a dropdown menu containing six animal options, with the hamster preselected as the initial value. The `Dropdown.js` component is a reusable React function that renders a native HTML select element, mapping the option list and controlling the selected attribute based on the parent's state. The main `App` component uses React's `useState` hook to track the current selection, logging each change to the console, and passes the updated value back to the dropdown through a callback handler, illustrating a basic controlled-input pattern in React.

React Starter

This starter example displays the text "Hello React!" on a blank canvas. Built with React 18.2, the code uses `ReactDOM.render` to mount a simple `App` component into the `#root` div defined in `index.html`. The project is configured to run with a `bundle.js` output, serving as a minimal template for building interactive visualizations within the React framework.

World Map

This example visualizes world geography using an equal-area natural Earth projection, displaying landmasses in teal against a gray sphere with subtle graticule lines. The map also renders interior boundaries between countries as fine strokes. Built with React and D3, it pulls GeoJSON topology from the `world-atlas` package, applies D3’s `geoNaturalEarth1` projection and `geoPath` for SVG rendering, and uses `topojson.feature` and `topojson.mesh` to prepare the land and interior line data.

Stylized Line Chart

This stylized line chart visualizes San Francisco’s weekly temperature data, sourced from a CSV hosted on GitHub. The line uses a natural curve to connect data points, with axes displaying time on the horizontal axis and temperature on the vertical. Built with React and D3 v7, it leverages `d3.csv` for loading, `scaleTime` and `scaleLinear` for scaling, and `d3.line` with `curveNatural` for path generation. The SVG rendering includes React components for axes and marks, styled with the Poppins font.

Worling with time

This visualization plots the weekly temperature of San Francisco over time, using a scatterplot with circles positioned by a time-scaled x-axis and a linear-scaled y-axis. The React app loads the data with the D3 `csv` and `scaleTime` utilities, while `AxisBottom` and `AxisLeft` render SVG grid lines and tick labels. The circles’ tooltips display the day of the week via a `timeFormat` function. Styling is applied through CSS classes on the SVG marks and axes.

Stylized Bar Chart

A stylized bar chart displays the top ten countries by population for 2020. D3’s `scaleBand` and `scaleLinear` map country names to horizontal bars and population values to widths, with rounded corners and custom axis ticks formatted using D3’s `format` API. React state, managed in a custom `useData` hook, loads the UN Population 2019 CSV via `d3.csv` and renders the SVG.

Refactor Bar Chart

This example presents a horizontal bar chart from United Nations population data for ten countries, showing each country's 2020 population as a bar whose length is proportional to the value. Built with React components, it demonstrates a refactored approach to composing SVG visualizations using D3’s `scaleBand` and `scaleLinear` for positioning and scaling. The chart reads a CSV file via D3’s `csv` utility, and separate React components (`AxisBottom`, `AxisLeft`, and `Marks`) render the axes and bars, with React state managing the loaded data.

Axes with React & D3

This example builds a horizontal bar chart of United Nations population data for 2020, showing the top five countries by population size. It loads the CSV data with d3.csv, then uses React's useState and useEffect to store and manage the fetched data before rendering. Axes are manually constructed with d3.scaleBand and d3.scaleLinear, with tick marks and labels drawn as SVG elements. The bars and axis ticks are generated as React components, using d3's max and tick utilities to compute scales and intervals from the data.

The Margin Convention

This example demonstrates the Margin Convention for bar charts, showing the top ten countries by 2020 population as horizontal bars. It loads data from a CSV file using `d3.csv`, then uses React state and the `useEffect` hook to fetch and store the data. The chart is rendered as SVG, with `d3.scaleBand` mapping countries to the y-axis and `d3.scaleLinear` mapping population to the x-axis. A margin object defines padding, and the inner chart area is translated accordingly using an SVG `<g>` transform.

UN population 2019

A horizontal bar chart shows the ten most populous countries in 2020 based on UN population estimates. Each bar length encodes the population value, with country names on the y-axis and population scale on the x-axis, rendered as SVG rectangles. The code loads CSV data via `d3.csv`, transforms the 2020 column into numbers, and stores the first ten rows in React state with `useState` and `useEffect`. Scales are built using `d3.scaleBand` and `d3.scaleLinear` to map data to pixel positions and widths.

Fork of Rendering data with React & D3

A React component loads a CSV of named CSS colors via d3.csv and renders a pie chart as SVG paths. The chart uses the d3.arc and d3.pie functions, with each slice filled by its corresponding RGB hex value from the data. React’s useState and useEffect manage the asynchronous data loading, showing a “Loading…” message until the data arrives. The visualization displays all colors equally weighted in a single circular layout.

Rendering data with React & D3

This example shows a vertical stack of colored bands, one for each named CSS color, rendered as full-width div elements. The application uses React’s `useState` and `useEffect` hooks to manage asynchronous loading of a CSV file from a GitHub gist via the D3 `csv` utility. Once the data arrives, React maps each row to a styled div whose background color is set from the `RGB hex value` column. The page initially displays a large “Loading…” placeholder until the dataset is fetched and processed.

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a bubble chart showing the population of each religion across countries, with circular marks sized by population and colored by country. The visualization loads CSV data from a GitHub gist, renders with SVG via Vega, and includes tooltips for inspecting values. The code configures axes, labels, and styling for readability, while the chart automatically fits the window dimensions. It leverages D3 for data fetching, Vega for rendering, and Vega-Lite’s declarative encoding for marks and scales.

Loading data with React & D3

This example demonstrates how to load and display CSV data using React state management alongside D3 utilities. The application fetches a CSV file containing CSS named colors from a GitHub gist, then calculates and presents summary statistics including file size, row count, and column count. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading via `d3.csv`, while the `d3.csvFormat` method in `message.js` computes the data’s size in kilobytes. The rendered output appears as large monospace text.

Fetch data with D3js

This example demonstrates how to fetch and parse CSV data with D3.js, displaying a summary message in a large preformatted text element. It loads a CSS named colors dataset from a GitHub gist using D3's `d3.csv` method, then calculates and shows the file size in kilobytes, the number of rows, and the column count. The code formats the raw CSV data with `d3.csvFormat` to measure its length, and writes the resulting metrics into the page via `textContent` within a promise handler.

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. The example uses React state to track the mouse coordinates via an `onMouseMove` event handler, which calls `setMousePosition` to re-render the circle at the new location. The SVG element defines the drawing area, and the circle’s `cx` and `cy` attributes are bound to the state values. No data is loaded; the visualization demonstrates interactive state management with React’s `useState` and `useCallback` hooks within a D3-enabled SVG environment.

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data from a remote URL using JavaScript's built-in Fetch API. It loads a color dataset from a GitHub gist and logs the raw CSV text to the browser console for inspection. The code defines an asynchronous function that retrieves the text content, then chains a promise to display it. No third-party libraries are used; the visualization relies on native browser functionality for data acquisition.

Smiley Face Part IV

A grid of eighteen identical yellow smiley faces is rendered, each with a black outline, two solid black eyes, and a semi-circular mouth. The faces are drawn using React components that compose SVG circles and a D3 arc path. The `d3.arc()` API generates the mouth shape, while random eye radii introduce slight variation across the repeated faces.

Experiment with smiley face

A smiley face drawn with D3.js v7 and React 18 uses SVG shapes to compose the yellow head, black outline, eyes, and a mouth created with the d3.arc path generator. The face is centered on a 960×500 canvas, with fixed pixel offsets and radii defining facial features. React renders the SVG elements, while D3’s arc function computes the curved mouth path based on specified start and end angles. The example demonstrates mixing React components with D3 geometric utilities for static, vector-based illustrations.

Smiley face part I

A yellow smiley face is drawn in an SVG using React components and D3's `arc` generator to create the mouth. The face consists of a large yellow circle with a black stroke for the outline, two black eye circles positioned symmetrically, and a semi-circular mouth path. D3 v7 calculates the mouth arc with specified inner and outer radii and angles, while React manages the SVG element hierarchy and attribute bindings for a declarative rendering approach.