T

thomasjungcoe

@thomasjungcoe·33 public vizzes

Loading thumbnail…

graph_02

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with country names on the y-axis and population counts on the x-axis. Built with React and D3 v5, it renders SVG rectangles through a Marks component, scales data with `scaleLinear` and `scaleBand`, and formats tick labels with d3’s `format` function. Axes and tooltips are rendered via custom AxisBottom, AxisLeft, and title elements, with the chart displayed in an HTML page using ReactDOM.

Loading thumbnail…

Fork of Vega-Lite API Template 2

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for a collection of automobiles, with each point colored by country of origin, sized by vehicle weight, and labeled with the car model name. The visualization is built using the Vega-Lite API, which constructs a specification rendered via D3.js and Vega. Data is loaded from a CSV file fetched through D3’s `csv` method, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The chart’s appearance is customized through a configuration object that removes axis frames, adjusts tick colors, and increases font sizes for readability.

Loading thumbnail…

Multiple Views with Brushing

A world map displays the geographic distribution of missing migrant events, sized by the total dead and missing count, using a natural Earth projection rendered with `d3.geoPath` and `d3.geoNaturalEarth1`. A time-series histogram below shows monthly deaths, rendered with `<rect>` elements, with brushing via `d3.brushX` to filter the map’s circles by date range. The app integrates React state for brushed selections, D3 scales for sizing and axes, and TopoJSON landmasses from World Atlas.

Loading thumbnail…

Multiple Views

The visualization combines a bubble map with a date histogram to explore the Missing Migrants Dataset, where each circle on the map represents an event's total dead and missing. The map uses `d3.geoNaturalEarth1` projection with `d3.geoPath` for land and graticule rendering, while the histogram aggregates deaths by month using `d3.bin` and `d3.timeMonths`. Both views share the same dataset, with circle radius scaled by `d3.scaleSqrt` and bars colored teal against a light gray world map.

Loading thumbnail…

Missing Migrants on a Map

This visualization maps missing migrant incidents worldwide, with circles sized by the total number of dead and missing individuals at each location. The map uses a natural Earth projection with graticules, country boundaries, and a light color scheme. The React app loads CSV data and world-atlas TopoJSON, then renders SVG marks via `d3.geoPath` and a square-root scale for circle radii. The underlying data is drawn from the Missing Migrant Project dataset.

Loading thumbnail…

Missing Migrant

This visualization shows the monthly count of dead and missing migrants over time, with bars representing the aggregated total for each month. It uses React with D3 v5 to load CSV data via `d3.csv`, bin the reported dates using `d3.histogram` with `d3.timeMonths` thresholds, and sum the “Total Dead and Missing” values per bin. Axes are rendered with custom SVG components, and a `<title>` element provides hover tooltips. The data comes from the Data Canvas Sense Your City dataset.

Loading thumbnail…

Points On A Map

This example displays global population data as scaled circles on a world map. Using the D3.js projection API `geoNaturalEarth1` and `geoPath`, it renders landmasses, graticules, and country interiors, while city points are positioned via the projection and sized with a square-root scale tied to population values. The visualization is built with React, uses the World Atlas TopoJSON dataset, and loads city data from a CSV file.

Loading thumbnail…

Interactive Color Legends

This interactive scatter plot of the Iris dataset allows users to explore relationships between flower measurements by selecting different attributes for the x and y axes via dropdown menus. Hovering over the color legend highlights points of a selected species while fading others, with an opacity transition applied to non-hovered marks. The visualization is built with React, d3.scaleLinear and d3.scaleOrdinal for scales, and renders SVG circles with tooltips. The data is loaded as CSV and parsed using d3.csv.

Loading thumbnail…

Scatter Plot with Color Legends

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which quantitative attributes appear on the x- and y-axes, while a color legend distinguishes species using a d3.scaleOrdinal with categorical colors. The visualization is built with React, rendering SVG circles through the Marks component, with d3.scaleLinear scales mapping data to positions on axes generated by custom AxisBottom and AxisLeft components. Data is loaded asynchronously from a CSV file using d3.csv.

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset in SVG, mapping petal length and sepal width against a categorical color scale for species. Users change the X and Y axes through React dropdown menus. The visualization uses React with d3.v5 for scales, axes, and color encoding, with custom AxisBottom, AxisLeft, and Marks components rendering circles with tooltip titles.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, letting users explore relationships between four flower measurements and species. Two dropdown menus select which attribute appears on the x- and y-axes, with axes and labels updating dynamically. Built with React and d3.v5, it uses `scaleLinear` for scales, `extent` for domains, and `csv` for data loading. SVG circles render each data point, with tooltips showing exact values; axis components generate ticks and grid lines using d3 scale methods.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via two dropdown menus. The React application uses D3 v5 for data loading, scaling, and axis generation, while rendering SVG circles for each data point. The plot includes tooltips showing the x-axis value for each point, with axis labels updating dynamically based on the selected attributes.

