D

daneslutzky

@daneslutzky·33 public vizzes

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example demonstrates how to load and parse a COVID-19 time-series dataset from the CSSE at Johns Hopkins University using D3 v5. It displays the file size in kilobytes, the number of rows, and the number of columns in a large preformatted text element. The code relies on the `d3.csv` method to fetch and parse the data asynchronously, then uses `d3.csvFormat` to measure the formatted output size. The visualization is minimal, focusing solely on the parsed dataset's metadata rather than any chart or graphical representation.

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes the global share of the population infected with HIV/AIDS among adults aged 15–49 in 2017. Country shading uses a sequential color scale interpolating Yellow-Orange-Red, with missing data rendered in gray. Built with React and D3 v7, the map projects geographic data using `geoNaturalEarth1` and renders paths via `geoPath`, with a graticule and interior borders for context. Data comes from the IHME CSV, joined to country codes and world atlas TopoJSON.

Loading thumbnail…

Log Scales

This scatter plot visualizes reported incidents from the Missing Migrants Dataset, plotting each event’s date against the total number of dead and missing. The code uses a d3.scaleLog for the y-axis to handle the wide range of casualty counts, while d3.scaleTime handles the x-axis. React components render SVG circles for each data point, with tooltips via native SVG `<title>` elements. Axis components generate ticks and labels using d3 scale methods.

Loading thumbnail…

Optimizing with React

A world map displays the global distribution of missing migrants, with circle size encoding the total number dead or missing for each location. A time-series histogram below the map shows the monthly count of missing migrants, and brushing on this histogram filters the map’s circles to the selected date range. The visualization uses React for component structure, D3's `geoNaturalEarth1` projection and `geoPath` for map rendering, `scaleSqrt` for circle sizing, and a D3 `brushX` to control filtering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Multiple Views with Brushing

Two coordinated views show global migration incidents, with a scatterplot-style map on top and a date histogram below. A temporal brush on the histogram filters the geographic bubble map, which uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render the world atlas. The histogram uses `d3.bin`, `d3.timeMonths`, and `d3.scaleSqrt` for the bubble sizing, while `d3.brushX` enables interactive selection. Deceased and missing migrant totals drive both the bubble radii and histogram bar heights.

Loading thumbnail…

Multiple Views with Brushing for debugging

This interactive visualization combines a bubble map and a date histogram to explore missing migrant data, with brushing on the histogram filtering the map's circles. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, while circle size encodes the total dead and missing count via `d3.scaleSqrt`. The histogram's brush, implemented with `d3.brushX`, updates the filtered dataset in real time, demonstrating linked views for debugging data patterns. Data comes from the Global Missing Migrants dataset, and the rendering uses SVG within a React framework.

Loading thumbnail…

Multiple Views

This example combines a bubble map and a date histogram to visualize the total number of missing migrants over time and location. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to project circles scaled with `d3.scaleSqrt`, while the histogram bins the data by month using `d3.bin` and `d3.timeMonths`. Data comes from a CSV of global missing migrant incidents, rendered with SVG in a React framework.

Loading thumbnail…

Missing Migrants Histogram

This histogram visualizes the total dead and missing migrants over time, binned by month from the Data Canvas Sense Your City dataset. The chart aggregates the "Total Dead and Missing" values per time period using d3.histogram and d3.sum, with a time scale for the x-axis and a linear scale for the y-axis. React renders the SVG elements, including custom AxisBottom, AxisLeft, and Marks components, while d3.csv loads the data and d3.timeMonths defines the bin thresholds.

Loading thumbnail…

Missing Migrants map

This map visualizes missing migrant incidents worldwide, with circles sized proportionally to the total number of dead and missing individuals using a d3.scaleSqrt scale. Each circle is positioned at its recorded coordinates via a geoNaturalEarth1 projection and drawn with geoPath for landmasses, graticules, and country interiors from the world-atlas TopoJSON dataset. The React-based visualization uses D3 v7 to load CSV data containing location coordinates and casualty counts, rendering semi-transparent teal circles over a muted geographic backdrop.

Loading thumbnail…

Points on a Map

This map visualization displays the global distribution of cities, with points sized according to population using a square root scale to encode area proportionally. The geographic context is rendered using D3’s `geoNaturalEarth1` projection, with landmasses, graticules, and country interiors drawn via `geoPath`. City data, loaded from a CSV via `d3.csv`, is plotted as semi-transparent circles, and population values are scaled using `d3.scaleSqrt` to ensure visual accuracy. The visualization is built with React, leveraging the `useWorldAtlas` and `useCities` hooks to asynchronously fetch and process TopoJSON and CSV data.

Loading thumbnail…

Interactive Color Legend

