Kazushige Okuma

Voronoi Overlay With Labels and Another Labels

This example displays global COVID-19 death totals over time for multiple countries as log-scale line charts, rendered as SVG in React. A Voronoi overlay, created with `d3.Delaunay.from` and `voronoi.renderCell`, enables mouse hover detection on any data point, highlighting the corresponding country's line and showing a tooltip with the date and death count. A dropdown menu allows selecting a specific country, though the selected line is not visually distinguished in the code. Data comes from the CSSE COVID-19 time series CSV.

Nov 9, 2021

Missing Migrants Multiple Views with Brushing

This interactive visualization combines a bubble map and a date histogram to explore global missing migrant incidents. Users brush over the histogram to filter the map, revealing the geographic distribution of deaths and missing persons within a selected time range. The map uses a natural Earth projection with proportional circle sizes for death counts, while the histogram aggregates monthly totals. Built with D3.js v7 and React, it employs `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.bin`, `d3.brushX`, and `d3.scaleSqrt` for data processing and rendering as SVG elements. Data comes from a CSV of Missing Migrants Global incidents.

Nov 3, 2021

Voronoi Overlay With Labels

This example displays cumulative global COVID-19 deaths over time for multiple countries using a log-scaled line chart. Hovering over any line reveals a tooltip with the country name, death count, and date, while the active line is highlighted. The chart uses React with d3.v5’s `scaleTime`, `scaleLog`, and `line` generators, and implements a Voronoi overlay via `d3.Delaunay.from` and `voronoi.renderCell` to capture mouse events across the SVG. Data comes from the CSSE COVID-19 global time-series dataset, loaded with `d3.csv`.

Nov 3, 2021

Corona Virus Deaths Over Time By Country With Voronoi Overlay

This visualization displays global cumulative COVID-19 death totals over time for each country, using a logarithmic y-axis to accommodate wide value ranges. A Voronoi overlay, generated with `d3.Delaunay` from the d3-delaunay package, enables smooth hover interaction to highlight any country’s trajectory, even when lines overlap. The React-based chart, built with D3 v5, renders SVG paths for each country’s timeseries, with the active country’s line emphasized in black. Data comes from the CSSEGISandData COVID-19 time series CSV, parsed via `d3.csv` and `timeParse`. Axes and gridlines are drawn using `axisBottom` and `axisLeft`.

Nov 2, 2021

Corona Virus Deaths Over Time By Country (React + D3 Axis)

This chart displays cumulative COVID-19 death counts over time for multiple countries, using a log-scaled y-axis to handle the wide range of values. Each country’s timeseries is rendered as an SVG path generated with d3.line, while d3.scaleTime and d3.scaleLog define the axes. React components wrap the D3 axis generators (axisBottom, axisLeft) to create the gridlines and labels. Data comes from the CSSEGISandData COVID-19 global time series CSV, loaded via d3.csv and transformed with d3.timeParse.

Corona Virus Log Y Axis Chart (React + D3 Axis)

This chart tracks global cumulative COVID-19 deaths over time using a logarithmic y-axis to accommodate exponential growth. Rendered with React and D3 v5, it employs `scaleTime` and `scaleLog` with `d3.line` to plot the trend, while custom `XAxis` and `YAxis` components leverage `axisBottom` and `axisLeft` with gridlines and formatted ticks. Data comes from the CSSE COVID-19 time series CSV, which is fetched and aggregated daily. The SVG visualization includes labeled axes and a marker line indicating the final date (11/30/2021).

Corona Virus Linear Y Axis Chart (React + D3 Axis)

This example shows the cumulative global death toll from COVID-19 over time, plotted on a linear y-axis. The React component renders an SVG line chart using D3 scales (`d3.scaleTime`, `d3.scaleLinear`) and axes (`d3.axisBottom`, `d3.axisLeft`), with gridlines and annotation markers. It loads time-series data from a public GitHub CSV via `d3.csv`, aggregates daily totals, and draws the path with `d3.line`. The chart fills the viewport and updates automatically when the data arrives.

Corona Virus Line Chart (React + D3 Axis)

