P

pnlinyz

@pnlinyz·40 public vizzes

Loading thumbnail…

SPAC IPO Counts and Proceeds Stacked Bar Charts

This interactive visualization displays SPAC IPO counts and proceeds as stacked bar charts, with bars segmented by company and colored by mission status. A dropdown menu lets users switch the x-axis attribute between company name, country, or rocket status. The chart is rendered using the vega-lite-api library with vega-lite and vega, while React manages the UI state and dropdown interactions. Hovering over bars reveals tooltips with mission counts, and the data comes from a CSV file containing IPO counts, proceeds, year, and type information.

Loading thumbnail…

SPAC Sized Points on a Map

This map displays cities with populations over 50,000 as semi-transparent circles, sized proportionally to their post-SPAC ticker symbol count using a square-root scale. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, graticules, and country interiors from World Atlas TopoJSON data. City coordinates are projected from latitude and longitude, with each circle rendered as an SVG element in React. Hovering reveals a native tooltip showing the city name and count. City data originates from Simplemaps’ World Cities Database.

Loading thumbnail…

SPAC_ Interactive Color Legend

This interactive scatter plot visualizes SPAC investment data, plotting annualized returns against current price with circles sized by market cap. A color legend on the right encodes sector membership; hovering over a legend category fades unrelated points and highlights only the selected sector. Built with React and D3 v5, it uses `scaleOrdinal` for colors, `scaleSqrt` for circle radius, and React state (`useState`) to manage hover interactions. The legend component applies opacity transitions dynamically, while native SVG `<title>` elements provide tooltips with investment details.

Loading thumbnail…

SPAC_Scatter Plot with Menus

This interactive scatter plot explores the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via dropdown menus. Written in React and rendered as SVG with D3 v5 scales, the visualization updates the axis labels and point positions dynamically based on the chosen attributes. The species of each flower is distinguished through an ordinal color scale, while ReactDropdown manages the menu selections. Data is loaded from a remote CSV file using D3’s `csv` loader.

Loading thumbnail…

Missing Migrants with Brushing

This visualization uses a world map with bubbles to show the total number of dead and missing migrants, with bubble size scaled by the square root of the count. A time-series histogram below the map displays the same data binned by month, and users can brush over this chart to filter the map to only show incidents within the selected time range. The map is rendered using `d3.geoPath` with natural Earth projection and graticules, while the histogram uses `d3.scaleTime`, `d3.histogram`, and `d3.brushX` for interactive filtering. Data comes from the Missing Migrants Project CSV, and all rendering is done in SVG within a React framework.

Loading thumbnail…

Missing Migrants with Multiple Views

This interactive visualization presents data on missing migrants through two linked views. A world map displays the geographic distribution of deaths and disappearances using proportional circles, with bubble size scaled according to the total count per location. Below, a time-based histogram aggregates the same data by month, showing the cumulative number of missing migrants over time. Both views use D3 v5 with React, employing `geoNaturalEarth1` projection for the map, `scaleSqrt` for circle sizing, and `histogram` binning for the temporal view. The data comes from CSV files loaded via `d3.csv`, with the map drawing from World Atlas TopoJSON.

Loading thumbnail…

Missing Migrants on a Map

A world map displays the locations of missing migrants, with each incident represented by a semi-transparent circle whose area encodes the total number of dead and missing. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, rendering landmasses, graticules, and country borders from World Atlas TopoJSON. Circle radii are scaled with `d3.scaleSqrt` based on the data’s maximum value from the Missing Migrants Project CSV. The example is built in React, using `useEffect` to load TopoJSON and CSV data through `d3.json` and `d3.csv`, with SVG output.

Loading thumbnail…

Missing Migrants

An interactive bar chart visualizes the number of dead and missing migrants over time, with monthly bins along the x-axis and the total count on the y-axis. The visualization uses React to render SVG elements, with D3 v5 functions like `scaleTime`, `scaleLinear`, `histogram`, and `sum` to process and aggregate the data. Data is loaded from a CSV via `d3.csv`, and the chart includes axis components and tooltips showing the exact count per bin.

Loading thumbnail…

Using Size

This example displays a world map using Natural Earth data, with city points sized by population. The visualization uses a square-root scale to map population values to circle radii, with a maximum radius of 12 pixels. Built with React and D3 v5, it employs `geoNaturalEarth1` projection, `geoPath` for rendering land and graticules, and the `scaleSqrt` API for size encoding. The map is styled with a light color palette and semi-transparent teal circles, presenting an aesthetically polished geographic view.