Loading thumbnail…

Menus with React

A dropdown menu for selecting a pet uses React and ReactDOM to manage its state. The example defines a reusable `Dropdown` component that accepts options, an id, a selected value, and a callback. It displays a list of pets from an array of objects. The app initializes with "hamster" as the selected value and logs each new choice to the console via `useState`. The interface relies on a `<select>` element, with a custom prompt for an empty selection.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” directly onto a webpage. The code uses `ReactDOM.render` to mount a functional `App` component into a `#root` div, with React and ReactDOM loaded from external UMD builds. No charting or data visualization is actually performed; the focus is purely on establishing a working React setup within an HTML page.

Loading thumbnail…

World Map

This world map visualization displays Earth’s landmasses and country borders using a natural Earth projection. The SVG rendering uses d3.geoPath with d3.geoNaturalEarth1 to draw the sphere, graticules, land features, and interior mesh boundaries. Geographic data comes from the World Atlas TopoJSON dataset, processed through topojson.feature and topojson.mesh within a React component. The map uses a teal-and-gray color scheme to distinguish land, water, and administrative boundaries, with country borders highlighted as thin lines.

Loading thumbnail…

Stylized Line Chart2

This chart visualizes temperature readings over time from a San Francisco dataset, with a smooth, stylized line connecting data points. The y-axis shows temperature values while the x-axis displays days of the week, both rendered with subtle gridlines. Built with React and d3.v5, it uses `scaleTime` and `scaleLinear` for the axes, along with `line().curve(curveNatural)` to create the organic path. SVG elements handle the rendering, with axes generated via custom React components that map d3 scales to tick marks and labels.

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes the relationship between time and temperature in San Francisco, using data from the Data Canvas Sense Your City dataset. The visualization is built with React and rendered as an SVG, leveraging D3’s `scaleTime`, `scaleLinear`, and `curveNatural` to create a smooth, natural spline through the data points. The chart’s minimal aesthetic features a teal line with a thick stroke, styled tick marks, and a clean Poppins font for axis labels, with temperature plotted against a time axis formatted to display the day of the week.

Loading thumbnail…

ScatterPlot of Iris Dataset

A scatter plot visualizes the Iris Dataset, plotting petal length on the x-axis against sepal width on the y-axis for individual flowers. Each circle represents a data point, with a native SVG `<title>` element providing a tooltip on hover. The visualization is built with React and D3 v5, using `csv()` to load the data, `scaleLinear()` for the axes, and custom `AxisBottom` and `AxisLeft` components to render ticks and labels.

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 9 countries by projected 2020 population from a UN dataset. The code uses D3's `scaleBand`, `scaleLinear`, `max`, and `format` to map values, while React components `AxisBottom`, `AxisLeft`, and `Marks` render the SVG axes and bars. Population values are formatted with SI prefixes, and the chart loads data via `csv` with a custom row parser.

Loading thumbnail…

Refactored Bar Chart

This example displays a horizontal bar chart of the top nine countries by 2020 population, with country names on the y-axis and population on the x-axis. The React app uses a custom `useData` hook to fetch CSV data via D3’s `csv` utility, then renders SVG with D3 scales (`scaleBand` and `scaleLinear`) and helper components for axes and marks. The `Marks` component creates `rect` elements for each bar, while the axis components generate tick lines and text labels.

Loading thumbnail…

Axis with React and D3

This example displays a horizontal bar chart of 2019 UN population data for nine countries, using a linear x-axis for population values and a banded y-axis for country names. The visualization renders as SVG and combines React state management with D3 utilities: `csv` loads the dataset, `scaleLinear` and `scaleBand` construct the axes, and `max` computes the domain. React's `useState` and `useEffect` handle data loading, while manual tick generation from `xScale.ticks()` draws grid lines and labels.

Loading thumbnail…

The Margin Convention

A horizontal bar chart displays the 2020 populations of nine countries, using the margin convention to position a bar plot inside a centered SVG group. React state manages the data loaded from a CSV of UN population figures, while D3 utilities (`csv`, `scaleBand`, `scaleLinear`, `max`) compute the scales and dimensions. The bars render as SVG rectangles, with the group translated by the specified margin values to align the chart within the 960×500 viewport.

Loading thumbnail…

Rendering UN_Population_Data with React & D3

