T

Tanupat B.

@tanupat92·19 public vizzes

Loading thumbnail…

Fork of Persons of Concern StreamGraph by Origin

This streamgraph visualizes the total number of persons of concern grouped by country of origin, with data from UNHCR Population Statistics. Each colored band represents a country, with labels positioned using d3-area-label. The visualization uses d3.stack with stackOffsetWiggle and stackOrderInsideOut to create the flowing streamgraph shape, while d3.scaleTime and d3.scaleLinear handle the axes. The code interpolates yearly values using d3.bisector, and renders the result as an SVG with hover effects that highlight individual bands.

Loading thumbnail…

Fork of Mon Defense by Type

A scatterplot of Pokémon, showing the relationship between primary type and the percentage of damage they resist. Each circle represents a single Pokémon, colored by type, with its size encoding a numeric isolate count and tooltips revealing names. The visualization is built with the vega-lite-api library, loading CSV data via d3.csv, and renders through vega and vega-lite with a custom config for axis and label styling.

Loading thumbnail…

scatter iris

This interactive scatterplot displays the Iris flower dataset, plotting measurements like petal length and sepal width as SVG circles. Users can select which attributes to compare via dropdown menus, with axes and labels updating accordingly. The visualization combines React state management with D3 scales (d3.scaleLinear), axis components, and data loading via d3.csv. Styling uses Poppins typography and teal marks, while native SVG titles provide tooltips.

Loading thumbnail…

menu

This example shows a simple pet-selection menu with four options—goldfish, cat, dog, and hamster—implemented as a React component. The user’s choice is logged to the console, and the selected value updates the dropdown’s displayed option. Built with React 16.9 and ReactDOM, the code uses the `useState` hook to manage the selected value and a reusable `Dropdown` component that renders a native HTML `<select>` element. The dropdown’s options are defined in a static array, with no external data source or rendering backend.

Loading thumbnail…

menu with react

This example shows a minimal React application that renders an empty page. It uses React 16.9.0 and ReactDOM to mount a root component into a div element with an id of "root." The App component returns an empty container, and the code does not include any data or visualization logic. The page is configured with hidden overflow and no margins.

Loading thumbnail…

world map

This example displays a natural Earth projection world map, rendering landmasses in teal against a light gray sphere with subtle graticules and country borders. It loads geospatial data from the World Atlas TopoJSON file using `d3.json` and processes it with `topojson.feature` and `topojson.mesh`. The SVG paths are generated with `d3.geoPath` and `d3.geoNaturalEarth1` inside a React component, with styling applied via CSS class selectors for the land, sphere, interiors, and graticules.

Loading thumbnail…

line chart

This line chart shows temperature readings over time, with each data point marked by a circle and connected by a smooth, natural curve. A tooltip displays the weekday for each point on hover. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `line` with `curveNatural` from D3 for the path, and SVG rendering. Data is loaded asynchronously from a CSV using D3's `csv` utility.

Loading thumbnail…

Fork of Fork of Fork of Fork of bar_char 5 styles

This example renders a horizontal bar chart of UN population data for 10 countries in 2020, colored teal with labeled axes. Built with React components and D3 v5 scales, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, drawing SVG rectangles per country. The code formats tick labels using D3’s `format` function, abbreviates values (e.g., “1.2B”), and supports tooltips via SVG `<title>` elements. Data is loaded asynchronously with D3’s `csv` utility.

Loading thumbnail…

Fork of Fork of Fork of bar_char 4 refactoring

This bar chart displays the top 10 countries by population from UN Population 2019 data, loaded via D3’s `csv` utility. The visualization maps countries to the vertical band scale and population values to the horizontal linear scale, rendering SVG rectangles for each row. React manages the asynchronous data loading through a custom `useData` hook, while D3’s `scaleBand` and `scaleLinear` handle the coordinate mappings. The chart includes axis components built with D3 ticks, showing the underlying refactoring of reusable chart parts across multiple forks.

Loading thumbnail…

Fork of Fork of bar_char 3 axis

