H

henry c

@TCbacon·20 public vizzes

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of filled arcs arranged in a circle. It loads color data from a CSV file using `d3.csv`, then renders each color as an SVG path computed with `d3.pie` and `d3.arc`, using the hex value for the fill. React manages the component state and renders the SVG elements, while D3 handles the data loading and arc geometry. The visualization updates once the data arrives, showing the colors arranged by their order in the dataset.

Loading thumbnail…

Fork of Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. Each circle represents a temperature reading. The visualization uses D3 v5 scales (`scaleTime`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) to render an SVG, with gridlines via axis tick sizes. The data is loaded as CSV from a Data Canvas – Sense Your City dataset. Styling for circles, ticks, labels, and the title is defined in an external stylesheet.

Loading thumbnail…

Fork of Stylized Bar Chart

This example presents a horizontal bar chart of the ten most populous countries, using population data from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The chart maps country names to a `scaleBand` y-axis and population values to a `scaleLinear` x-axis, with formatted tick labels like “1.3B” produced by `d3.format`. Rendered as SVG within a React component, the chart displays bars with hover tooltips and styled axes, demonstrating a modular approach to building interactive visualizations with D3 and React.

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map and time-series histogram to explore migrant deaths and disappearances. The map displays circles sized by total dead and missing using a square-root scale, while the histogram shows monthly totals. Brushing the histogram filters the map’s circles in real time via React state and d3.brushX. The map uses d3.geoNaturalEarth1, d3.geoPath, and graticules from the World Atlas TopoJSON, with data from the Missing Migrants Project. React’s useMemo optimizes rendering of both static geographic features and dynamic data updates.

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a bubble map and a date histogram to explore missing migrants incidents worldwide. The map uses a natural Earth projection with country boundaries and graticules, where circle size encodes the total dead and missing per location. A linked time-series histogram below displays monthly death tolls, and users can brush across the timeline to filter the map to incidents within that date range. The example uses React with d3-scale, d3-geo, d3-brush, and TopoJSON for world atlas data.

Loading thumbnail…

Fork of Multiple Views Cleanup

Two coordinated views explore data on missing migrants. A bubble map projects city locations using a natural Earth projection, with circle area scaled by the square root of the total dead and missing. A date histogram bins reports by month, summing deaths per bin. Both views share a teal color and are built with React, d3 for map projections, scaling, binning, and time axes, rendering as SVG. Data comes from a CSV of the Missing Migrants Project.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization displays a date histogram of the total dead and missing migrants per month, using data from the Missing Migrants Dataset. It employs React with SVG rendering, using d3.bin to bin data by month and d3.sum to aggregate death counts. The chart includes axes rendered through custom React components, with a tooltip showing the precise monthly total on each bar. The y-axis scales linearly to the maximum bin value, while the time-based x-axis spans the full date range of the dataset.

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This interactive world map visualizes the share of the population infected with HIV/AIDS for the year 2017. Country boundaries are drawn from the World Atlas TopoJSON dataset, with data sourced from the Institute for Health Metrics and Evaluation. The visualization uses React and D3 v5, employing `geoNaturalEarth1` and `geoPath` to render the sphere, graticules, and country polygons as SVG paths. Countries without data are filled in gray, while others use a sequential YlOrRd color scale to represent prevalence rates.

Loading thumbnail…

Fork of Polished World Map

This example presents a polished world map with landmasses, country boundaries, and graticules rendered as SVG paths. It uses React to manage the component structure and d3-geo’s `geoNaturalEarth1` projection with `geoPath` to draw the sphere, graticule, and land features. The data comes from the World Atlas TopoJSON, processed via topojson’s `feature` and `mesh` functions to generate land polygons and interior borders. A muted teal color scheme and subtle stroke styling give the map a clean, modern look.

Loading thumbnail…

Fork of Sized Points on a Map