This example visualizes UN population data from a CSV file, displaying the nine most populous countries as horizontal bars in an SVG. The React app loads the data with d3.csv, then uses React state to manage the dataset before rendering. D3's scaleBand and scaleLinear map country names and population values to pixel coordinates for each bar. The code specifically imports arc, pie, and max from d3, though only the scales and max are used in this bar chart rendering.

Loading thumbnail…

Fork of Rendering Data with React & D3 Again

This visualization displays all CSS named colors as a circular pie chart where each color occupies an equal slice. The application loads color data from a CSV file using `d3.csv`, then uses React's `useState` and `useEffect` hooks to manage the asynchronous data fetching and rendering. The chart is constructed with `d3.pie` and `d3.arc`, generating SVG paths filled with each color's corresponding hex value, centered within a 960 by 500 viewport.

Loading thumbnail…

Rendering Data with React & D3 Again

This example displays CSS named colors as horizontal stacked bars, with each row’s background color set from the CSV’s ‘RGB hex value’ field. The visualization initially shows a “Loading…” message until data arrives. React’s `useState` and `useEffect` manage the asynchronous fetch, while D3’s `csv` utility loads the remote dataset. Each color is rendered as a full-width, 4-pixel-tall div, creating a compact spectrum strip after the data resolves. The code combines React 16.9’s hooks with D3 v5 for data loading.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and parse a CSV file within a React context, reporting the data’s size, row count, and column count. It fetches a CSS Named Colors dataset from a GitHub gist. The primary method uses D3’s `d3.csv` function combined with a Promise chain to format the output. The code also includes commented-out alternatives using the `fetch` API with `async` and `await`, as well as a nested-Promise example, showcasing different approaches to asynchronous data loading.

Loading thumbnail…

Iterating Fast with Vega-Lite API

This example demonstrates an interactive scatter plot of automobile data, visualizing fuel economy attributes across different countries of origin. It uses the Vega-Lite API to declaratively encode horsepower, weight, and origin onto circle marks with tooltips. The code chains API methods like `vl.x()`, `vl.y()`, and `vl.color()` to construct the specification, then renders it via Vega and Vega-Lite with a customized dark theme. Data is loaded asynchronously from CSV using d3.csv, sourced from the UCI Machine Learning Repository.

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse a CSV file using D3.js v6, displaying the file size, row count, and column count of a CSS named colors dataset. The code fetches the CSV from a GitHub gist via `d3.csv`, then reports the parsed results using `d3.csvFormat` and the resulting array’s `length` and `columns` properties. It also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, showing multiple approaches to the same task. The output appears as large text in a `<pre>` element.

Loading thumbnail…

Loading Data with React D3

This example demonstrates how to load and display CSV data within a React application using D3 utilities. It fetches the CSS named colors dataset from a GitHub gist via `d3.csv`, stores the parsed data in React state with `useState`, and reports the dataset’s size in kilobytes, row count, and column count. The interface shows the loading state before the promise resolves and then presents the summary, illustrating React’s state management alongside D3’s data parsing.

Loading thumbnail…

Mouse Follower

A single gray circle tracks the mouse cursor across an SVG canvas in real time. Built with React, the component uses the `useState` hook to store cursor coordinates and a `useCallback` event handler for `onMouseMove`, updating the circle's `cx` and `cy` attributes. The visualization demonstrates simple state-driven rendering in React with D3.js loaded for potential further data manipulation. The circle starts centered on a 960×500 viewport and moves smoothly in response to pointer events.

Loading thumbnail…

Smily Face Part 1

A grid of randomized smiley faces, each rendered as a yellow SVG circle with black outline, black eyes, and a D3 arc-based mouth, demonstrates React component composition with parameterized facial features. The code uses d3.arc for the mouth shape, d3.range to generate a 6x3 grid, and ReactDOM to render each face with randomized stroke width, eye offset, and eye radius.

Loading thumbnail…

d3_tutorial2

This example demonstrates how to use React and D3 together within a VizHub project, rendering a simple “Hello” message that displays the text “package.json” inside a styled `<pre>` tag. The code imports `select` from d3, but does not use it in the visible logic, while React and ReactDOM handle the DOM creation and rendering. The `package.json` file defines dependencies and custom `vizhub.libraries` mappings, which tell VizHub to load React and ReactDOM from a CDN via UMD builds. The example showcases VizHub’s package management feature without requiring manual script tags in `index.html`.

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small dataset, rendered as large text on a web page. The code defines a static JSON array of car objects and uses React with D3 to structure the visualization, though the visible output is a simple text message. The data is parsed with `JSON.parse` and accessed directly, while the `VizContainer` component sets up an SVG with margin conventions, ready for chart rendering. The project loads React, ReactDOM, and D3 via CDN links.