Yedrup

Fork of A Bar Chart(Platform)

This interactive bar chart displays video game sales across different platforms, letting viewers filter by global, EU, JP, NA, or other regional sales using a React dropdown menu. The visualization uses d3.scaleBand and d3.scaleLinear with SVG rectangles to encode the data, while the y-axis formatting employs d3.format. Built with React hooks and d3.csv for loading, the chart reads data from a Kaggle-sourced CSV file hosted on GitHub.

Mar 3, 2021

Fork of Stylized Bar Chart

This interactive bar chart visualizes the top 10 most populous countries in 2020 using data from the United Nations World Population Prospects 2019. It displays population values as horizontal bars, ordered by country, with a formatted x-axis using d3.format to abbreviate large numbers. Built with React and rendered as an SVG, the chart uses d3.scaleBand and d3.scaleLinear for positioning, with a Poppins font and a teal color scheme.

Mar 3, 2021

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three flower species. The visualization uses a React component structure with D3.js scales and SVG rendering to map data points. The d3.scaleLinear function handles positional encoding on both axes, while d3.scaleOrdinal assigns distinct colors to each species. Interactive tooltips appear on hover through SVG title elements. The chart includes labeled axes and a loading state while fetching data via d3.csv. Colors represent the three species categories, making group separation visually evident.

Feb 18, 2021

Visualization labels

A line chart visualizes global cumulative COVID-19 deaths over time, using a logarithmic scale to accommodate the data's growth. The chart fetches data from the Johns Hopkins Coronavirus dataset via `d3.csv` and renders with React and D3 v5, using `scaleTime`, `scaleLog`, and `d3.line`. Axis components built with `d3.axisBottom` and `d3.axisLeft` include grid lines and custom tick formatting, while the SVG includes titles and axis labels.

Coronavirus line chart - Log Scale

This line chart shows the global cumulative death toll from COVID-19 over time, using a logarithmic scale for the y-axis to reveal exponential growth patterns. Data comes from the Johns Hopkins Coronavirus dataset. The visualization is built with React and D3 v5, using `scaleLog`, `scaleTime`, and `line` to generate the path, while `axisLeft` and `axisBottom` render the labeled grid axes as SVG elements.

Coronavirus line chart - Linear Y Axis

A line chart displays cumulative global COVID-19 deaths over time, sourced from the Johns Hopkins Coronavirus Dataset. The chart uses a linear y-axis scale (d3.scaleLinear) and a time-based x-axis (d3.scaleTime), with the line path generated via d3.line. React manages component state, while d3.axisBottom and d3.axisLeft render the axes with tick marks extending across the plot area. SVG elements draw the chart, styled with CSS for gridlines and the line stroke.

Fork of Coronavirus Linear Y Axis

This chart displays the cumulative total of COVID-19 deaths over time using a linear y-axis scale. The line path is generated with d3.line, while d3.scaleTime and d3.scaleLinear handle the x and y domains respectively. Axes are rendered via d3.axisBottom and d3.axisLeft, with tick marks spanning the full chart width and height. Data comes from the Johns Hopkins Coronavirus time-series CSV, aggregated by summing daily death counts across all regions. React components manage the SVG rendering, and optional marker lines reference specific values like 10,000 deaths.

Coronavirus Line Chart with Log Scale and Labels

This line chart depicts the cumulative global death toll from the Coronavirus pandemic, using a time-series line that plots daily total deaths against dates. The visualization includes a horizontal marker line at 500,000 deaths and a vertical marker line at the most recent date, labeled with its formatted value. Built with React and D3 v5, the chart uses `scaleTime` and `scaleLinear` for axes, and `line` to generate the path. Data is sourced from the Johns Hopkins Coronavirus dataset, fetched via `csv` and aggregated by summing daily death counts.

Coronavirus line chart - global deaths Axes useRef and D3

This line chart displays global cumulative COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus Dataset. The visualization employs d3.scaleTime and d3.scaleLinear to map dates and death totals, with d3.line generating the path. React components use useRef and useEffect to integrate D3 axes via d3.axisBottom, while custom XMarkerLine and YMarkerLine components annotate the most recent date and the 500,000-death threshold. SVG rendering fills the viewport, with gridlines and styled ticks enhancing readability.