Loading thumbnail…

Points on a Map

This example displays a world map with city points overlaid, using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. The map includes land boundaries, graticules, and interiors rendered as SVG paths from World Atlas TopoJSON data. City locations, loaded from a CSV with d3.csv, are plotted as semi-transparent circles. The visualization is built with React and D3 v5, demonstrating a clean, styled cartographic composition with an equirectangular-like aesthetic.

Loading thumbnail…

SPAC Interactive Color Legend

This interactive scatterplot displays CSS named colors as a radial burst, with a color legend that highlights matching data points on hover. The visualization uses D3 utilities for data loading and scales (scaleLinear, scaleOrdinal, extent, max), while React components render the SVG marks, axes, and interactive legend. Users can select different attributes from dropdown menus to change the x and y axes, and hovering over a legend item fades non-matching points to 30% opacity. The data comes from a CSV file loaded asynchronously via D3’s csv function.

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris flower dataset, where users can switch the X and Y axes between four quantitative measurements via dropdown menus. Hovering over a species in the color legend highlights only that group’s circles, dimming the rest. React manages the interactive state, while D3 v5’s `scaleLinear`, `scaleOrdinal`, and `csv` handle data loading, scales, and formatting. The visualization renders as SVG, with axis components built from D3 scales and React elements.

Loading thumbnail…

Scatter Plot with Menus and Legend

This interactive scatter plot lets users explore the Iris dataset by selecting which flower measurements to plot on the x and y axes via dropdown menus. The visualization renders 150 data points as colored circles, with each species distinguished by a categorical color scale and accompanying legend. Built with React and D3 v5, the chart uses `scaleLinear`, `scaleOrdinal`, and CSV-loaded data, while axis components are rendered as SVG elements generated through the `AxisBottom` and `AxisLeft` functions.

Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris flower dataset, allowing users to select which numeric attributes to plot on the x- and y-axes via dropdown menus. The visualization uses React for component-based UI and rendering, with D3 v5 utilities such as `scaleLinear`, `extent`, and `format` for scales and axis tick formatting. SVG circles represent data points, colored by species using `scaleOrdinal`, and include tooltips showing exact values. The code leverages a custom `useData` hook to load CSV data asynchronously.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric attributes and species through two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles colored teal, with axes that dynamically update based on selected measurements. The `csv` loader fetches data from a remote URL, while `scaleLinear`, `extent`, and `format` handle scaling and tick labeling. The component-based architecture separates axis rendering, dropdown controls, and mark generation for modular interaction.

Loading thumbnail…

React Starter

This example demonstrates a simple React application with a pet-selection dropdown, showing how to manage and update state through user interaction. The code uses the `useState` hook to track the selected value and passes it to a custom `Dropdown` component built with React’s `select` and `option` elements. ReactDOM renders the `App` component into the DOM, while the dropdown’s `onChange` event triggers `setSelectedValue` to update state and log the choice to the console. The HTML file loads React and ReactDOM from external production scripts.

Loading thumbnail…

World Map

This interactive world map uses the Natural Earth dataset to visualize country boundaries and graticules. Rendered with SVG via React, it employs d3.geoNaturalEarth1 for projection, d3.geoPath for drawing, and topojson’s feature and mesh functions to process the geospatial data. The visualization displays land masses in teal, a light sphere background, and subtle gray graticule and interior boundary lines. Loading state is handled through React’s useState, with asynchronous data fetching via d3.json.

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes a time series of weekly temperature readings from San Francisco, plotting temperature against time as a scatter plot overlaid with a smooth connecting line. The chart uses React to render SVG elements, with axes and marks built as reusable components. Scales are created using d3.scaleTime and d3.scaleLinear, while the line path is generated with d3.line and the curveNatural interpolator. Data is loaded asynchronously via d3.csv, and each point includes a tooltip showing the timestamp.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width in the Iris dataset, loaded via d3.csv. React components render SVG circles for each data point, with d3.scaleLinear mapping values to axes and d3.format handling tick label abbreviations. The visualization includes axis labels, gridlines, and native SVG tooltips showing exact values on hover.

Loading thumbnail…

Fork of Rendering Data with React & D3