This example visualizes the global cumulative death toll from COVID-19 over time as a single grey line chart. The visualization combines a React app for layout and component composition with D3 v5 utilities for scales and axis rendering. Data is fetched from a CSV maintained by the CSSE at Johns Hopkins, aggregated globally per day, with D3’s `csv` and `timeParse` handling ingestion. The chart uses D3’s `scaleTime` and `scaleLinear` for axes, `line` for the path, and `axisBottom` for the x-axis, while custom marker lines highlight the 5-million-death threshold and the final date.

Analyzing Missing Migrants-Part2

This bar chart visualizes the monthly total number of dead and missing migrants over time, using a dataset from the Missing Migrants Project. The visualization processes incident records by binning them into monthly intervals with d3.bin, then summing the corresponding casualty values. Bars are rendered as SVG rectangles in React, with scales from d3.scaleTime and d3.scaleLinear positioning marks along the axes. Tooltips display the exact count per month via the SVG title element.

Loading and Parsing Corona Virus Data

This example displays the total number of global COVID-19 deaths from the Johns Hopkins time series dataset, formatted with commas and labeled with the latest date column. It renders the result in a large red `<pre>` element. The code uses React 16.9 with hooks (`useState`, `useCallback`, `useEffect`) and D3 v7’s `csv` and `format` functions to fetch and parse the data, then reduces the last column values to calculate the sum.

Oct 30, 2021

HIV/AIDS Choropleth Map

This choropleth map visualizes the global share of the population infected with HIV/AIDS among adults aged 15–49 for the year 2017, using a yellow-to-red sequential color scale. It renders country boundaries as SVG paths via d3.geoPath and d3.geoNaturalEarth1, with graticule and interior borders drawn from TopoJSON data. Missing country data appears white. The map is built with React hooks for data loading and D3’s scaleSequential with interpolateYlOrRd, pulling HIV prevalence from an IHME CSV dataset.

Oct 30, 2021

Missing Migrants Scatter Plots Log Scale

A scatter plot displays the relationship between incident dates and the total number of dead and missing migrants, with a log-scaled y-axis to handle the wide range of values. The visualization uses D3's `scaleTime` and `scaleLog` to map the data, rendering circles via React components. Each circle includes a native SVG tooltip showing the formatted date. The data comes from a CSV file of missing migrant incidents loaded with `d3.csv`. The chart is built using React with D3 v7, rendering to SVG.

Oct 29, 2021

Missing Migrants Multiple Views

This interactive visualization combines a bubble map and a date histogram to explore global missing migrant incidents. The map uses a D3 geoNaturalEarth1 projection with geoPath to plot circles scaled by the total number of dead and missing, while the histogram bins incidents by month using d3.bin and aggregates deaths with d3.sum. Data comes from a CSV of Missing Migrants records, rendered as SVG elements within a React framework.

Oct 27, 2021

Missing Migrants on a Map

This visualization maps the global locations of missing migrants, with semitransparent circles sized proportionally to the total number of dead and missing at each coordinate. The map uses a natural Earth projection rendered with d3.geoPath, combining world landmasses, graticules, and country borders from the world-atlas TopoJSON dataset. The CSV data is loaded and parsed with d3.csv, while d3.scaleSqrt maps the migrant counts to circle radii. The React component structure uses useState and useEffect hooks to fetch and display the data as SVG circles.

Oct 26, 2021

Points on a Map

Global city populations are visualized as semi-transparent points on a natural Earth projection, with point size encoding population via a square-root scale and a maximum radius of 15 pixels. The map includes graticules, country borders, and landmasses rendered using `d3.geoPath` and world-atlas TopoJSON data. City coordinates and populations come from a CSV loaded with `d3.csv`, while the React application uses hooks to fetch and render the visualization with SVG.

Oct 25, 2021

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can change the X and Y axes via dropdown menus, and hovering over the color legend highlights points from a selected species while dimming others. Built with React and D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG circles to render the data, with the legend and marks responding to mouse events through React state.

Oct 25, 2021

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to compare any two measured attributes. Positioned on the x- and y-axes are dropdown-selected variables, while color encodes the flower species. The visualization uses React for the interface and D3 v7’s `scaleLinear`, `scaleOrdinal`, `csv`, and `extent` to load and map data to SVG circles. Hovering over a point reveals its exact value via a native tooltip. A color legend with categorical swatches clarifies the species mapping.

Oct 25, 2021