Coronavirus line chart - global deaths - marker line 500k

A line chart tracks cumulative global COVID-19 deaths over time using a timeline from the Johns Hopkins dataset, with a horizontal marker line at 500,000 deaths and a vertical marker labeled "now" at the most recent date. The React component builds a D3 v5 `scaleTime` and `scaleLinear` to map dates and totals, then uses a `line` generator to draw the SVG path. Custom `YMarkerLine` and `XMarkerLine` components render the threshold and current-date annotations, emphasizing the crossing of the half-million milestone.

Coronavirus line chart - global deaths

A line chart tracks cumulative global COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus Dataset. The chart plots dates on a time scale and death totals on a linear scale, with a horizontal marker line highlighting the 500,000-death threshold. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `line` from d3 to generate an SVG path, while `csv` and `timeParse` handle data loading and date parsing.

Coronavirus line chart

This chart shows the cumulative global death toll from COVID-19 over time, using a simple black line against a full-screen SVG. The data is loaded from the Johns Hopkins Coronavirus dataset and aggregated by day. It uses D3’s `scaleTime` and `scaleLinear` for the axes, a `line` generator for the path, and React to render the SVG element. The line is styled with a 5px stroke and no fill, emphasizing the overall curve of the pandemic’s mortality.

Summarizing coronavirus data

A red ticker displays the cumulative global death count from the Johns Hopkins COVID-19 dataset, formatted with commas via the `d3.format` function. The example loads CSV data with `d3.csv`, sums the latest date column’s numeric values using `Array.reduce`, and updates the page’s text content. It highlights a minimal, efficient data summarization approach over full chart rendering.

Feb 6, 2021

loading and parsing Coronavirus data

This example demonstrates how to load and parse the Johns Hopkins Coronavirus global deaths dataset, displaying key metrics in oversized monospace text. It uses `d3.csv` to fetch the raw CSV and calculates the file size in kilobytes, row count, and column count from the parsed data. The visualization also logs the latest date column, showing the time series structure. The code includes commented alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, illustrating different parsing approaches without rendering a chart.

Feb 6, 2021

Fork of Stylized Line Chart

This example visualizes San Francisco temperature readings over a week using a stylized line chart. The chart plots time on the x-axis and temperature on the y-axis, with a smooth curved line rendered by d3.line() with curveNatural. The visualization is built with React components that call d3.scaleTime, d3.scaleLinear, and d3.extent to map the data. Axes are drawn using custom React components that generate SVG ticks and labels, with data loaded via d3.csv.

Feb 1, 2021

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width. A React component renders SVG circles colored by species using d3.scaleOrdinal, while d3.scaleLinear handles x and y positioning. Hovering over the color legend highlights points of that species and fades all others to 20% opacity. Axes are built with custom React tick components, and data loads asynchronously via d3.csv.

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically select which measurements to plot on the x and y axes via dropdown menus. The visualization updates the axes and data points in real time based on user selections. Built with React and D3.js (v5), it uses D3’s scaleLinear function for value mapping, extent for domain calculation, and custom SVG components for rendering axes and circular marks. The iris data is loaded asynchronously via the d3.csv function, with all numeric attributes parsed for plot generation.

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from UCI, letting users explore relationships between car attributes via dropdown menus. The D3 v5 code uses `d3.csv` to load data and `d3.scaleLinear` with axis generators to render SVG axes and circles. The `dropdownMenu` module updates selections, while `scatterPlot` animates points using `transition().duration()` when axes change. The example demonstrates dynamic data-driven visualization with user-controlled encodings.

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through drop-down menus. The React application renders an SVG chart where the x-axis and y-axis attributes are dynamically selected, with axes and marks updating in response. The code leverages d3.scaleLinear for scaling, d3.extent for domain calculation, and d3.csv for data loading, while React's useState manages the currently selected attributes. The visualization includes axes with tick marks, hover tooltips, and labels for the selected attributes.

Fork of Organization Graph Diagram