This bar chart displays the top 10 countries by population in 2020, using React for rendering SVG elements and D3 utilities for data loading and scales. The code fetches CSV data via `d3.csv`, transforms population values, and applies `scaleBand` for categorical positioning and `scaleLinear` for numeric values. Axes are custom React components that generate tick marks and labels. Hovering over a rect reveals a tooltip with the exact population value through the SVG `<title>` element.

Loading thumbnail…

TINTIN Rendering Data with React

A circular color wheel displays all CSS named colors as pie slices, each filled with its corresponding RGB hex value. The visualization loads data from a CSV file using D3’s `csv` utility, then renders the arcs with `d3.arc` inside a React component. React state manages the loading and presentation of the data, with a conditional “Loading…” message before the SVG appears. The example demonstrates integrating D3’s data-loading and geometry functions with React’s component-based rendering for a simple, dynamic output.

Loading thumbnail…

Tintin Rendering Data with React & D3

This gallery example shows a radial burst visualization of CSS named colors, with each color rendered as a slice of a pie chart. The visualization uses React for component structure and D3’s `csv` function to load data from a remote gist URL, then the `arc` and `pie` utilities to compute the path geometry for each colored slice, which are rendered as SVG `<path>` elements. The React app asynchronously fetches the data and displays a loading message until the colors are ready to be drawn.

Loading thumbnail…

TINTIN SPAC trend

This visualization shows the trend of SPAC and IPO activity in the US over time, using stacked bars to compare counts by type. The chart encodes the year on the x-axis and the summed IPO count on the y-axis, with color distinguishing SPAC from IPO types. It is built using the vega-lite-api, which registers vega and vega-lite, and loads CSV data via d3.csv. The bar marks are rendered with SVG, and appearance is customized through a configuration object for axis styling and tooltip settings.

Loading thumbnail…

Fork of Vega-Lite API Template

The visualization displays a bar chart mapping countries and sectors, with the color of each bar encoding the count of records from a U.S. postal service dataset. It shows the distribution of postal data across these categorical attributes. The code uses the Vega-Lite API to define the chart, built on Vega and Vega-Lite, with d3.csv loading the external dataset. Tooltips are handled via vega-tooltip, and the appearance is customized through a config object to improve readability.

Loading thumbnail…

TINTIN Vega-Lite API Template

This example visualizes financial data for SPACs, plotting each stock’s current price against its annualized return since IPO as a scatterplot. Each circle’s color encodes an acceleration value, and hovering reveals the stock’s name via a tooltip. The chart is built using the Vega-Lite API, which registers Vega and Vega-Lite, with D3’s `csv` function loading the dataset from a remote GitHub gist. Appearance customization, including axis styling and dark text, is defined in a separate config object, and the resulting SVG renders to fill the browser window.

Loading thumbnail…

TINTIN Vega-Lite API Template

This example visualizes SPAC (Special Purpose Acquisition Company) data, using a bar chart to show IPO Count over Year, with color encoding for Gross Proceeds. The visualization is built with the Vega-Lite API, combining vega, vega-lite, and vega-lite-api libraries, and renders as an SVG. Data is loaded asynchronously from a CSV URL via d3.csv, and the chart’s appearance is customized through a configuration object that adjusts axis styles and label fonts.

Loading thumbnail…

TINTIN Loading Data with React & D3

This example demonstrates how to load data into a React application using D3 utilities and manage that data with React state hooks. The page initially displays “loading…” and then shows a summary message about the loaded dataset, including its size in kilobytes, row count, and column count. The code uses `d3.csv` to fetch a CSV file from a GitHub gist containing CSS named colors, and React’s `useState` and `useEffect` hooks handle the asynchronous data retrieval and re-rendering. The application renders the summary as an SVG-less text element above a large, commented-out SVG illustration.

Loading thumbnail…

TINTIN Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js, displaying a summary of the data's dimensions and size. It fetches a remote CSV file containing CSS named colors, parses it with `d3.csv`, and reports the row count, column count, and file size in kilobytes. The output is rendered as large text within a `<pre>` element using `textContent`, and the file size is calculated by measuring the formatted string length with `d3.csvFormat`. The code relies on the Fetch API to retrieve the raw text from a GitHub Gist URL.

Loading thumbnail…

TINTIN Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js v5 and React. It fetches a dataset of CSS Named Colors and displays the file size, row count, and column count as large text. The primary approach uses `d3.csv` with a Promise, while alternative commented-out code shows `fetch` with `async`/`await` and `d3.csvParse`. The visualization is minimal, focusing on data loading mechanics rather than graphical representation.