This interactive scatterplot visualizes Iris flower measurements, plotting sepal length against sepal width for three species. The React-based interface uses D3.js scales (scaleLinear, scaleOrdinal) to position and color each circle. A custom ColorLegend component responds to mouse hover events, highlighting the selected species by fading all other points to 20% opacity. Hovering a legend item filters the visible marks, while tooltips display exact values. Data loads asynchronously from a CSV file using d3.csv.

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, displaying sepal length against sepal width for three flower species. Each circle’s color encodes species membership, with a color legend positioned to the right identifying the categories. Built with React and D3 v7, the chart uses `scaleLinear` for axes, `scaleOrdinal` for color mapping, and custom SVG components for axes, marks, and legend. Data loads from a remote CSV via `d3.csv`, with hover tooltips providing exact values.

Loading thumbnail…

Scatter Plot with color

A React-based scatter plot visualizes the Iris dataset, plotting sepal length against sepal width. Each point is colored by species using a d3.scaleOrdinal color scale with three categorical colors. The visualization uses React components to render SVG circles for marks and custom axis components built with d3.scaleLinear scales. Hovering over a circle reveals a tooltip with the sepal length value, implemented via a native SVG title element.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to select which quantitative attributes to plot on the x- and y-axes via two dropdown menus built with React and the ReactDropdown component. The visualization is rendered as an SVG using D3 v7 scales (scaleLinear) and custom axis components, with circles colored in a teal tone and tooltips showing the formatted attribute values. The code loads CSV data via d3.csv and uses React hooks (useState, useEffect) to manage state and fetch the data.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the Iris flower dataset by changing which numeric attributes are plotted on the x- and y-axes via dropdown menus. The visualization is rendered in React with SVG, using D3’s `scaleLinear`, `extent`, and `format` APIs to map data to pixel coordinates and format tick labels. Each point represents a flower, with tooltips showing the x value. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw the chart, with styling applied via Poppins font and a custom color palette.

Loading thumbnail…

Menus with React

This example demonstrates a simple pet selector menu built with React and D3 v6. It shows how a dropdown list updates a displayed value based on user selection. The app uses React’s `useState` hook to manage the selected option and passes the current value and change handler to a reusable `Dropdown` component, which renders an HTML `<select>` element. The menu allows choosing among six predefined pet options, with a large label and select styled via CSS.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” on a blank page. It combines React 17 with D3 v6, loading both libraries in the HTML and creating a root component within the `#root` element. The code illustrates the basic integration setup, where `ReactDOM.render` mounts a simple functional component, and the page’s body is styled with zero margin and hidden overflow. No data visualization or D3 API is used beyond the initial import.

Loading thumbnail…

World Map

This example displays a world map with landmasses and country borders rendered from TopoJSON data. A natural Earth projection with graticule lines shows the geographic grid, while coastlines and interior boundaries are drawn distinctly. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering, and d3.geoGraticule for the reference lines, with React managing the component structure. Spherical and land features are colored with muted teal tones, creating a clean, minimalist aesthetic.

Loading thumbnail…

Working with Time

A line chart displays temperature readings over one week, using a natural curve to connect daily data points from a CSV of San Francisco weather. The visualization includes labeled axes for time and temperature, with time formatted to show weekday abbreviations. The example uses React to manage the component structure and D3 version 7 for data loading, time and linear scaling, and generating SVG elements like axes, tick marks, and the curved path. The chart omits individual data points, showing only the smooth trend line.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping sepal length and width as positioned circles. Built as a React application using D3 v7 utilities, it loads CSV data via `csv()` and renders the chart as an SVG. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components, using `scaleLinear` for scaling and `extent` for domain calculation. Each point is a circle with a tooltip showing its value via an SVG `<title>` element.

Loading thumbnail…

Stylized Bar Chart

This example shows a horizontal bar chart ranking the ten most populous countries for 2020, based on UN population data loaded as a CSV. Each bar’s length encodes population, with country names on the y-axis and a formatted population scale on the x-axis. The React app uses d3.scaleBand and d3.scaleLinear for positioning, d3.format for tick labels, and renders bars as SVG rectangles via React components. Styling applies the Poppins font and a teal fill for the marks.

Loading thumbnail…

Refactored Bar Chart