Polished Scatter Plot with Menus

This interactive scatter plot explores the Iris flower dataset, visualizing relationships between measurements like petal length and sepal width. Users select which attributes appear on the X and Y axes through dropdown menus built with React Dropdown, while the SVG visualization updates dynamically using React state management. The chart renders circles for each data point via D3 scales and components, with axis labels, tick marks, and tooltips providing context on the selected measurements. The interface uses D3 v7 for scales and data parsing, with React 16.9 handling component rendering and menu interactions.

Oct 24, 2021

Scatter Plot with Colors

A scatter plot of the Iris dataset renders four numeric attributes as x- and y-coordinates, with points colored by species using D3's `scaleOrdinal`. React dropdowns let viewers choose which attributes to compare, while numeric axes are generated with `scaleLinear` and annotated via `AxisBottom` and `AxisLeft` components. The visualization uses D3 v7 within a React framework, rendering SVG circles with tooltips using the `title` element.

Oct 24, 2021

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, where users can select which quantitative attributes (like sepal length or petal width) to plot on the X and Y axes via two dropdown menus built with React’s `useState` and the custom `Dropdown` component. The axes and points are rendered as SVG elements using `d3.scaleLinear` and `d3.extent` for scaling, with tick marks generated by the `AxisBottom` and `AxisLeft` components. Each data point includes a native `<title>` tooltip showing its numeric value.

Oct 23, 2021

Menu with React

This example demonstrates a simple pet-selection menu built with React. It shows a dropdown list of animal options, with a selected value managed through React's `useState` hook and displayed in the browser's console. The code uses React 16.9 and ReactDOM to render the interface, while a `Dropdown` component maps over an array of options to create the select element. The label and dropdown are styled with large, user-friendly text, and the initial selection is set to 'hamster'.

Oct 23, 2021

Ract Starter

A single-page React application renders static text within a full-window layout. The code imports React and ReactDOM, defines a functional App component that returns a div containing the string "Hellor React!", and mounts it into the root element using `ReactDOM.render`. It loads React production builds via CDN links in `index.html` and does not include any data visualization logic or external charting libraries.

Oct 22, 2021

Working with Time

A line chart shows temperature readings over one week in San Francisco, with a smooth curve connecting daily data points and circles marking each observation. The visualization uses React to render SVG elements, with D3.js scales handling time and linear mappings. The code employs `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` for axis ticks, while `line` and `curveNatural` generate the curved path. Data comes from a CSV dataset of hourly temperatures, loaded via `csv` and parsed into `Date` objects.

Oct 22, 2021

Stylized Scatter Plot

This stylized scatter plot displays the Iris Data Set, mapping petal length against sepal width for individual flowers. The visualization, rendered as an SVG using React and D3 v7, features a clean, modern aesthetic with a Poppins font and a muted color palette. It employs `scaleLinear` to compute the x and y axes, and generates tick marks and labels using the custom `AxisBottom` and `AxisLeft` components. The `Marks` component draws the data points as circles, with HTML `<title>` elements providing tooltip functionality.

Oct 21, 2021

Stylized Bar Chart

This stylized bar chart displays the population of 15 countries from 2019 UN data, using a horizontal bar layout with a clean, minimal aesthetic. The visualization uses d3.scaleBand and d3.scaleLinear to map country names and population values, while React components render SVG elements for the axes and marks. The chart emphasizes readability with a Poppins font, muted color palette, and formatted tick labels that convert large numbers to billions using d3.format. A native SVG <title> element provides tooltip functionality on hover, and the data is loaded asynchronously via d3.csv from a GitHub gist.

Oct 21, 2021

Refactoring Bar Chart

This example shows a horizontal bar chart displaying the top 10 countries by population in 2020, based on UN population data fetched from a GitHub gist. The chart is built with React components that render SVG elements, using D3 scales to map population values to bar widths and country names to vertical positions. The `scaleBand` and `scaleLinear` functions handle the axis mappings while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the tick labels and rectangular bars from the data array. The visualization demonstrates a modular refactoring approach where D3 utilities are used for data loading and scaling, while React manages the component structure and SVG rendering.

