Wasanta Pruttisarikorn

Fork of AQI Data in Bangor, Maine Over Time

This fork displays daily Air Quality Index (AQI) values in Bangor, Maine over time, with a dropdown to toggle between Ozone and PM2.5 pollutant measurements. A natural curve connects the data points, with individual circles showing each measurement and tooltips revealing exact AQI values. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `line().curve(curveNatural)` for the chart, while `csv` loads data from a GitHub gist. The y-axis is fixed between zero and one hundred for consistent comparison across pollutants.

Jan 9, 2023

Refactoring BarChart D3

This example displays a horizontal bar chart of the top ten most populous countries for 2020, using data loaded from a CSV file via D3’s `csv` utility. The chart is rendered as SVG with React, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The code builds axes, gridlines, and bars through React’s JSX, while D3 utilities handle data parsing and scaling.

Jan 3, 2023

Stylized line chart working with Time

This visualization displays temperature readings over the course of a week, plotted as a scatterplot of circular marks. Using React to render SVG elements, the chart employs d3.scaleTime for the horizontal axis, d3.scaleLinear for the vertical axis, and d3.extent to compute the domains from the data. The code uses d3.csv to load the dataset from a GitHub-hosted CSV, and d3.timeFormat to format weekday labels on the bottom axis. Each point includes a tooltip showing its timestamp, with styling applied via the Poppins font and custom axis colors.

Dec 29, 2022

D3 Plot with React

This example visualizes the Iris dataset as a scatter plot of petal length against sepal width, with each flower represented by a circle. It uses React to render SVG elements, while d3-scale’s `scaleLinear` computes the x and y positions and d3-array’s `extent` sets the domains. Custom React components (AxisBottom, AxisLeft, Marks) generate ticks and circles. Data loads asynchronously via d3-fetch’s `csv` from a GitHub gist. The chart includes rotated and positioned axis labels, and hover tooltips using SVG `<title>` elements.

Dec 29, 2022

Axes with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered as SVG in React. D3 utilities load the CSV data, compute the scales, and generate tick marks, while React manages the component state and renders the chart elements. The bar lengths reflect each country’s population, with axis lines and labels positioned using D3’s scaleBand and scaleLinear. The chart uses D3 v5 and React 16.9, with data sourced from a GitHub-hosted CSV.

Megin convention

This example visualizes the top ten countries by 2020 population as a horizontal bar chart, using data loaded from a CSV file. The visualization is rendered as SVG through React components, with D3 v5 utilities (`csv`, `scaleBand`, `scaleLinear`, and `max`) handling data loading and scaling. The bars represent each country’s population, with lengths proportional to values, and a simple loading state displays text until data arrives. The code combines React hooks for state management with D3’s functional approach to create a clear, minimal population comparison.

BarChart Dec 27

A horizontal bar chart displays the top ten countries by estimated 2020 population, loaded from a CSV file using the `d3.csv` utility. React manages the application state with the `useState` and `useEffect` hooks, while D3’s `scaleBand` and `scaleLinear` map country names and population values to screen coordinates. Each bar is an SVG `<rect>` element rendered by React, with its width proportional to population and its height set by the band scale’s bandwidth.

Pathetic Bar Chart Dec 27

A React and D3 v5 bar chart displays the top 10 most populous countries from United Nations World Population Prospects 2019 data. It shows rectangular bars of varying widths representing each country’s 2020 population, computed via `d3.scaleLinear` and positioned with `d3.scaleBand`. No axes or labels are drawn, creating a minimal, "pathetic" chart. The SVG rendering uses React components, with data loaded asynchronously via `d3.csv`, and the chart updates only after the dataset is fully fetched.

ES6 Smiley with react Dec 27

This example shows a classic smiley face rendered as an SVG, with a yellow circle for the head, two black eyes, and a curved mouth. The visualization uses React components to structure the drawing, with separate functions for the background, eyes, and mouth. It relies on the D3.js `arc` API to generate the mouth's path, while the SVG elements are positioned using translation and fixed offsets. The code demonstrates a declarative, component-based approach to creating simple graphics with React and D3.