A force-directed graph visualizes the network of organizations connected to the Kenneth Rainin Foundation. Color-coded nodes represent the foundation and its partners, with larger main nodes and smaller child and leaf nodes arranged through simulation. The visualization uses D3 v6 with `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while links and circles are rendered as SVG. Node data and colors are defined in separate JavaScript modules, and the graph supports dragging to reposition nodes interactively.

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

This chart shows global coronavirus deaths over time as multiple gray trend lines, one per country, on a logarithmic y-axis. Hovering over a line highlights that country’s series in black. The chart uses a Voronoi overlay built with `d3.Delaunay` and `d3.delaunay.voronoi` to make the thin lines easier to target with the mouse, mapping each point to its nearest data cell in the SVG. Data comes from the Johns Hopkins COVID-19 global deaths time series, parsed via `d3.csv` and `timeParse`. The visualization is rendered in React with D3 scales and axes (`scaleTime`, `scaleLog`, `axisBottom`, `axisLeft`).

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

A fork of a line chart displays cumulative COVID-19 deaths over time for each country on a log scale. Semi-transparent red Voronoi cells, generated by `d3.Delaunay` from a sparse set of points, overlay the chart to illustrate a hover-interaction technique, though the hover handler only logs to the console. Built with React and D3 v5, the SVG visualization renders axes, grid lines, and multiple country paths from the Johns Hopkins dataset.

Fork of Coronavirus Deaths Over Time by Country

This chart displays cumulative coronavirus deaths over time for multiple countries, with each country represented by a randomly colored line. The visualization uses a logarithmic y-scale to accommodate the wide range of death totals across nations. Built with React and D3 v5, the line generator (`d3.line`) maps dates to x-coordinates and death counts to y-coordinates, while `d3.scaleLog`, `d3.scaleTime`, `d3.axisBottom`, and `d3.axisLeft` handle scaling and axes. Data comes from the Johns Hopkins Coronavirus Dataset, loaded via `d3.csv`.

Fork of Global Coronavirus Deaths

This line chart shows the global cumulative death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. A marker line highlights when deaths reached 10,000, and a vertical marker notes the most recent date. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, a D3 `line` generator for the path, and custom `XAxis` and marker components rendered as SVG.

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS for the year 2017, using a yellow-orange-red sequential color scale. It renders world countries as SVG paths via d3.geoPath with a natural Earth projection, styling graticules and interiors for reference. The chart is built with React and d3.v5, loading country geometries from World Atlas TopoJSON and HIV prevalence data from the IHME CSV. The code maps alpha-3 codes to numeric country codes to join the datasets, and countries with missing data appear in gray.

Fork of Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis maps reported dates over time, while the y-axis uses a log scale to show total dead and missing counts, making small and large values comparable. Built with React and D3 v5, the visualization leverages `scaleTime`, `scaleLog`, and `extent` to set scales and domains. SVG rendering handles the marks and axes, with tooltips formatted via `timeFormat` to show exact dates on hover. The data loads asynchronously from a GitHub-hosted CSV file using `csv`.

Fork of Migrant Deaths Linked Views with Fast Brushing

A linked-view visualization plots migrant deaths on a world map using d3.geoNaturalEarth1 and d3.geoPath, with circle radii scaled by d3.scaleSqrt. A brushed date histogram using d3.brushX filters the map's circles. The histogram bins monthly totals with d3.histogram and scales. React's useMemo optimizes rendering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Fork of Multiple Views with Brushing

This visualization combines a bubble map of missing migrant incidents with a linked date histogram. Users can brush a time range in the histogram, which filters the map's circles based on `Reported Date`. The map uses `d3.geoNaturalEarth1` projection with `d3.geoPath` for country boundaries and graticules, while circle size is scaled with `d3.scaleSqrt` based on the 'Total Dead and Missing' field. The histogram bins data with `d3.histogram` and uses `d3.brushX` for interactive selection. Data comes from the Missing Migrants Project CSV.

Fork of Multiple Views Cleanup

This visualization combines a bubble map and a date histogram to show migration incidents worldwide. The map uses a natural Earth projection with graticules and country boundaries from World Atlas TopoJSON, with circle sizes scaled by the square root of the total dead and missing. The histogram below aggregates monthly totals using d3.bin and d3.timeMonths. Both views use d3.scaleSqrt, scaleTime, and scaleLinear, rendered as SVG with React components. Data comes from the Missing Migrants Project CSV, parsed with d3.csv.

Fork of Missing Migrants Multiple Views

This visualization combines a bubble map and a date histogram to explore global incidents of missing migrants. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to render country boundaries and graticules, with circle radii scaled by `scaleSqrt` based on reported deaths. The histogram aggregates monthly totals using D3’s `histogram` binning and `scaleTime`. Both views are built as React components with SVG, fetching data from a CSV of missing migrants and a TopoJSON world atlas.

Fork of Missing Migrants on a Map

This example visualizes the Missing Migrants Dataset, where each circle represents a single recorded event and its radius encodes the total number of dead and missing. The map uses a Natural Earth projection rendered with `d3.geoPath`, while country boundaries come from the world-atlas TopoJSON file. The visualization is built in React, with size scaling handled by `d3.scaleSqrt` and data loading through `d3.csv`. Each point is drawn as an SVG circle with a semi-transparent fill.

Fork of Missing Migrants Date Histogram

This visualization displays the total number of dead and missing migrants per month, using a date histogram built with React and SVG. It loads data from the Missing Migrants Dataset and applies d3.bin to create monthly bins, with d3.sum aggregating casualties per bin. The chart renders axes and marks via reusable React components, using d3.scaleTime, d3.scaleLinear, and d3.extent for scaling. Bar heights represent monthly totals, with tooltips showing exact values via SVG titles.

Fork of Missing Migrants Scatter Plot

This interactive scatter plot visualizes the Missing Migrants Dataset, where each circle represents a single migration event. The x-axis maps the reported date over time, while the y-axis shows the total number of dead and missing individuals. Built with React and D3 v5, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axis scaling, rendered as SVG circles with tooltips revealing exact dates. The code demonstrates reusable components for axes and marks, with data loaded asynchronously via `d3.csv`.

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, sized proportionally to population using a square-root scale. The visualization uses React for component structure, with d3-geo’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, graticules, and country boundaries from World Atlas TopoJSON. City coordinates and populations come from Simplemaps’ World Cities Database, loaded via d3.csv. The SVG rendering iterates over city data, projecting longitude and latitude to screen positions and setting circle radii through the `scaleSqrt` domain and range.

Fork of Points on a Map

This visualization shows a world map depicting cities with populations over 50,000, drawn as semi-transparent teal dots. The country boundaries and graticules are rendered using D3’s `geoNaturalEarth1` projection with `geoPath`, while the city positions are projected from latitude and longitude coordinates. The map uses a React front-end with `useWorldAtlas` and `useCities` hooks to load TopoJSON land data and CSV city data from Simplemaps, displaying everything as SVG elements.

Fork of Interactive Color Legend

Fork of Scatter Plot with Color Legend

This visualization uses a scatter plot to explore the classic Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis, with points colored by species via an ordinal color scale and SVG circles. The chart includes custom React components for axes and a discrete color legend, built with d3.scaleLinear, d3.scaleOrdinal, and d3.extent for domain computation. The data is loaded asynchronously using d3.csv, and the SVG rendering is handled through React’s JSX syntax.

Fork of Menus with React

This example demonstrates a simple interactive dropdown menu for selecting a pet, built with React. It shows how a reusable `Dropdown` component manages user input by updating a selected value through the `useState` hook and passing it back via an `onSelectedValueChange` callback. The app renders a list of pet options, with the current selection logged to the console. The code uses React and ReactDOM directly from a UMD bundle, along with a plain HTML `<select>` element, and styles the interface with large CSS font sizes.

Fork of Polished World Map

This fork of the Polished World Map displays country boundaries from World Atlas TopoJSON, rendered with SVG paths using the d3.geoNaturalEarth1 projection and d3.geoPath. The visualization includes graticules, a sphere outline, and stylized land and interior borders. The React component loads the TopoJSON with d3.json, converts features and meshes with topojson.feature and topojson.mesh, and renders the map with d3.geoGraticule and colored CSS classes.

Fork of Working with Time

This example visualizes the relationship between time and temperature for a week in San Francisco, plotting each observation as a circle along a time axis. The x-axis displays the day of the week, while the y-axis shows the temperature value. The chart is rendered as an SVG using React, with axes and data marks constructed from custom components. The implementation leverages d3’s `scaleTime`, `scaleLinear`, and `extent` functions for scaling and domain calculation, while data is loaded asynchronously from a CSV file using d3’s `csv` helper. Each circle includes a tooltip formatted with `timeFormat`.

Jan 29, 2021

Fork of Stylized Scatter Plot

A scatter plot of the Iris dataset displays petal length against sepal width, with each of the 150 flowers represented as a circular mark. The visualization is built with React and D3 v5, using `scaleLinear` for both axes and `extent` to compute domains from the loaded CSV data. Axis ticks are generated via `xScale.ticks()`, with labels formatted using D3's `format` utility. The SVG rendering applies a Poppins font and custom styling for ticks and marks, while hover tooltips expose exact petal length values through SVG `<title>` elements.

Jan 28, 2021

Fork of Refactored Bar Chart

This example shows the top 10 most populous countries as horizontal bars ordered by country name, with no axes initially visible. The visualization uses React components to render SVG elements, leveraging D3 v5 functions like `scaleBand` and `scaleLinear` for positioning. Data comes from the United Nations World Population Prospects 2019 CSV file, loaded via D3’s `csv` parser and filtered to the first ten rows. The chart includes separate React components for axis rendering and bar marks, though the axes are left unlabeled in the final output.

Jan 28, 2021

Fork of Axes with React & D3

This example displays the top 10 most populous countries as a horizontal bar chart with custom axes, using React for component state and rendering. It loads data from the United Nations World Population Prospects 2019 CSV via `d3.csv`. Scales are created with `d3.scaleBand` and `d3.scaleLinear`, while axes ticks are manually generated using `xScale.ticks()` and rendered as SVG lines and text. The chart updates asynchronously, showing a loading message until data arrives.

Fork of Pathetic Bar Chart

Using React hooks and D3 v5, this chart displays the top 10 most populous countries for 2020 from United Nations World Population Prospects 2019 data, loaded via `d3.csv`. It renders SVG rectangles scaled by `d3.scaleLinear` for population and positioned with `d3.scaleBand` for country names, with no axes or labels. The chart updates asynchronously with `useState` and `useEffect`, and `ReactDOM.render` mounts the component.

Fork of Rendering Data with React & D3

A radial burst of CSS named colors rendered as colored arcs around a central point, with each slice representing one color from a CSV dataset loaded via D3's `csv` utility. The example integrates D3's `pie` and `arc` generators with React's `useState` and `useEffect` hooks, mapping data to SVG paths filled with each color's hex value. The application displays a loading message until the dataset arrives, then renders all slices in a full circle using React's declarative JSX structure.

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by horsepower and miles per gallon, colored by country of origin, and sized by vehicle weight. Hovering over a circle reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite specifications through JavaScript code, with the data loaded via `d3.csv`. The chart uses an SVG renderer and applies custom axis and label styling from a configuration object.

Fork of Loading Data with React & D3

This example demonstrates how React state management can integrate with D3 data loading. The visualization shows a loading screen with a text summary of the CSS named colors dataset displayed in a large monospace font. The code uses React's `useState`, `useEffect`, and `useCallback` hooks alongside D3's `csv` function to fetch and parse the data from a GitHub gist URL. Once loaded, the `message` function formats the dataset size, row count, and column count for display, highlighting the interaction between React's component lifecycle and D3's data utilities.

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The React application uses a `useState` hook to track the cursor’s coordinates, and a `useCallback` event handler updates the circle’s `cx` and `cy` attributes on every mouse movement. Rendered with ReactDOM into an SVG element, the example relies on the `onMouseMove` event to capture pointer position, with the circle’s radius fixed at 30 pixels.

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors. It uses the D3.js library’s `d3.csv` function to fetch the remote dataset and then displays a summary of the parsed data in a large text element. The summary reports the file size in kilobytes, the number of rows, and the number of columns. Cleanup of the asynchronous data-loading process is handled with Promises, making the code concise. The visualization is minimal, focusing purely on confirming that the data was successfully retrieved and structured.

Fork of Smiley Face Part VI

A grid of 18 randomized smiley faces, each rendered as an independent SVG composed of layered React components for the face, eyes, mouth, and background circle. The code combines React's component model with D3’s `arc` generator to draw the mouth path, and uses a `FaceContainer` to manage the SVG viewport and centered translation. Each face’s dimensions, stroke width, eye placement, and mouth radius are generated with `d3.range` and `Math.random`, producing varied expressions across the grid.

Fork of Smiley Face Part V

A yellow smiley face rendered in SVG is composed from modular React components for the background circle, eyes, and mouth. The face uses a black stroke for the outline, with the mouth drawn using d3's `arc` generator. React fragments group the eye circles without adding extra DOM nodes. Components receive positioning via props, and the SVG is centered using a transform. The code demonstrates splitting React components into separate ES6 module files.

Fork of Smiley Face Part IV

A React component renders a yellow smiley face in SVG using D3's arc generator for the mouth. The face consists of a background circle with a thick black stroke, two eye circles, and a mouth path created by `d3.arc()` with specified inner and outer radii and start/end angles. Layout is computed manually with fixed dimensions and offsets, and React's JSX syntax defines each SVG element.

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG, composed of a large circular head, two eyes, and a mouth arc. The visualization is built using React for component structure and D3’s `arc` API to generate the mouth path. All shapes are positioned relative to a central transform, with fixed pixel dimensions for the face, eyes, and stroke width. The code uses ReactDOM to mount the SVG into the page, and D3 v5 is loaded externally, with rendering handled entirely through declarative SVG elements.

A week in San Francisco - Line chart

This line chart displays a week of temperature data for San Francisco, plotting temperature against time over a seven-day period. The visualization uses a smooth, curved line to connect data points, with labeled axes for both time and temperature, alongside a clear title. The code imports functions from D3 v5, including `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom`, to build the chart within an SVG canvas. The data is loaded from a CSV file and mapped to the time and temperature scales, with grid lines and a maroon stroke enhancing readability.

Jan 21, 2021

Multing Data for Multiple Lines

This chart displays population estimates and projections over time for various world regions. A legend uses color to distinguish the regional lines. The data is loaded from two CSV files and processed with the `melt` function. The visualization is rendered as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, and `axisBottom` for axes, and `line` with `curveBasis` for the curves. The lines are colored using `schemeCategory10` and the chart includes a custom color legend.

Jan 20, 2021

Selecting a year of a line chart

This interactive line chart visualizes population estimates for global regions from 1950 to 2100, combining data from two UN CSV files. A vertical black line marks the currently selected year, which updates when the user hovers over the plot area, prompting a re-render through a state-setting callback. The visualization uses D3.js v5 to scale time and linear axes, render multi-line paths with a basis curve, and display a categorical color legend. The SVG output includes axis tick marks, labels, and a title, all styled via CSS.

Mar 29, 2020

Line chart with Multiple Lines

This example visualizes a week of temperature readings from multiple cities around the world as a multi-line chart. The visualization uses D3 v5 to render SVG paths, with color distinguishing each city via a categorical color scale. Temperature data is loaded from a CSV, and axes are drawn using D3’s `axisLeft` and `axisBottom` functions. A legend, built with a custom `colorLegend` module, maps each color to its city. The lines use a basis curve and a multiply blend mode to handle overlapping strokes.

Mar 27, 2020

circles on the map

This map visualizes global population estimates for 2018 using circles sized by population, overlaid on a natural Earth projection. Country boundaries are drawn as SVG paths, with circles positioned at each country’s geographic centroid and scaled using a square-root scale. The visualization uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and a custom size legend. Data comes from a UN population estimates CSV joined with a TopoJSON world atlas, processed with the topojson feature API.

Mar 26, 2020

Scatter Plot with Menus

This interactive scatter plot displays relationships between attributes of cars from the auto-mpg dataset, with dropdown menus allowing the user to select which columns appear on the x- and y-axes. The visualization updates smoothly with animated transitions, as circles grow from the center to their new positions when a menu selection changes. Built with D3 v5, the example uses reusable functions for the dropdown menus and scatter plot, leveraging d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to render the SVG axes and data points.

Mar 26, 2020

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The D3 v5 code uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to map data to SVG coordinates, with gridlines and rotated axis labels. Circles are rendered with `selectAll("circle").data(data).enter().append("circle")`, and the CSV is loaded asynchronously via `csv()`. A title and styled tick marks complete the chart, which uses semi-transparent steelblue circles to show data density.

Mar 25, 2020

choropleph with interactive filtering

This choropleth map displays world countries colored by economy category, with an accompanying ordinal color legend. Clicking a legend category filters the map by fading non-matching countries to low opacity and highlighting the selected group. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for projection, `scaleOrdinal` with `schemeSpectral` for colors, and `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files, rendered as SVG paths.