Axes with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, with axes rendered using React components and D3 scale functions. It loads CSV data from a GitHub-hosted UN Population dataset, parses the population column with `d3.csv`, and uses `scaleBand` and `scaleLinear` to position bars and ticks. The SVG output is created in a React component, with axis lines, tick labels, and rectangles generated from mapped data arrays.

Margin Convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top ten countries by 2020 population from a UN dataset. The chart uses React state to load the CSV data via `d3.csv`, then maps it to SVG rectangles positioned with `d3.scaleBand` and `d3.scaleLinear`. The outer `<svg>` is sized to 960×500, while an inner `<g>` element is translated by margin offsets, showing how to reserve space for axes or labels. The visualization highlights reusable patterns for combining React with D3’s data utilities.

Fork of Rendering Data with React

This example visualizes the top 10 countries by 2020 population as horizontal bars, using React state to manage the loaded data and render each rectangle as an SVG element. The chart loads CSV data from a GitHub gist using `d3.csv`, parses the population column, and applies `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis to position and size the bars. The React hooks `useState` and `useEffect` handle the asynchronous data fetch, while `d3.max` determines the scale domain.

Rendering Data with React

This visualization loads CSS named color data from a CSV file and renders each color as a wedge in a full circular burst. The code uses React hooks (`useState`, `useEffect`) to fetch the data asynchronously with D3’s `csv` utility, then maps the resulting array through `pie().value(1)` and `arc()` to generate SVG path elements. Each path’s fill is set directly from the color’s hex value in the dataset, producing a vivid radial display of all named CSS colors.

Loading Data with React & D3

This example demonstrates a minimal React application that uses D3's `csv` utility to fetch a dataset of CSS named colors from a remote URL. The React component manages the data with a `useState` hook and a `useEffect` hook, displaying a summary message once the data is loaded. The message counts the data's size in kilobytes, the number of rows, and the number of columns using `d3.csvFormat`. While the data loads, the interface shows "Loading..." in a large `<pre>` element. The visualization highlights the integration of D3's data-loading and formatting functions within a React state-driven workflow.

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7, reporting the file size, row count, and column count for a dataset of CSS named colors. It uses `d3.csv` to fetch and parse the remote CSV file, then displays the summary statistics in a large `<pre>` element by updating its text content. The data originates from a GitHub gist containing named color values, and the code also includes a commented-out alternative approach using the Fetch API with `async`/`await` and `d3.csvParse`.

A program that follows your mouse with a circle

A circle follows the mouse cursor across an SVG canvas. The visualization uses React state to track the cursor's pixel coordinates and updates the circle's center position on every mouse move. The code imports the `arc` function from d3 but does not use it; rendering is handled entirely through React's declarative SVG elements. The example demonstrates a simple interactive pattern using React's `useState` and `useCallback` hooks within a D3-styled viewport.

Fork of Smiley Face Part V

A grid of 18 smiley faces, each rendered with randomized facial features, demonstrates component reuse and modularity in React. The faces vary in eye offset, eye radius, mouth width, and mouth radius, producing a playful matrix of distinct expressions. The visualization splits React components into separate ES6 modules, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, using React Fragments for grouping. D3’s `arc` API generates the mouth paths, while the `range` function from d3 creates the grid layout, with all elements rendered as SVG.

Oct 18, 2021

Fork of Let's Make a Face Adjusted mouse

This example shows a yellow smiley face drawn with SVG primitives: a circular head, two eyes, and an arc-based mouth. The React application uses D3 v7 functions like `d3.arc` for the mouth path and `d3.line` to generate a zigzag line for the hair. It demonstrates combining React components with D3 shape generators, with all elements positioned relative to the center using SVG transforms. The code includes static face geometry only, with no interactive mouse handling despite the title.

Oct 18, 2021

Smily Face Part I

This example displays a static yellow smiley face built from three SVG circles, with the face outline and two eye shapes positioned on an empty background. The code defines the circles directly in the HTML structure with fixed coordinates and attributes, while React and ReactDOM are loaded via external scripts and logged to the console. The visualization uses the SVG rendering approach with no interactive or animated behavior.

Oct 17, 2021

Bowl of fruits- Animated Transition

A bowl of fruits demonstrates animated transitions between data-bound SVG circles, using D3 v5 data joins and enter/update/exit patterns. Fruits (apples and lemons) are sized and colored with ordinal scales, and each state change—removing, replacing, or filtering fruit—triggers a one-second `transition` on circle radii and positions. The code imports `scaleOrdinal` and `select` from D3, and explicitly uses `.data()` with key functions, `merge()`, and `transition().duration()` to smooth updates. Population data appears in the CSV but is not used by the visualization, which relies solely on generated fruit objects.

Oct 15, 2019

Moving Bowl of fruits- General Update Pattern(Nested Version)

This example demonstrates the general update pattern with a nested version, showing a bowl of fruits where apples are eaten, replaced by lemons, or removed, with each change animating the fruit's horizontal position, radius, and color. The visualization uses D3 v5's SVG rendering and animation, with a color scale mapping apple to pink and lemon to yellow, and a radius scale determining each fruit's size. The index.js script uses setTimeout to sequentially alter the fruit data, while fruitBowl.js applies the enter, update, and exit logic to smoothly transition the circles and text labels.

Oct 10, 2019

Selecting a Year on Line Chart

A line chart shows population change from 1950 to 2100 across world regions, with a vertical black line marking a user-selected year. Clicking or dragging on the chart updates the line position, and hovering triggers the same interaction. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `curveBasis`, and `nest`, plus a custom `colorLegend`. Data comes from UN population estimates and medium variant projections, loaded via D3's `csv` function and processed with `melt` to reshape the data into tidy format.

Oct 8, 2019

Bowl of fruits- Hover to Select

Five circles represent fruits in a bowl using an ordinal color scale for apples and lemons, with hover interactions selecting a fruit by adding a black stroke. The visualization demonstrates data joins in D3 v5, where entering circles animate from radius zero, updated fruits transition to new positions and types, and exiting circles shrink away. Population data from a CSV file is not displayed in this code, which instead focuses on the `selection.data`, `transition`, and mouse event patterns in a reusable `fruitBowl` function.

Oct 4, 2019

Bowl of fruits- Click to Select

A bowl of fruits visualizes a changing dataset of five circles, each representing an apple or lemon, with color and radius mapped through d3.scaleOrdinal. Clicking a fruit selects it, highlighting the circle with a black stroke. The code uses d3.forceSimulation-like transitions via `transition.attrTween` syntax, but here it applies `transition().duration(1000)` with `attr` calls to animate enter, update, and exit states. Data mutations—removing fruits, changing an apple to a lemon—occur at timed intervals, demonstrating D3’s data join and animated updates in SVG.

Oct 4, 2019

Bowl of fruits- General Update Pattern(Nested Version)

This example demonstrates the general update pattern for nested selections, showing a bowl of fruits where apples are dynamically removed or replaced with lemons over time. The visualization uses d3.scaleOrdinal to map fruit types to colors and radii, while the fruitBowl function manages enter, update, and exit selections across grouped SVG elements. Data updates occur via setTimeout calls that modify the fruits array, triggering re-renders that animate circles and text labels within each group. The code relies on d3-selection’s merge() method to handle transitions between states efficiently.

Oct 3, 2019

Blank Canvas

A blank slate of steel blue fills the browser window, sized to the full viewport via D3’s `select` and `.attr` methods. The example demonstrates the foundational rendering setup with d3.v5 and an SVG canvas, starting with an empty data-less rectangle that has rounded corners (`rx`). It references a `data.csv` file containing nominal GDP figures for ten countries, though the code itself does not yet visualize that data. The HTML loads D3 from a CDN and applies styling from an external stylesheet.

Oct 3, 2019

Melting Data for Multiple Lines

This visualization shows population change over time for multiple world regions, displayed as separate colored lines on a line chart. The data is processed by melting a wide-format CSV file into a tidy format and concatenating historical estimates with medium-variant projections. The code uses d3.csv, d3.nest, d3.line, and d3.curveBasis to generate the paths, with d3.axisBottom and d3.axisLeft for the axes. A d3.scaleOrdinal color scheme distinguishes regions, and a custom colorLegend component renders the categorical legend.

Oct 3, 2019

World Population Area Chart

This area chart visualizes world population growth over time, using a filled path to show the magnitude of change. The chart plots population (in billions) on the y-axis against a time series on the x-axis, with data loaded from a CSV file via `d3.csv`. The visualization is built with D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.area` with a basis curve. SVG rendering handles the axes, gridlines, and the smooth maroon area path.

