Skip to main content
Log in
C

christine

@christinechang·18 public vizzes

Loading thumbnail…

BandTests

This example displays the population of the top 10 countries as horizontal bars, with a scaleBand mapping country names on the y-axis and a scaleLinear for population on the x-axis. Using React with D3 v7, it renders SVG rectangles and axes via custom components. The data is loaded asynchronously from a CSV URL using d3.csv, and numeric formatting via d3.format presents tick labels with abbreviations.

Oct 31, 2022
Loading thumbnail…

4.43BarChartReact needs refactor @5.17

This bar chart displays the population of ten countries from the United Nations 2019 population data. The visualization uses D3 v7 utilities such as `scaleBand`, `scaleLinear`, and `max` to construct the chart, while React 18 components handle the rendering of SVG axes and marks. Each bar’s height is determined by the band scale, and its width reflects the population magnitude, with hover tooltips showing formatted values. The code also includes a custom `useData` hook that fetches CSV data via D3’s `csv` method.

Oct 31, 2022
Loading thumbnail…

5.54-ScatterPlot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis for individual flower samples. The visualization uses React components to render SVG circles, with D3 v7 utilities like `scaleLinear`, `extent`, and `ticks` managing the spatial mapping and axis generation. Data loads asynchronously from a remote CSV via `d3.csv`, and each circle includes an HTML title tooltip displaying the x-value. The chart applies a clean styling with a teal mark color, grey grid lines, and the Poppins font family.

Oct 31, 2022
Loading thumbnail…

6.15-LineChart

This line chart displays monthly temperature data for the Provence-Alpes-Côte d'Azur region of France from 1901 to 2021. Each data point is a circle, with a smooth curved line connecting them, rendered as SVG within a React application. The chart uses D3 v7 utilities including `scaleTime`, `scaleLinear`, `extent`, and `line().curve(curveNatural)` to map data to coordinates and create the path. It loads the CSV data using `d3.csv` and renders axes and marks as React components.

Oct 24, 2022
Loading thumbnail…

6.46WorldMap

This example presents a static world map using the equal-earth projection, rendering continents and graticules as SVG paths. The visualization displays the Earth’s landmasses in a teal color against a light background, with graticule lines providing a spatial reference. Built with React and D3, the code uses `geoEqualEarth`, `geoPath`, and `geoGraticule` from D3 to project and draw geographic features. The map data originates from the `world-atlas` package, loaded via D3’s `json` utility and processed with `topojson`’s `feature` and `mesh` functions.

Oct 11, 2022
Loading thumbnail…

7.46-PolishedScatterPlotWithMenus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus, built with ReactDropdown, switch the attributes mapped to the x- and y-axes, while points are colored by species using a d3.scaleOrdinal. A color legend with mouse interaction highlights selected species and fades others, with all marks rendered as SVG circles using D3 scales and React components.

Oct 9, 2022
Loading thumbnail…

7.28-ScatterPlotWithMenus

A scatter plot of the Iris dataset lets users compare any pair of measurement attributes—sepal length, sepal width, petal length, petal width, or species—by selecting them from two dropdown menus. The React app loads data via `d3.csv`, scales axes with `d3.scaleLinear` and `d3.extent`, and renders SVG circles for each flower. D3's `ticks` and axis components position gridlines and labels.

Oct 9, 2022
Loading thumbnail…

7.14MenusWithReact

This example demonstrates a React-based UI that lets users select a pet from a dropdown menu. It showcases how React state manages the selected value, which is logged to the console. The code uses React's `useState` hook and a custom `Dropdown` component to render the HTML `<select>` element, while D3 v7 is loaded for potential charting but not actively used. The interaction is simple, with options defined for six pets.

Oct 9, 2022
Loading thumbnail…

7.13ReactStarterCode

This example demonstrates a minimal React application that renders a simple static circle using SVG. The App component outputs the text “Hello React,” while a separate BackgroundCircle component defines a yellow circle with a black border. The code imports React and ReactDOM, mounts the application to the root div, and loads D3 version 7.6.1 alongside React 18.2.0 from CDN links. The visualization serves as starter code, showing how React components can be combined with D3 libraries for future data-driven graphics.