This example displays a world map with cities over 50,000 in population, represented by semi-transparent circles scaled by population using a sqrt scale. It uses React for component structure and d3’s geoNaturalEarth1 projection, geoPath, and geoGraticule to render land, country interiors, and graticule lines from World Atlas TopoJSON data. City coordinates and populations come from a CSV loaded via d3.csv, with circle radii capped at 15 pixels.

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width for individual flower samples. The visualization uses React to render SVG elements, with D3 v5’s `scaleLinear` and `extent` functions handling the x and y axis scaling. Axis components generate ticks via `xScale.ticks()`, while the `Marks` component renders each data point as a circle with a tooltip showing the formatted petal length. The chart is styled with the Poppins font and includes labeled axes.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and SVG circles for marks. Hovering over a species in the color legend highlights only those data points while fading the rest, using React state for hover tracking. Native SVG `<title>` elements provide tooltips showing the petal length value for each point.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x and y axes via dropdown menus built with ReactDropdown. The React application uses D3’s `scaleLinear`, `extent`, and `csv` loading to position circles in an SVG, with separate reusable components for axes and marks. Each circle exposes a native SVG `<title>` tooltip showing its x-axis value, while D3’s `format` applies compact tick labels.

Loading thumbnail…

Smiley face part 1

A smiling face is drawn in red with a thick black outline, featuring two eyes, a curved mouth, and angled brows, all centered on an SVG canvas. The face is constructed using React components, with D3’s `arc` function generating the mouth path and SVG `circle`, `line`, and `path` elements rendering the remaining features. Fixed numeric constants position the features relative to the center, and the SVG is sized at 960 by 500 pixels. The composition is purely static, with no interactivity or data-driven input.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, comparing measurements like sepal and petal length and width. Dropdown menus allow users to dynamically select which attributes are plotted on each axis, immediately updating the visualization. The chart uses React for the interface and D3.js for data handling and scaling, with SVG circles for data points. Hovering over a mark reveals a tooltip with its value, sourced from the standard iris.csv dataset.

Loading thumbnail…

Fork of Stylized Line Chart

This React visualization displays a week of temperature readings from San Francisco as a smooth, stylized line chart. It uses d3-scale functions to map time and temperature data to screen coordinates, while d3.line with curveNatural generates the curved path. The chart is rendered as SVG, with axes and labels styled using the Poppins font. Data is loaded via d3.csv from a remote dataset.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower, acceleration, weight, and origin for cars in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot maps horsepower to the x-axis and acceleration to the y-axis, with point size encoding weight and color distinguishing origin, while tooltips reveal car names. It is built with the Vega-Lite API (via `vl.markCircle` and `vl.encode`), configured through `config.js`, and loaded using D3’s `csv` function. The rendering pipeline combines Vega, Vega-Lite, and vega-tooltip, with the chart filling the browser window.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, then summarizes the dataset’s size in kilobytes, row count, and column count on a large text display. It uses D3 v5’s `d3.csv` method with a Promise-based `.then` callback to fetch the file, while commented-out alternatives show the same task using the Fetch API with async/await and `d3.csvParse`. The data comes from a GitHub gist containing CSS named colors. The page is minimal, relying on a `<pre>` element for output and no interactive charts.

Loading thumbnail…

Fork of Mouse Follower

A React application renders an SVG circle that follows the mouse cursor across a 960 by 500 canvas. The component tracks pointer coordinates via a `onMouseMove` handler and updates the circle's `cx` and `cy` attributes using React state. The code relies on React 16.9.0 hooks (`useState`, `useCallback`) and renders through `ReactDOM`.

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face rendered as an SVG graphic, centered on a yellow circle with black stroke, two eyes, and a curved mouth. The React components—BackgroundCircle, Eyes, and Mouth—are split into separate ES6 module files, using React Fragments to group elements. D3’s arc generator creates the mouth path, while constants define the layout. The visualization is purely illustrative, with no data source, and uses d3.v5 alongside React 16.9.