Oct 1, 2019

Circles on a Map

This example displays a natural Earth projection world map with semi-transparent teal circles sized by each country’s 2018 population estimate, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to position circles at country centers. A d3.scaleSqrt maps population values to circle radii, and a custom size legend shows graduated tick marks. Countries missing data appear pink, and hovering highlights them turquoise. The visualization loads UN population CSV data and TopoJSON world geometry via d3.csv and d3.json, renders SVG paths and circles, and supports zooming through d3.zoom.

Line Chart with Multiple Lines

A line chart displays one week of temperature data from multiple cities, ordered by their final recorded values. The visualization uses D3 v5 with SVG rendering. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `curveBasis` for smooth paths, and `d3.nest` to group data by city. A custom color legend communicates the city categories, while `d3.axisBottom` and `d3.axisLeft` generate the labeled gridlines. Data originates from the Data Canvas-Sense Your City dataset.

Color and Size Legend

This example demonstrates two custom legend components built with D3 v5: a categorical color legend for fruit categories and a quantitative size legend for a numeric scale. The color legend maps ordinal domain values to a range of colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to translate tick values into circle radii. Both legends render as SVG groups with circles and text labels, with spacing and offsets applied via `attr("transform")` and positioned within an `svg` element.

Temprature in San Francisco Line Chart

