P

psabela

@psabela·22 public vizzes

Loading thumbnail…

Sol LeWitt - d3

This example generates a grid of horizontal and vertical stripes across the full viewport, overlaid with two opposing masks that reveal a diamond-shaped symbol at the center. The SVG is built using D3 selections and data joins, with lines spaced every 20 pixels. A reusable `renderMask` function creates the masks, using D3’s `symbol` and `symbols` API to draw the diamond path. The stripes are clipped by these masks, producing an interplay of light and dark regions inspired by Sol LeWitt’s generative wall drawings.

Loading thumbnail…

Zoom Interation World Map

This interactive world map allows users to pan and zoom by dragging or using the scroll wheel, with the view transform applied to a group element containing all marks. The visualization renders graticules, country boundaries, and interior borders using d3.geoPath with the natural Earth projection, plus two static city points connected by a red line. Data is sourced from the `world-atlas` TopoJSON and a world cities CSV, with zoom handling implemented through D3's `zoom` behavior within a React component.

Loading thumbnail…

Customized Line Chart

This line chart displays federal budgetary resources over time, with dropdown filters for agency and account name and checkboxes to toggle comparison lines from related accounts. The SVG visualization renders a natural curve path and individual data points using D3 scales and the `line().curve(curveNatural)` generator, while React manages the interactive state. A CSV dataset is loaded via `d3.csv` and processed with `d3.rollup` to aggregate quarterly sums. Axes are custom-built with D3 time and linear scales, and tooltips appear via SVG `<title>` elements.

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between sepal length and sepal width in the Iris dataset, with each flower represented as a teal circle. The chart loads data from a CSV file using `d3.csv` and renders SVG circles via React components. Axes are built with `d3.scaleLinear` and custom tick components, while hover tooltips use the SVG `<title>` element to show formatted values.

Loading thumbnail…

test

A line chart displays five data points, connected by a smooth basis-closed curve, within a zoomable and pannable SVG stage. The visualization uses React to manage the interface and D3 for scaling, curve generation, and the zoom interaction. The `d3.zoom` API, applied via a selection, updates a transform state that repositions and scales the chart group. The chart itself renders as a single path element, with its coordinates mapped through linear scales, against a plain background.

Loading thumbnail…

Line Chart

A line chart visualizes how temperature changes over time in San Francisco, using weekly temperature data loaded from a CSV file via D3's `csv` function. The React-based component structure relies on D3's `scaleTime` and `scaleLinear` for axes, with a natural curve applied to the path using D3's `line` and `curveNatural`. The SVG rendering includes custom axis components and an interactive hover effect through circle elements with `<title>` tooltips.

Loading thumbnail…

Mouse Follower

A yellow smiley face follows the mouse cursor across an SVG canvas, redrawing its position on every mouse movement event. The face is built from reusable React components—a yellow circle background, two black eye circles, and a mouth drawn with `d3.arc()`—all composed within a `<g>` transform. React state tracks the cursor’s `clientX` and `clientY` coordinates, triggering re-renders via `useState` and `useCallback`. A dropdown menu is present but not connected to the visualization.

Loading thumbnail…

Zoom Skeleton

This example demonstrates a zoomable SVG visualization built with React and D3, showing a simple text label that can be panned and scaled using the mouse wheel or drag gestures. The code fetches JSON data and performs data transformations with `d3.rollup` and `d3.filter`, though the rendered output remains minimal. The zoom behavior is implemented via `d3.zoom`, which updates a React state transform that is applied to a group element using SVG `transform` attributes. The visualization uses React hooks like `useState`, `useEffect`, and `useContext` to manage the SVG stage and zoom container, with D3’s event handling integrated through the `select` API.

Loading thumbnail…

Barchart

This interactive bar chart displays multiple data series as colored bars, with buttons allowing users to toggle between grouped and stacked layouts and show or hide individual series. The chart uses D3 v6 with SVG rendering and animated transitions. Data is generated procedurally using a bump function that creates smooth, pseudo-random positive values. Tooltips show precise values on hover, while radio-style buttons and series toggles control the visualization state.

Loading thumbnail…

Zoom Skeleton

This example demonstrates a zoomable SVG stage built with React and D3 v6. A zoom behavior attached to the SVG element updates a transform state, which is applied to a child `<g>` container, allowing the text "Hello World!" to pan and scale in response to mouse gestures. The implementation uses React hooks (`useState`, `useEffect`) and D3's `zoom` and `select` APIs, with the stage and zoom container defined as reusable components. The SVG is rendered declaratively via React, with D3 handling the interactive zoom events.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that, when run, displays the text “Hello React!” in large, centered type. The code sets up a React component using the `ReactDOM.render` method and imports both React and ReactDOM from their respective production UMD builds. It also loads D3.js version 6, but the accompanying data-fetching logic with `d3.csv` and a blank `csvUrl` remains unused, so no data or D3-based rendering is actively shown. The final output is purely the styled text message rendered through React’s virtual DOM.