This example visualizes the population of ten countries from a UN dataset in 2019/2020 using a horizontal bar chart rendered as SVG. The code loads data with `d3.csv` in a React custom hook (`useData`), then builds the visualization with `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Axis tick marks and labels are generated via custom React components (`AxisBottom`, `AxisLeft`), while `Marks` maps each country to a `<rect>` positioned by the computed scales, with margins applied through a translated `<g>` group.

Loading thumbnail…

Bar Chart with Margin Convention

This bar chart displays the ten most populous countries in 2020 using UN population data loaded via `d3.csv`. It applies the margin convention to separate axes from the plotting area, with `scaleBand` for country names and `scaleLinear` for population values. React manages the SVG rendering, while D3 v7 handles data loading, scales, and axis ticks. Axes are drawn manually using `<line>` and `<text>` elements positioned with scale outputs, and each bar's width reflects its country's population.

Loading thumbnail…

Crappy Bar Chart with React and D3

This example displays a horizontal bar chart of the top ten countries by 2020 population, using UN population data loaded via `d3.csv`. React manages the component state and renders SVG `<rect>` elements, while D3’s `scaleBand` and `scaleLinear` position and size the bars. The `useEffect` hook fetches the CSV once, and `max` computes the domain for the x-axis. Although titled "crappy," the chart cleanly shows relative population sizes.

Loading thumbnail…

Rendering Data with React v2

A React app loads CSS named colors from a CSV file and renders each color as a slice of a pie chart, using the color’s hex value to fill the corresponding path. The visualization uses React hooks like `useState` and `useEffect` to fetch and store data, while D3’s `csv`, `arc`, and `pie` functions compute the chart geometry. All slices have equal size, as the pie’s value accessor is set to a constant one.

Loading thumbnail…

Rendering Data with React

A React app renders data from a CSV of CSS named colors, displaying each color as a horizontal bar in a vertical sequence. The page loads the dataset from a GitHub gist using d3.csv and then maps each row to a div element with a background color set to the row’s RGB hex value. The bars are fixed at 960 pixels wide and 4 pixels tall, forming a stacked color spectrum. React’s useState and useEffect hooks manage the asynchronous data loading, while React DOM mounts the component to the root element.

Loading thumbnail…

Loading Data with React and D3

This example shows how to load and summarize data about CSS named colors using React and D3. The application fetches a CSV file from a GitHub gist with `d3.csv` inside a `useEffect` hook, storing the result in React state. While loading, it displays “Loading...”, then renders a text summary with the file size in kilobytes, row count, and column count. The code combines React hooks (`useState`, `useEffect`) with D3’s CSV parsing and formatting utilities to bridge data loading and component rendering.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and summarize a CSV file using D3.js. It fetches CSS color data from a GitHub gist and displays the file size, row count, and column count in large text. The primary method uses `d3.csv` with a promise to parse the data, while commented alternatives show `fetch` with `async/await` and `d3.csvParse`. The output is rendered into a `<pre>` element, highlighting the parsed dataset’s basic metrics.

Loading thumbnail…

Mouse Follower

This example demonstrates a minimal interactive visualization where a single black circle follows the mouse cursor across the screen. Built with React and rendered as SVG, it updates the circle’s center coordinates based on pointer movement. The `onMouseMove` event handler captures the client’s X and Y positions, which are stored in React state and passed as `cx` and `cy` attributes. The code uses `useState` and `useCallback` for state management and event memoization, while the `ReactDOM.render` method mounts the component. The visualization is unconstrained by data, focusing purely on real-time positional feedback.

Loading thumbnail…

Mouse Follower

A single black circle tracks the mouse across an SVG canvas, smoothly following the cursor’s exact screen coordinates in real time. The React component uses the `useState` hook to store the mouse position and a `useCallback` handler for `onMouseMove` events, updating the circle’s `cx` and `cy` attributes. Rendering is handled by ReactDOM, with D3’s `arc` import available but unused. The minimal interaction demonstrates how React state and SVG event binding can create responsive pointer-driven visuals.

Loading thumbnail…

CSV Data

This example demonstrates the initial step of a data pipeline by loading a CSV file from a remote GitHub Gist and printing its raw text to the browser console. It uses the `fetch` API within an asynchronous `fetchText` function to retrieve the data, then calls `.text()` to parse the response body. The page currently shows no visual output, serving only to confirm successful retrieval of the file, which contains CSS color values. The code includes commented-out alternative syntax for handling the fetch promise chain.

Loading thumbnail…

Creative Face

The visualization depicts a stylized cartoon face built from simple geometric shapes—a yellow circular head, eyes with white elliptical highlights, a curved mouth, and a rectangular hat—rendered as an SVG in React. The face’s components are modular React components (e.g., `BackgroundCircle`, `Eyes`, `Hat`) that accept numeric props for positioning and sizing. The mouth is generated using the d3 `arc` path generator, while all shapes are composed within a `<g>` transform. The example demonstrates reusability and parameterized design, driven by explicit configuration in the main `App` component.

Loading thumbnail…

Fork of Hello HTML

This visualization depicts a classic smiley face rendered as an SVG graphic. It is built using React for structure and D3.js for calculating the mouth’s arc path, specifically employing the `d3.arc` API. The face consists of a yellow circle with a black stroke, two black eye circles, and a curved mouth generated via a path derived from `arc()`. The code uses `ReactDOM.render` to inject the SVG into a root HTML element.