This line chart visualizes one week of hourly temperature measurements in San Francisco, with a smooth curve showing temperature fluctuations over time and labeled axes for "Time" and "Temperature." The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the smooth path. Data is loaded asynchronously from a CSV file using `d3.csv`, parsed with timestamps converted to Date objects, and rendered as SVG elements with styled grid lines and a title. The chart includes custom tick styling and axis labels, with the temperature line drawn in maroon against a clean white background.

Choropleth Map

This choropleth map visualizes the nominal GDP of countries using a color scale based on income group, with darker colors indicating higher values. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from TopoJSON data loaded from the World Atlas. A color legend, built with a custom `colorLegend` component, displays the ordinal scale domains using `d3.scaleOrdinal` and the `schemeSpectral` color range. The visualization also supports zooming through `d3.zoom`, and country tooltips appear on hover via SVG `<title>` elements.

Sep 29, 2019

Let's make a face

A smiley face is drawn with yellow skin and black features on a blank SVG canvas. The eyebrows animate upward and back down over two seconds. The example demonstrates layered SVG construction using d3.select to build a face, positioning features with transforms, and applying a simple animation with d3.transition to move the eyebrow group.

Sep 29, 2019

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two numeric columns from a dataset of car characteristics by selecting columns from dropdown menus for the x- and y-axes. The visualization renders 398 data points as semi-transparent red circles, which animate from the center of the chart to their positions upon selection change. The example uses D3 v5’s `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to build the plot, with custom reusable functions `dropdownMenu` and `scatterPlot` managing menu interactions and chart updates. Data is loaded from a CSV file via `d3.csv`.

Sep 29, 2019

Cars Scatter Plot

This scatter plot displays the relationship between weight and horsepower for cars from the UCI Machine Learning Repository's auto-mpg dataset. Each red semi-transparent circle represents a car, with position determined by the linear x- and y-axes. The visualization uses d3.scaleLinear for coordinate mapping, d3.axisBottom and d3.axisLeft for the axes, and d3.csv to load the external data. SVG rendering is used for all graphical elements, including grid lines, tick labels, and axis annotations.

Sep 27, 2019

Choropleth Map with Interactive Filtering

A choropleth map of global nominal GDP uses color to encode economic values per country. Users click entries in an ordinal color legend to filter the map, dimming countries not belonging to the selected category and highlighting those that do, while a subtle sphere background remains. The map and legend are rendered as SVG, built with D3 v5, using `d3.geoNaturalEarth1` for projection and `d3.geoPath` for drawing countries. Data is loaded from TSV and TopoJSON sources, with the zooming interaction handled via `d3.zoom`.

Sep 27, 2019

Cheap Tricks for Interation

This example shows a zoomable world map colored by country, with each country’s name appearing as a tooltip on hover. The visualization uses d3.zoom to enable pan and zoom transformations on the SVG group, while d3.geoPath with a geoNaturalEarth1 projection renders the geographic outlines. Country boundaries come from the world-atlas TopoJSON dataset, with names matched via TSV data. Hovering highlights a country in red via CSS, and d3.append adds title elements for the tooltips.

Sep 25, 2019

World Countries Tree

A hierarchical tree diagram displays the structural relationships among world regions, subregions, and countries, using data organized in a nested JSON format. The visualization renders with D3 v5's `tree` layout and `linkHorizontal` path generator to create a horizontal branching layout. SVG elements are used for rendering, with text labels sized according to depth level. The viewport supports pan and zoom interactions through D3's `zoom` behavior, allowing users to explore the complete hierarchical dataset.

Sep 25, 2019

Population of top 10 countries

This bar chart ranks the top 10 countries by nominal GDP, using horizontal bars sorted by value. It is rendered as SVG with D3 v5, using `csv` to load the data, `scaleLinear` and `scaleBand` for axes, and `axisLeft` and `axisBottom` for ticks. The bars are drawn as `rect` elements with steelblue fill, and the data comes from `data.csv`.

Sep 24, 2019

Let's make a map

This example visualizes the nominal GDP of ten countries from a CSV dataset on a natural Earth projection map. The map first draws a blue sphere backdrop using `d3.geoNaturalEarth1` and `d3.geoPath`, then overlays country outlines in light green from the world-atlas TopoJSON file. Countries are rendered as SVG paths using the `feature` method from topojson, with GDP values not yet linked to any visual encoding.

Sep 24, 2019

Making a Barchart

A horizontal bar chart displays population figures for the ten most populous countries, with bars labeled by country name along the y-axis and a linear population scale on the x-axis. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. Data is loaded from a CSV file using `d3.csv`, with population values multiplied by 1000 for display. The SVG output renders steelblue rectangles with a font size of 1.5em for text labels.

Custermizing Axes

A bar chart displays the population of the top ten most populous countries, with horizontal bars sorted by value. The chart customizes its axes by removing the y-axis line and ticks, adding a custom x-axis label, and formatting tick labels with abbreviations like "1.41B" using d3.format. Built with d3.scaleBand and d3.scaleLinear, the SVG uses d3.axisBottom and d3.axisLeft, with styling applied via CSS classes. Data comes from a local CSV file, loaded with d3.csv and processed to multiply population values by 1000.

Temprature in San Francisco Line Chart

This line chart visualizes a week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis, and includes labeled axes and a title. The chart is rendered as an SVG, with the temperature data filled as a smoothed area using the `curveBasis` curve. The code uses D3 v5 functions such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` to construct the visualization, drawing data from a CSV file loaded via `csv`.