Loading thumbnail…

Scatter Plot With Menues

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus dynamically select which numerical attribute appears on each axis, updating the chart in real time. Built with React and D3 v6, the visualization uses d3.scaleLinear for scales and d3.extent for domains, rendered as SVG circles with tooltips. The code loads the data via d3.csv and demonstrates reusable axis and mark components.

Loading thumbnail…

Menu in React

This example shows a simple pet selector menu built with React, displaying a dropdown list of six animal options. The interface presents a label and a select element, with the currently chosen pet highlighted. The app uses React hooks, specifically `useState`, to manage the selected value, starting with `Hamster` as the initial selection. The reusable `Dropdown` component receives the options, an ID, the current value, and a callback to update the selection. ReactDOM renders the application to the root element, with React and ReactDOM loaded from unpkg CDN.

Loading thumbnail…

InterationWorld Map

An interactive world map renders country boundaries as SVG paths using a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. Country polygons, filled with a teal color, turn red on hover, while graticules and interior borders are drawn from `d3.geoGraticule` and a TopoJSON mesh. Data loads from the World Atlas TopoJSON file, and the React component updates selections dynamically.

Loading thumbnail…

World Map

This world map visualizes global landmasses and country interiors using a Natural Earth projection. It draws the sphere, graticules, and land polygons as SVG paths via `d3.geoPath` and the `geoNaturalEarth1` projection. The map loads country boundaries from a world-atlas TopoJSON file, processed with `topojson.feature` and `topojson.mesh`. Land is filled in a teal color, while interior boundaries are stroked distinctly over a light gray sphere and grid.

Loading thumbnail…

Stylized BAR Chart

A stylized bar chart displays the number of cylinders for three car origins, using teal bars on a white background with Poppins typography. The visualization is built with React and D3 v6, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a CSV file via D3’s `csv` function, and the SVG rendering includes custom axis components for ticks and labels.

Loading thumbnail…

Refactored BAR Chart

This example shows a horizontal bar chart of automobile data, displaying the number of cylinders for each car origin across the first three rows of a CSV dataset. The visualization uses React components to render SVG elements, with `d3.scaleBand` and `d3.scaleLinear` for axes. The chart is built by separating axis and mark rendering into modular components, with bars drawn as `<rect>` elements whose widths are mapped from the cylinder values.

Loading thumbnail…

Margin Convention Rendering BAR data with React

A bar chart rendered with SVG displays car data, showing average cylinder counts by origin for three countries. The React component uses `d3.csv` to load data and `scaleBand` with `scaleLinear` to position bars and axes. Red tick lines and labels for the x-axis are generated from `xScale.ticks()`, while y-axis labels use the band scale's domain. Margins are applied via a translated SVG `<g>` element, keeping the plot area separate from the chart edges.

Loading thumbnail…

Rendering BAR data with React

This example shows a horizontal bar chart built with React and D3 v6, displaying the first three rows of a CSV dataset. The chart maps each data point’s `Origin` category to the y-axis band scale and its `Cylinders` value to the x-axis linear scale, rendering `<rect>` SVG elements. Data is loaded asynchronously via `d3.csv` into React state using the `useEffect` and `useState` hooks, with the final SVG output managed by ReactDOM. The visualization relies on `scaleBand`, `scaleLinear`, and `max` from D3.

Loading thumbnail…

Rendering PIE data with React

This example renders a pie chart from CSV data using React and D3 v6, displaying vehicle cylinder counts as colored SVG arcs. The app fetches data from a GitHub gist via `d3.csv`, then uses D3’s `pie()` generator to compute arc angles and `arc()` to create the path geometry. Each slice is filled with a color from `schemeSet3` and rendered as a React `<path>` element inside an SVG group centered on the viewport. The visualization updates reactively when data loads, showing a “Loading…” message beforehand.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external CSV data into a React application using D3’s `csv` method, then display a summary of the dataset’s size and structure. The React `useEffect` hook fetches the CSV from a GitHub gist, storing the parsed data in state via `useState`. Once loaded, the `message` function formats the output using `d3.csvFormat` to calculate file size in kilobytes, alongside row and column counts. The interface shows the text summary inside an HTML `<pre>` element, with a simple “loading” placeholder before data arrives.

Loading thumbnail…

Smiley Face Part I

Five identical smiley faces render in yellow with black outlines, each with two eyes and an arc-shaped mouth. The faces vary in size due to a random scale factor applied per instance. Built with React, the visualization uses D3’s `arc` generator to define the mouth path, while SVG circles form the background, eyes, and a wrapper group handles translation and scaling. No dataset is involved; the faces are generated from a fixed `range`.