Loading thumbnail…

TINTIN Mouse Follower

A yellow-bordered circle follows the mouse cursor across an SVG canvas. The React app uses `useState` to track mouse coordinates and `useCallback` to update them via an `onMouseMove` event handler. The circle’s center position re-renders on each move, with a radius of 30 pixels, within a fixed 960 by 500 viewport.

Loading thumbnail…

TINTIN Loading and Parsing CSV Data

This example demonstrates how to fetch and display the raw text of a CSV file containing CSS named colors in the browser console. The page uses the Fetch API to request the remote CSV data asynchronously and logs the resulting text output. It defines a custom `fetchText` helper function that retrieves the URL and returns the response as a string, which is then passed to `console.log`. No visualization or charting library is used; the focus is solely on loading and parsing the CSV data structure.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of loading and parsing a CSV file for data visualization. It fetches a remote dataset containing CSS named colors from a GitHub gist using the `fetch` API. The code retrieves the text content of the CSV with the `response.text()` method and logs it to the browser console. This program illustrates how to obtain raw tabular data, though it does not yet parse or visualize the values, serving as a starting point for building a chart or graph.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5’s `d3.csv` method, which returns a promise. It fetches a dataset of CSS named colors from a GitHub gist and displays the file size in kilobytes, the number of rows, and the number of columns in large text. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse` for comparison, highlighting different asynchronous patterns for handling data loading in a React-based visualization context.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using the D3.js library, displaying file size, row count, and column count from a dataset of CSS named colors fetched from a remote URL. It uses `d3.csv` with a promise-based `then` method to asynchronously retrieve and parse the data, then computes metrics from the resulting array and its `.columns` property. The visualization presents these statistics as plain text in a large `<pre>` element, with the code also including commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`.

Loading thumbnail…

Mouse Follower

A React-based SVG visualization demonstrates a circle that follows the cursor across a 960-by-500 viewport. The application tracks the mouse position through the `onMouseMove` event handler, updating state via React’s `useState` and `useCallback` hooks, then re-renders the circle’s center coordinates accordingly. The circle starts at the viewport’s midpoint and moves smoothly to match the pointer’s `clientX` and `clientY` values. The rendering relies on React DOM to mount the SVG element, with no external charting library involved.

Loading thumbnail…

Mouse follower

This example shows a yellow smiley face rendered as an SVG circle with black eyes and a mouth, centered on the screen and sized relative to the browser window. The face is built with React 16.9 and SVG elements, where the main circle, eye positions, and radii are calculated from `window.innerWidth` and `window.innerHeight`. Although the title suggests interaction, the provided code renders statically with no mouse event handlers or state updates, so the face does not actually follow the cursor.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API. It fetches a CSV file containing CSS named colors from a GitHub gist and logs the raw text to the browser console. The code defines an asynchronous `fetchText` function that retrieves the data and parses it as text, without using any external visualization libraries like D3.js. The example focuses solely on the data ingestion step, showing the initial console output of the retrieved CSV content.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors, displaying the data in an interactive table. The code uses JavaScript's `fetch` API to retrieve the CSV from a GitHub gist, then parses it with the `csv` library. The parsed data is rendered using React, with each row showing the color name, RGB values, and a visual swatch. The interface includes a search filter to find specific colors by name, and it highlights matching rows as the user types.

Loading thumbnail…

1 - Smiley Face Part I

This example shows a partially constructed smiley face rendered as an SVG, with a yellow circular background, two black eyes, and the beginning of a mouth arc. The code builds the face using React components, where `BackgroundCircle` and `Eyes` are separate reusable functions, while the mouth is generated using D3’s `arc` generator with specified inner and outer radii and angular extents. The final SVG is rendered through ReactDOM, with explicit positioning via translation and coordinate offsets for the eyes.

Loading thumbnail…

1 - Smiley Face

A single large circle with no face features is centered on an SVG canvas. The example demonstrates the minimal setup for a smiley face visualization, using only a basic SVG `<circle>` element with a fixed radius and no fill or stroke styling. The page is an HTML document with embedded CSS that removes margins and hides overflow, while the SVG is explicitly sized at 960 by 500 pixels. No external libraries or JavaScript are involved, relying purely on native SVG markup.