T

Taweewat Somboonpanyakul

@leogulus·19 public vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width with points colored by species. The color legend on the right is interactive: hovering over a species name fades all other points to 20% opacity, highlighting the selected group. The visualization uses React and D3 v6, leveraging `scaleOrdinal` for categorical colors, `scaleLinear` for axes, and SVG circles. Hovering over data points reveals tooltips via SVG `<title>` elements, while the legend’s `onMouseEnter` and `onMouseOut` handlers drive the filtering logic.

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis. Each of the 150 data points is colored by species using a categorical ordinal scale, with a custom color legend placed to the right. Built with React and D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. The SVG rendering includes custom React components for axes, marks, and the legend, with tooltips showing formatted petal length values.

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. The code uses React, D3 v6, and SVG rendering, with `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `csv` to load data from a GitHub gist. Custom `AxisBottom` and `AxisLeft` components generate ticks, while the `Marks` component draws circles with tooltips.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attributes appear on the X and Y axes. Two dropdown menus, built with the `react-dropdown-browser` library, control the axes. The visualization uses D3 v6's `scaleLinear` for axis scaling and renders circles as SVG marks, with tooltips showing formatted values. Axis components are built with reusable React functions, while data loading is handled asynchronously via D3's `csv` method.

Loading thumbnail…

Scatter Plot with Menus

Interactive scatter plots of the Iris dataset allow users to select any of four numeric flower measurements for the x and y axes via dropdown menus built with React. The visualization uses D3 scales and SVG axes to render circles colored by default, with axis labels updating dynamically to reflect the selected attributes. Data is loaded asynchronously from a CSV using `d3.csv`, and React hooks manage the chart's state and re-rendering.

Loading thumbnail…

Menu with React

This example shows a simple pet-selection menu built with React. It displays a dropdown list of animal options, with a hamster pre-selected, and the user’s current choice appears in the console. The interaction is handled by a reusable `Dropdown` component that maps over an array of option objects, while the app manages its selected value through React’s `useState` hook. The page is rendered via `ReactDOM.render`, and the code imports the `Dropdown` component, using React’s `onChange` event to update the selection state.

Loading thumbnail…

Select

This example demonstrates a minimal React application that renders a simple "Hello" message. The code uses React and ReactDOM from the official UMD builds, with `ReactDOM.render` mounting a functional component to a `#root` element. The HTML page embeds a blank SVG container after the script tags, but no SVG content is generated. The example shows the basic structure of a React-based web app, where the UI is defined as a component and rendered into the DOM. The data source is static text, and the rendering approach relies on React's virtual DOM management.

Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, with graticules and country borders drawn as SVG paths. The visualization colors land masses in teal, uses a light sphere background, and highlights internal country boundaries while omitting external ones. Built with React and D3 v6, the code leverages `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for projection and path generation, while TopoJSON's `feature` and `mesh` methods process the world-atlas dataset for land and interior boundaries.

Loading thumbnail…

Stylized Line Chart

This interactive line chart visualizes weekly temperature fluctuations in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses React and D3 v6, with scales created via `scaleTime` and `scaleLinear`. Data from a CSV file is loaded using `csv`, and the line is generated with the D3 `line` generator combined with `curveNatural` for smoothing. The SVG rendering includes styled gridlines, axis labels, and circular data points, each with a native tooltip showing the abbreviated weekday. The chart employs clearly defined margins and axis components to structure the layout.

Loading thumbnail…

Iris Data Set

This example visualizes the Iris flower dataset as a scatter plot, showing the relationship between petal length and sepal width for individual samples. Using React with d3.scaleLinear for both axes and d3.extent for domains, the plot renders SVG circles with native tooltips via <title> elements. The code loads CSV data through d3.csv, formats tick labels with d3.format, and includes custom axis components. A loading state displays "Loading..." text while the data fetch is in progress.

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays the populations of the top 10 countries from the 2019 UN population dataset. Rendered with SVG, the chart uses React components for the axes and marks, with D3's `scaleBand` and `scaleLinear` for positioning. The bars are colored teal, with gray axis lines and labels, and include hover tooltips via SVG `<title>` elements. The x-axis labels are formatted with D3's `format(".2s")` to convert values from gigabytes to billions.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the ten most populous countries in 2020, ordered by country name. Each bar’s length encodes population, with a left axis labeling countries and a bottom axis showing population values. The visualization is built with React and D3 v6, using `scaleBand` and `scaleLinear` to map data to SVG rectangles, with custom `AxisBottom`, `AxisLeft`, and `Marks` components. The data is loaded from a CSV URL via D3’s `csv` function.

Loading thumbnail…

UN Population

This example visualizes the top 10 countries by population in 2020 using a horizontal bar chart rendered with SVG. It loads UN population data from a CSV file via `d3.csv` and uses React hooks (`useState`, `useEffect`) to manage the asynchronous data loading. The chart employs `d3.scaleBand` for the y-axis country labels and `d3.scaleLinear` for the x-axis population values, with gridlines generated from `xScale.ticks()`.

Loading thumbnail…

Rendering Data with React Part II

This example shows a pie chart of all 148 named CSS colors, with each slice filled by its corresponding hex value. Built with React and D3 v6, it fetches color data from a CSV file using the `d3.csv` function. The chart is rendered as an SVG, where React manages the state and component lifecycle with `useState` and `useEffect`, while D3's `pie` and `arc` functions compute the slice geometries. A loading message displays until the asynchronous data fetch completes.

Loading thumbnail…

Rendering Data with React

The example displays the full CSS named color palette as horizontal stripes, with each color rendered as a 960-pixel-wide, 5-pixel-tall div. It loads color data from a CSV file using `d3.csv` inside a React component, managing asynchronous data with `useState` and `useEffect`. React renders the list of colored divs, with the background color set from the `RGB hex value` column.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data with D3.js v6, displaying file size, row count, and column count in a preformatted text block. It fetches a remote CSV file containing CSS named colors from a GitHub gist using `d3.csv`, which returns a promise, then formats the data with `d3.csvFormat` to calculate its kilobyte size. The code also includes commented alternatives using `fetch`, `async/await`, and `d3.csvParse` for manual text-based parsing. The visualization is minimal, focusing on data ingestion metrics rather than graphical output.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, its position updating in real time to mirror pointer movement. The visualization demonstrates React state management and event handling, using `useState` to track the cursor's coordinates and `useCallback` to optimize the move handler. Rendering is done with React DOM into an SVG element, with the circle's center bound to the stored mouse position. The example uses React 16.9 and SVG, with the viewport sized at 960 by 500 pixels.

Loading thumbnail…

Smile Face Part I

This example renders a grid of smiling faces using React and D3, with each face composed of SVG circles for the background and eyes and an arc path for the mouth. The `Face` component composes reusable subcomponents—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that position elements relative to a centered translation. Randomly generated eye radii, mouth radii, and mouth widths vary each face’s appearance. The code leverages D3’s `arc` generator for the mouth shape and React’s component model to assemble the visualization efficiently.

Loading thumbnail…

Cars Report

This example displays a text-based report of cars, filtering a small dataset to show only those priced under a specified limit and formatting each entry with year, make, model, and price. The page updates a preformatted HTML element with the generated multi-line string. It demonstrates loading D3 from a CDN via UNPKG while also showcasing local ES6 modules and data parsing with `JSON.parse`, using plain JavaScript string manipulation and array methods like `filter` and `map`.