This horizontal bar chart displays the top 10 most populous countries in 2020, using data loaded from a CSV via D3’s `csv` utility. Bars are drawn as SVG rectangles, with a band scale for country names on the y-axis and a linear scale for population on the x-axis, including gridlines and tick labels generated from `xScale.ticks()`. React’s `useState` and `useEffect` manage the asynchronous data loading and rendering state.

Loading thumbnail…

Fork of bar_char 2

This example visualizes the population of ten countries in 2020 using horizontal bars in an SVG rendered by React. It loads data from a CSV file via D3’s `csv` utility, parses the population column, and stores it in React state. A D3 `scaleBand` positions each country along the y-axis, while a `scaleLinear` maps population values to bar widths, with margins applied to the chart layout.

Loading thumbnail…

bar_char

This example displays horizontal bars for the top five countries by projected 2020 population, using a React component that loads CSV data with D3’s `csv` utility. The bar lengths encode population values via a `scaleLinear`, while country names position each bar through a `scaleBand`. Rendering occurs as SVG `<rect>` elements, with React state managing the asynchronous data load and a temporary loading message. The chart uses dimensions of 960 by 500 pixels and defaults to a dark background from the page’s CSS.

Loading thumbnail…

Fork of Loading Data with React & D3

This example displays CSS named colors as a full-circle pie chart, where each slice is colored with its corresponding hex value. It uses React hooks, specifically `useState` and `useEffect`, to asynchronously load the CSV data with D3’s `csv` function. The chart is rendered as SVG, with D3’s `arc` and `pie` generators computing the slice paths, and each path’s fill set from the `RGB hex value` column in the dataset.

Loading thumbnail…

vega-lite api 2

This visualization displays the top 20 countries by religion, using a bubble chart where each circle’s size represents the population count for a given country and religion. The data comes from a CSV file loaded via d3’s `csv` function, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. Built with the vega-lite-api, it renders through Vega-Lite and Vega, with tooltips provided by vega-tooltip. The visualization uses a dark color scheme and customized axis fonts to improve readability.

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot uses the Auto MPG dataset from the UCI Machine Learning Repository to visualize relationships among vehicle attributes. Each circle represents a car, positioned by weight and horsepower, colored by country of origin, and sized by miles per gallon. The visualization is built with the Vega-Lite API, which generates the chart specification, while D3.js fetches the CSV data and renders the SVG output. Interactive tooltips display car names when hovering.

Loading thumbnail…

Load data

This example shows a simple data-loading status report: a React component displays the number of rows, columns, and file size in kilobytes from a CSV dataset of CSS named colors. Initially, it renders a loading message, then replaces it with the computed summary once the data arrives. The code uses React hooks (`useState`, `useEffect`, `useCallback`) to manage the asynchronous fetch via `d3.csv`, and processes the result with `d3.csvFormat` to calculate the file size. The dataset is loaded from a GitHub gist URL.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the basic workflow of loading and parsing CSV data with D3.js, displaying the dataset’s dimensions as text. It fetches a remote CSV file containing CSS named colors using the Fetch API, then parses the raw text with `d3.csvParse`. The code counts the number of rows and columns from the parsed array and reports the file size in kilobytes, rendering the summary inside a large `<pre>` element. Only the parsed data’s structure is shown, not the actual color values.

Loading thumbnail…

mouse_follower

A smiling circle follows the user's mouse as it moves across an SVG canvas. The component tracks mouse coordinates through a React state hook, updating the circle's center position on every mousemove event. Using React 16.9 and D3 v5, the example demonstrates a simple interactive React component that renders SVG elements dynamically, with the circle's position directly bound to the current clientX and clientY values.

Loading thumbnail…

html_css_svg

This example renders a grid of 18 randomly generated smiley faces using React components and D3’s `arc` generator for the mouths. Each face is composed of SVG circles for the background and eyes, with randomized stroke, eye, and mouth dimensions. The FaceContainer component wraps the shapes in an SVG group translated to the center, while background styling comes from inline CSS. The data is produced by D3’s `range` function and mapped to array of Face elements.