Hello HTML Dec 27

A yellow smiley face rendered as an SVG in a React component, with black outlined eyes and an open arc mouth, centered on a 980x500 canvas. The face uses nested SVG elements inside a translated group, with d3.arc computing the mouth path. The code imports React, ReactDOM, and the arc function from d3.v7, and the visualization is mounted to a DOM root via ReactDOM.render. Styling is minimal, with a hidden overflow on the page body.

Transition D3 Scatter plot

This example demonstrates an animated scatter plot of the Iris dataset, cycling through different numerical columns as the x-axis variable every three seconds. Each transition smoothly moves the existing SVG circles to their new positions over two seconds, with the axes updating accordingly. The visualization uses D3.js v7 with the `transition()` API to animate circle positions and axis scales, while the React framework handles the component structure. Data is loaded via `d3.csv` from a remote GitHub gist.

Dec 26, 2022

Dynamic D3 Scatter plot

This dynamic scatter plot visualizes the Iris dataset, cycling through four different measurements on the x-axis every two seconds while keeping sepal length on the y-axis. Built with React and D3 v7, it uses SVG rendering with scaleLinear for axes, extent for domains, and selection joins to update circles smoothly. The example demonstrates reusable chart components through a scatterPlot factory function, updating axis and circle positions as the x-value accessor changes via setInterval.

Dec 22, 2022

Reusable D3 Scatter plot with Symbol

This example demonstrates a reusable D3 scatter plot that visualizes the iris dataset, mapping petal length and sepal length along the x and y axes, with different species represented by distinct symbols. The chart is built using React and renders as SVG, with axes and symbols generated via d3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs. The code loads the data asynchronously from a CSV URL and applies custom parsing to convert numeric fields.

Dec 22, 2022

Reusable D3 Scatter plot dec14

This example renders a scatter plot of the Iris dataset, plotting petal length against sepal length using a reusable D3 chart component. The code loads data via `d3.csv`, maps values with `scaleLinear`, and renders circles as SVG elements. Axes are added using `axisLeft` and `axisBottom`, while the component’s width, height, margins, and radius are configured through a fluent API. The visualization fills the browser window and updates dynamically based on the provided data.

Dec 22, 2022

D3 Scatter plot dec14

This D3.js scatter plot visualizes the classic Iris dataset, plotting petal length against sepal length for individual flower samples. The visualization uses SVG circles rendered on a canvas that fills the browser window, with axes labeled using `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`, with numerical fields parsed and scaled to pixel coordinates via `d3.scaleLinear` and `d3.extent`. The plot adjusts dynamically to the viewport dimensions, providing a clean, minimal exploration of the dataset's distribution.

Dec 16, 2022

Fork of Scatter Plots of Iris Dataset

This interactive scatter plot displays the classic Iris dataset, showing sepal and petal measurements for three flower species. Users select which features appear on the x- and y-axes via a custom button panel, and the visualization updates accordingly. The code uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render axes, with circles colored by species. Data is loaded from a CSV file and rendered as SVG elements, with the button panel implemented as reusable D3 functions.

Dec 14, 2022

Fork of Melting Data for Multiple Lines

