thom

@chinitoM2·13 public vizzes

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, comparing petal length against sepal width. The code uses d3.scaleLinear and d3.extent to map data to SVG coordinates, with custom React components for axes and marks. Styling is applied via CSS classes for ticks and circles. The plot renders within a Poppins-font SVG, loading data asynchronously from a CSV via d3.csv, with a digital tooltip showing the petal length value on hover.

Dec 3, 2023

Loading thumbnail…

MLot Transactions

This visualization displays MLot transaction quantities as orange, semi-transparent circles positioned across a map of the United States, with state boundaries rendered in teal and interior borders in gray. The map uses a geographic projection via `geoAlbersUsa` and `geoPath` from D3 v5, while bubble sizing employs `scaleSqrt` based on transaction quantity data loaded from a CSV using `d3.csv`. React components manage the rendering, and topological data for state shapes comes from a US Atlas JSON file processed with `feature` and `mesh`.

Sep 6, 2023

Loading thumbnail…

Fork of ManCity 2022-2023 Results Line Chart

The chart visualizes Manchester City’s goals scored per match across the 2022–2023 season, using a black, stroke-only line over an SVG canvas. It loads match data from a CSV file and maps dates to the x-axis and goals to the y-axis via d3.scaleTime and d3.scaleLinear. The line is generated with d3.line, while React’s useState and useEffect manage asynchronous data fetching through d3.csv. The chart fills the browser window, with axes omitted to focus purely on the trend.

Aug 10, 2023

Loading thumbnail…

Summarizing ManCity 2022-2023 Data

This visualization condenses Manchester City’s 2022-2023 season statistics into a single text summary, displaying the total goals scored, goals allowed, and the date of the most recent match. It fetches a CSV dataset scraped from The Fishy and reformats it with `d3.csv`, then uses `d3.map` and array methods like `reduce` to aggregate numeric columns. The final message is rendered in a large `<pre>` element via `document.getElementById`. The code highlights a synchronous loading pipeline with `d3.csv` and demonstrates summing columns for a concise performance recap.

Aug 9, 2023

Loading thumbnail…

ManCity 2022-2023 Results Line Chart

The visualization displays Manchester City’s match-by-match goal scoring and conceding performance across the 2022–2023 season as a line chart rendered in SVG. Each point pairs goals scored against goals allowed per fixture, plotted chronologically by date, with the full viewport filled by a red background. The chart is built in React, using D3’s `csv` loader to fetch and parse a remote CSV file, converting numeric goal fields and date strings into proper types. The `LineChart` component receives this data and renders an empty SVG, while the app uses `useData` hook to manage asynchronous loading and display a loading message until data arrives.

Aug 9, 2023

Loading thumbnail…

Fork of Loading and Parsing ManCity 2022-2023 Data

This example displays basic metadata about Manchester City’s 2022–2023 match results, showing the dataset’s size in kilobytes, row count, and column count in large text. It loads a CSV file from a GitHub gist using `d3.csv` and applies `d3.csvFormat` to measure the parsed data’s size. The data originates from The Fishy, reformatted with date adjustments. The visualization uses D3 v5 and renders the summary in a `pre` element, with commented-out alternatives demonstrating `fetch`, `async/await`, and callback-style parsing.

Aug 9, 2023

Loading thumbnail…

Histogram of ManCity 2022-2023 Goals Scored

This histogram visualizes the total goals scored by Manchester City in each month of the 2022-2023 season, with match dates on the x-axis and goal counts on the y-axis. The data comes from a CSV file loaded via d3.csv, and the chart is rendered as SVG using React components. The code uses d3.bin with timeMonths thresholds to group matches, d3.scaleTime and d3.scaleLinear for axes, and d3.sum to aggregate goals per month. Tooltips display exact goal totals via SVG title elements.

Aug 4, 2023

Loading thumbnail…

Scatter 🅿️lot w/ ©️olor Legend

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The visualization uses d3.scaleLinear for x and y axes, d3.scaleOrdinal with a categorical color palette for species identification, and React dropdown menus to dynamically switch which attributes are plotted on each axis. A custom ColorLegend component renders colored circles with species labels, while Marks components draw SVG circles with native tooltips displaying formatted values. The chart uses d3.csv for data loading and SVG rendering within a React framework.

Jul 28, 2023

Loading thumbnail…

Scatter 🅿️lot w/ ©️olor

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three plant species. Dropdown menus dynamically select which attributes map to the x and y axes, while color distinguishes species using a d3.scaleOrdinal with categorical colors. The visualization, built with React and D3 v5, renders SVG circles with d3.scaleLinear scales for axes and includes tooltips showing formatted values. Data loads asynchronously via d3.csv from a remote gist URL.

Jul 27, 2023

Loading thumbnail…

🅿️olished Scatter 🅿️lot w/ Ⓜ️enu💰

A scatter plot of the Iris Dataset, where dropdown menus select which flower measurements appear on the x and y axes. The visualization uses React to manage state for the selected attributes, and renders SVG circles with d3.scaleLinear for positioning. Axes are built from d3 scales and ticks, while tooltips are provided via SVG `<title>` elements. Data is loaded asynchronously using d3.csv, and the chart updates dynamically when the user changes the dropdown selections.

Jul 27, 2023

Loading thumbnail…

Scatter 🅿️lot w/ Ⓜ️enu💰

This scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. Two dropdown menus let users independently select which attribute to display on the X and Y axes from options including sepal and petal dimensions, as well as species. The code uses React for the interface and D3 v5 for the SVG rendering, employing `scaleLinear` for axes, `extent` for domain calculation, and a custom `Dropdown` component to manage the interactive attribute selection.

Jul 27, 2023

Loading thumbnail…

Fork of Menus with React (Scatter Plot w/ Menus)

This interactive scatter plot example demonstrates how to build dropdown menus in React, featuring a pet selector with six animal options. The code uses React's `useState` hook to manage the selected value and passes it to a reusable `Dropdown` component that renders a native HTML `<select>` element. The example includes a link to a YouTube tutorial and is built with React 16.9.0, showcasing component composition and controlled form inputs.

Jul 26, 2023

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a smiley face built with React and D3, rendered as an SVG. It uses D3’s `arc` generator to create the mouth as an annular path, while the face, eyes, and stroke are drawn with SVG circles. The code defines a React component that positions elements around a central coordinate, using D3’s v5 library for path generation and React for the component structure and rendering.

Jun 8, 2023