Mar 24, 2020

choropleph

This choropleth map uses a spectral color scale to visualize the economic classification of each country, with a hover effect that fills the selected country in black and a legend displaying the ordinal color domains. Built with d3.geoPath and the geoNaturalEarth1 projection, it renders SVG paths from TopoJSON world-atlas data and merges additional TSV attributes. Interactive pan and zoom are provided by d3.zoom, while the color legend is constructed manually with circles and text using scaleOrdinal and schemeSpectral.

Mar 23, 2020

Color and size legend

This example demonstrates two custom D3 legend components rendered as SVG: a color legend for categorical values and a size legend for continuous quantitative values. The color legend uses `scaleOrdinal` to map fruit names to distinct colors, while the size legend employs `scaleSqrt` to translate numeric ticks into circle radii. Both legends rely on D3 v5’s data join pattern with enter/merge/exit selections, and the size legend filters out zero values from `ticks()` while setting explicit spacing and circle fill properties.

Mar 22, 2020

World countries tree

This visualization displays the hierarchical structure of world countries organized by continent and subregion, using a collapsible tree layout rendered as SVG. The code employs D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` generators to compute node positions and draw curved links, while `zoom` enables panning and scaling. Text labels vary in font size by depth, and the data comes from a local `data.json` file.

Mar 20, 2020

art tree

This visualization displays a hierarchical tree of geographic regions, starting from “World” and branching down through continents and subregions to individual countries. The layout is generated using the `d3.tree` and `d3.hierarchy` functions, with data loaded from a local JSON file. Connections between nodes are drawn as horizontal SVG paths created with `d3.linkHorizontal`, while the tree’s branching structure is positioned based on the viewport dimensions.

Mar 20, 2020

blank canvas

A blank SVG canvas fills the browser viewport with a single rounded rectangle. The example demonstrates how to set up an SVG element to match the full client width and height. Using d3.select, the code reads `document.body.clientWidth` and `clientHeight` to size both the SVG and the `<rect>` element, which uses an `rx` attribute for rounded corners. The stylesheet fixes the body position with hidden overflow, ensuring the canvas remains stable and without scrollbars.

cheap tricks for interaction

This interactive map projection displays world countries over a dark blue sphere using D3.js v5 and topojson. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render geographic features, loading country boundaries from the world-atlas 50m dataset. Users can pan and zoom the map via d3.zoom event handling, which applies an SVG transform to the map group. Country names appear as tooltips on hover, derived from the accompanying TSV file, while the green country fill changes to red on mouse-over through CSS hover states.

let s make a map with d3

This example displays a world map with countries rendered in green on a dark blue sphere, using D3 v5 and TopoJSON. It projects geographic data with the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, drawing country boundaries from the world-atlas TopoJSON dataset. The map loads country features from the 110m resolution file and applies sphere and country CSS classes to the SVG paths.

Bowl of fruits, hover to select

Five fruit circles appear in a row, with apples rendered larger and red, lemons smaller and yellow. Hovering over a fruit selects it, adding a thick black stroke, and hovering away removes the selection. The visualization uses D3 v5 with an SVG rendering and animated transitions, updating the data-bound circles through a custom `fruitBowl` module that leverages `scaleOrdinal` for color and radius scales.

Bowl of fruits, click to select

Circles representing apples and lemons arrange themselves in a row, with a black stroke highlighting the fruit selected by a click. The visualization demonstrates animated enter, update, and exit transitions: apples shrink away, one apple morphs into a lemon, and the selection stroke updates. It uses D3 v5 with data joins and ordinal scales for color and radius, while `transition().duration(1000)` animates position and size changes.

Bowl of fruits, general update pattern

Five pieces of fruit sit in a brown SVG bowl, rendered with D3 v5’s general update pattern. Apples and lemons are distinguished by color and radius via `scaleOrdinal`, while circles and text labels update in place as `setTimeout` calls modify the array. Data joins handle enter, update, and exit selections manually through `selection.merge` and `.remove()`.

Mar 18, 2020

Bowl of fruits, general update pattern

Five fruit circles animate in an SVG bowl, with apples and lemons distinguished by color and radius via d3.scaleOrdinal. The general update pattern uses d3 data joins: enter transitions expand circles from zero radius, merged updates reposition types, and exit transitions shrink before removing. Timed array mutations trigger eat, replace, and filter operations.

Mar 17, 2020

World Population Area Chart

This area chart displays world population growth over time, using a maroon filled region beneath a line to emphasize the rising trend. The visualization loads data from a CSV file and renders it as an SVG using d3.area with curveBasis, scaling time on the x-axis and linear population on the y-axis. Axes are generated with d3.axisBottom and d3.axisLeft, formatted to abbreviate billions, and styled via custom CSS classes.

Mar 15, 2020

A week in San Francisco - Area Charts

This example visualizes a week of temperature data in San Francisco using a filled area chart. A smooth, maroon area curve spans the time axis, with gridlines and labeled axes for time and temperature. The visualization uses D3 v5 APIs including `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, rendering to SVG. Data is loaded asynchronously from a remote CSV file, with timestamps parsed as dates and temperatures converted to numbers. The `curveBasis` interpolation smooths the line.