This example visualizes population over time by region, displaying multiple lines that trend across a time axis with a categorical color legend. It uses D3 v5 APIs including `d3.nest`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom` to render an SVG chart. Data is melted from UN population estimates and medium-variant projections, combining CSV sources. A custom color legend module and `mix-blend-mode` styling enhance readability, while axis labels and tick formatting clarify the scales.

Dec 14, 2022

Fork of Scatter Plots of Iris Dataset

Dec 14, 2022

Sol LeWitt Reproduction Vertical with D3

This example reproduces a Sol LeWitt-inspired drawing, showing a series of horizontal SVG rectangles that are masked to reveal a circle in the center of the viewport. The code builds the visualization using D3.js methods, specifically `select`, `append`, `attr`, and the `join` operation to create and style the shapes. By setting each rectangle's `mask` attribute to a predefined SVG mask, the piece demonstrates how layered vector shapes can create a generative, minimalist artwork. The rendered output uses SVG and occupies the full browser window.

Nov 26, 2022

Fork of Fork of Sol LeWitt Reproduction Vertical Inverst

This example generates an abstract geometric composition by layering horizontal and vertical bars over a full-screen SVG canvas. A circular mask and its inverse are created using the SVG `mask` element, with the first mask revealing horizontal strips in the central circle and the second exposing vertical strips outside it. The code uses the DOM API `createElementNS` to construct SVG elements dynamically, setting attributes like `width`, `height`, and `mask` via `setAttribute`. No external libraries are used; all shapes are drawn procedurally in a loop with 100 iterations per orientation.

Nov 23, 2022

Fork of Sol LeWitt Reproduction Vertical

This example reproduces Sol LeWitt’s minimalist wall drawing as an interactive SVG composition. It generates a grid of alternating horizontal and vertical rectangles, with a circular mask revealing only the central region of the layered shapes. The code uses the DOM API’s `createElementNS` to construct SVG elements directly, setting attributes like `width`, `height`, and `mask` programmatically. No external libraries are required, and the rendering adapts to the full browser viewport, creating a stark black-and-white geometric pattern inspired by the artist’s systematic approach.

Nov 23, 2022

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired wall drawing using dynamically generated SVG rectangles. It renders 100 vertical bars of fixed width, spaced evenly across the full viewport height, creating a minimalist grid pattern that fills the browser window. The visualization works by creating an SVG element with the DOM API `document.createElementNS`, setting its dimensions to match the window, and appending each rectangle with explicit `x`, `width`, and `height` attributes. No external libraries are used; it relies entirely on native JavaScript and SVG shape creation.

Nov 22, 2022

Fork of Cars Scatter Plot

This scatter plot from the UCI Machine Learning Repository’s Auto MPG dataset compares car horsepower on the x-axis against weight on the y-axis. Each circle represents a car, rendered using SVG with a fixed radius and semi-transparent red fill. The visualization uses d3.csv to load the data, d3.scaleLinear with d3.extent for scales, and d3.axisBottom and d3.axisLeft for axes. Axis labels and a title are added as SVG text elements.

Oct 24, 2022

Pseudo horizontal bar chart

Four dark rectangular bars on a white background create a pseudo horizontal bar chart, with each bar spanning a different width and height to suggest varying categorical values. The chart uses raw SVG shapes—`rect` and `path` elements—rather than a charting library, and the rendering relies on inline SVG attributes for coordinates and dimensions. The visualization demonstrates a minimalist, static approach to bar chart composition without interactive behavior or data binding.

Pseudo bar chart

Four dark rectangles of varying heights sit on a black background, resembling bars in a chart. The shapes are drawn as SVG `path` and `rect` elements, layered over a white `rect` that covers the entire 960 by 500 viewport. Created with static SVG markup, this pseudo bar chart uses simple geometric primitives to suggest a categorical comparison without depicting actual data values.

Pseudo Scatter Plot

This pseudo scatter plot displays five black circles at fixed positions on a white background, overlaid on a dark gray frame from a preceding rectangle. The circles are rendered directly as SVG `<circle>` elements with identical radii, rather than through a data-binding library or force simulation. The example uses no external JavaScript libraries, relying only on inline SVG markup within an HTML document. Despite the title, the visualization lacks axes, scales, or data-driven positioning, making it a static, geometric composition.

SVG Fundamentals

This example demonstrates basic SVG shape drawing, including circles, rectangles, lines, and paths, with attributes for fill, stroke, and stroke width. The shapes appear in a 960 by 500 canvas, using a yellow rectangle with a blue border and red filled circles among other elements. The code directly embeds SVG markup in HTML, using native SVG elements like `circle`, `rect`, `line`, and `path`. It showcases how geometric primitives and custom paths via the `d` attribute define visual output, with no external JavaScript libraries or data sources.