Temprature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over one week, with time on the x-axis and temperature on the y-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG chart, with circles marking each data point. The data is loaded via `d3.csv` from a remote CSV file and parsed into JavaScript `Date` and numeric temperature values, with axes featuring gridlines and labeled titles.

Scatter Plot

This scatter plot displays the populations of the ten most populous countries, with each country positioned along the y-axis and its population on the x-axis. The visualization uses d3.csv to load the data, then applies d3.scaleLinear for the population axis and d3.scalePoint for the categorical country axis. D3’s axisBottom and axisLeft generate the gridlines and tick labels, with custom tick formatting converting values to abbreviated units. The chart renders as SVG circles styled with steelblue fill, and includes a title and axis label.

Hello VizHub

This example displays the text “Hello VizHub!” as a full-screen, centered message against a dark blue background using the Ubuntu font. The visualization demonstrates the minimal setup for a D3.js project within the VizHub environment, leveraging D3’s `select` function to target the `#message` div and set its content from a separate ES6 module. The page’s styling comes from CSS, with font imported via Google Fonts, while the code structure shows a clear separation between HTML, JavaScript, and stylesheet files.

Sep 20, 2019

HTML Cars Report

This example demonstrates a simple static HTML page presenting a small car sales report, listing three vehicles with their model years and prices. The page uses plain HTML and CSS, with an external stylesheet setting a large monospace font and highlighting the first entry in red via the `.highlighted` class. An unordered list structures the data, while no JavaScript or external libraries are involved in rendering this content.

Sep 19, 2019