Mar 15, 2020

A week in San Francisco - Scatter plot

This scatter plot visualizes temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Each circle represents a data point, rendered in SVG with a steelblue fill and opacity. The code uses D3 v5 functions like `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and grid lines. Data is loaded as CSV from a remote dataset, parsed into JavaScript Date objects and numeric values, then bound to circles via `selectAll` and `enter`. A rotated y-axis label and title are included for clarity.

Mar 11, 2020

scatter plot

This scatter plot displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. Each circle represents a country, positioned along a linear x-axis for population and a point scale y-axis for country names. The code uses d3.csv, scaleLinear, scalePoint, axisBottom, axisLeft, and format to render the SVG chart with a custom tick formatter, grid lines, and axis labels.

Mar 11, 2020

customization axis (Making a Bar Chart)

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The axis is customized by removing default tick lines and domain, adding a formatted tick label that converts values to billions, and including a custom axis label and title. Data is loaded from a CSV file using D3’s `csv` function.

Mar 10, 2020

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization uses D3 v5 with `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for customized axes. Rectangles are rendered in SVG with a steelblue fill, and population values are multiplied by 1000 to reflect actual figures.

Mar 10, 2020

face with D3.js eyebrows moving

A yellow D3.js face with black-outlined features animates its eyebrows up and down in a repeating motion. The face, rendered as SVG, uses a circle for the head, two circles for eyes, and a D3 arc path for a mouth. Two rectangular eyebrows move via chained `transition().duration()` calls on an SVG group. The visualization is built with the d3 library (v5), using the SVG rendering and animation capabilities within an HTML page.

Mar 8, 2020

Let's make a face with D3.js

This example builds a cartoon face from basic SVG shapes using D3.js v5. A yellow circle forms the head, while smaller circles, rectangles, and an arc path create the eyes, eyebrows, and mouth. The code uses d3.select to manipulate the SVG, and d3.arc to generate the mouth’s path with specified angles. All elements are positioned relative to a central translation, with fixed pixel offsets for facial features. The result demonstrates how D3’s shape generators and selections can construct simple compound graphics declaratively.

Mar 8, 2020

Shapes with SVG and CSS

A grid of SVG shapes—circles and rectangles—demonstrates how CSS classes and inline styles set fill colors, strokes, and geometry within an SVG canvas. The example uses plain SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with a `<g>` element applying a transform and a class named `lines` controlling stroke properties via the linked `styles.css` stylesheet. A commented-out line shows unused code, while the visible path uses `fill="none"` with a custom stroke.

Mar 8, 2020