Oct 9, 2022
Loading thumbnail…

ScatterCovidDailyNewCasesFrance

This visualization shows the daily new COVID-19 cases per million people in France from 2020 to 2022, sampled weekly and displayed as a smooth basis-curve line chart. The data comes from the World Health Organization's global COVID-19 dataset, filtered by country code FR, with cases normalized against France's population. Built with d3.v5, the visualization uses `scaleTime` and `scaleLinear` for the axes, `axisLeft` and `axisBottom` for tick marks, and `line` with `curveBasis` to render the curve as an SVG path.

Oct 5, 2022
Loading thumbnail…

4.26VisualizingData

This example renders a pie chart of CSS named colors using React and D3 v7. It loads color data from a CSV file via `d3.csv` and passes it to `d3.pie()` to compute arc angles, with each slice drawn as an SVG `<path>` filled by the color’s hex value. The chart’s radius is fixed at the full width, and React renders the SVG elements through a functional component.

Oct 5, 2022
Loading thumbnail…

LoadingDataReactD3

This example demonstrates how to load external data into a React component using D3 utilities, with React state managing the loaded dataset. The code fetches a CSV file of CSS named colors from a GitHub gist via the `csv` function from d3-dsv, storing the parsed result in React’s `useState` hook. While the data loads, a message displays “Data is loadeding”; once complete, it updates to “Data is loaded.” The visualization also includes a yellow circle component with a black stroke, though its size and thickness are defined through React props. The project uses React 18, D3 v7, and relies on `useEffect` to trigger the data fetch only once.

Oct 5, 2022
Loading thumbnail…

LoadingParsingCSVData

This example demonstrates how to load and parse CSV data from a remote URL using D3 v7. It displays the file size, row count, and column count in a large preformatted text element. The primary approach uses `d3.csv` to fetch and parse the data directly, while commented-out code shows an alternative using the Fetch API with `d3.csvParse`. The data comes from a GitHub gist containing CSS named colors.

Oct 4, 2022
Loading thumbnail…

Mouse Follower

A yellow circle with a black outline follows the mouse cursor across an SVG canvas. The React component tracks pointer movement via an `onMouseMove` event handler, storing coordinates in state with `useState` and updating them through `useCallback`. D3 v7 is included but not directly used for the interaction; React 18 handles rendering and state updates. The initial circle position is centered within the 900×560 viewport before the cursor enters the SVG area.

Oct 3, 2022
Loading thumbnail…

Make A Face

A modular React component assembles a smiling face from separate SVG circles and an arc path. The face is centered in an SVG canvas, with parameters for eye offset, radius, and mouth curvature passed as props. D3's `arc` generator creates the mouth, while local ES6 modules define the `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. The example demonstrates importing D3 functions and local modules within a React rendering pipeline using VizHub's module system.

Oct 2, 2022
Loading thumbnail…

Line and Area Charts

This example visualizes reported COVID-19 deaths in Afghanistan over time using a line and area chart. It draws circles at each data point on an SVG canvas, with axes scaled using `scaleTime` and `scaleLinear`. The visualization filters the WHO global COVID-19 dataset by country code and years, then renders the data with `axisLeft` and `axisBottom`. Semi-transparent steelblue circles are used to suggest a line and area effect for the death counts.

Sep 27, 2022
Loading thumbnail…

ScatterPlot

A scatter plot displays the percentage of the population living in poverty for ten countries, with countries arranged along the vertical axis and poverty percentages along the horizontal axis. Each steel-blue circle represents a country, plotted using an SVG. The visualization uses D3 v5 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scalePoint`, `d3.axisLeft`, and `d3.axisBottom`, with data loaded from a local CSV file.

Sep 26, 2022
Loading thumbnail…

CZC Make Bar Chart

This example renders a horizontal bar chart showing the percentage of the population living in poverty for ten countries. Using D3.js v5, it maps country names to the y-axis with `scaleBand` and poverty percentages to the x-axis with `scaleLinear`. The SVG graphic is built by appending rectangles whose width and y-position are computed from the data. Axes are added with `axisLeft` and `axisBottom`. Data is loaded from a CSV file, and the chart is drawn entirely with SVG elements.

Sep 25, 2022