S

Samuele Greco

@54mu·29 public vizzes

Loading thumbnail…

adding menus to animation of reusable D3 scatterplot

This example demonstrates an animated, reusable D3 scatterplot of the Iris dataset, with dropdown menus that let users select which quantitative columns appear on the x- and y-axes. The visualization renders data points as SVG symbols colored by species, with smooth transitions updating point positions and axis scales when selections change. The code builds on D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, `transition`, and `dispatch`, while the menus are implemented as a reusable function that emits custom `change` events. The scatterplot itself is structured as a configurable function with setter methods for dimensions, data accessors, and styling options.

Loading thumbnail…

animation of reusable D3 scatterplot

This example demonstrates a reusable D3 scatterplot component built with React that animates through different combinations of iris flower measurements. The visualization cycles through all pairs of sepal and petal dimensions every second, updating point positions and axis scales with smooth transitions using d3's `transition` API. The SVG rendering leverages d3 scales, ordinal color mapping for species categories, and custom symbols to distinguish data points. The data comes from a CSV file of iris flowers parsed with d3's `csv` utility.

Loading thumbnail…

idempotence of reusable D3 scatterplot

This example demonstrates a reusable D3 scatterplot that cycles through different data columns of the Iris dataset every second, updating the x-axis and point positions with a smooth animation. Built as a React-compatible module, the `scatterPlot` function uses D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs to render SVG marks colored by species. The plot is re-invoked via `svg.call(plot)` on a timer, showcasing idempotent re-rendering as the `xValue` accessor changes between petal and sepal measurements.

Loading thumbnail…

Fork of reusable D3 scatterplot

This fork of a reusable D3 scatterplot visualizes the Iris dataset, encoding sepal length and petal width with positions onto an SVG canvas while symbol shapes and colors both map to the species category. The code builds custom plot margins and axes using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. It demonstrates a reusable chart pattern in React, where the scatter plot component exposes setter methods for dimensions, data accessors, and margins. Data is loaded asynchronously via `d3.csv` and parsed into numeric values before rendering.

Loading thumbnail…

change markers in reusable D3 scatterplot

This example demonstrates a reusable D3 scatterplot that renders the Iris dataset, mapping petal width and sepal length to x and y axes while encoding species through both color and symbol shapes. The visualization uses an ordinal color scale with `d3.schemeCategory10` and a symbol scale based on `d3.symbols` to differentiate categories. Built as a custom `scatterPlot` function with setters for width, height, data, and accessor functions, it employs `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` within an SVG rendered by React. The code assigns path data via `symbolGenerator.type()` to create distinct markers.

Loading thumbnail…

reusable D3 scatterplot

This reusable D3 scatterplot displays the classic Iris dataset, plotting petal width against sepal length with points colored by species via a categorical color scale. The visualization is built as a custom D3 function that returns a chart component, configured through fluent setter methods for dimensions, margins, data accessors, and radius. Using SVG rendering, the code applies `scaleLinear` for both axes, `scaleOrdinal` with `schemeCategory10` for categories, and `axisLeft`/`axisBottom` for ticks. The scatterplot is rendered inside a React-compatible structure despite using plain D3 selections.

Loading thumbnail…

adding axis to D3 scatterplot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis, with points colored by species. Implemented in React with D3 v7, it uses `scaleLinear` for axis scaling, `extent` to compute domains, and `axisLeft`/`axisBottom` to render labeled axes. The SVG circles are positioned and colored via D3’s selection and join API, with margins offsetting the axis labels.

Loading thumbnail…

D3 scatterplot

This scatterplot visualizes the Iris flower dataset, plotting petal length against sepal length for individual specimens. The visualization uses D3 v7’s `scaleLinear` and `extent` functions to map data values to screen coordinates within a full-window SVG. Circles are rendered via `selectAll` and `join` after loading the CSV with `d3.csv`. The example demonstrates a minimal, unadorned approach to data-driven point placement, with no axes or labels, focusing purely on the raw distribution of the flower measurements.

Loading thumbnail…

js in html

This example demonstrates the simplest possible integration of JavaScript and CSS within an HTML page, rendering a static “Hello HTML!” message centered on the screen. The styling uses a CSS class with a large font size, while the page loads D3 v7 from a CDN but does not invoke any of its visualization functions. A separate JavaScript file imports a `selection` object from D3, yet only logs a string to the console, highlighting the minimal setup for a D3-powered project.

Loading thumbnail…

refactoring the sin animation

Fifteen animated circles move in a sinusoidal wave across an SVG canvas, with each circle’s vertical position and radius oscillating over time. The animation runs on a 60 FPS interval, updating data from `makeData` and rendering via D3’s `selectAll().data().join()` pattern. D3 v7 and React manage the state and DOM updates, creating a rhythmic, pulsing visual pattern.

Loading thumbnail…

D3 selection exploration

This example explores D3 selections and data joins through an animated visualization. A sinusoidal wave of circles moves across the screen, with the number of circles oscillating based on a time variable. The code uses d3.select and d3.range to generate data, then applies the selection’s `.data()`, `.join()`, and attribute setters to update SVG circle positions each frame. The animation runs via `setInterval` at 60fps, with sine functions driving both the vertical placement and count of circles, demonstrating enter, update, and exit behavior.

Loading thumbnail…

arrays

This example demonstrates fundamental JavaScript array operations through console logging, including iteration, filtering, sorting, mapping, and reducing. It shows a custom `range` function, a sorting comparator for numbers, and how to build objects from array entries using `reduce`. The code imports `ascending` and `descending` from D3 to illustrate library-based sorting, and relies on D3 version 7.3.0 for these utilities. The visualization itself is minimal—a single HTML page with a large styled message—while the core content lives in the script’s output.

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by layering vertical and horizontal striped rectangles, masked by geometric symbols to create intersecting patterns across the full screen. It uses D3 selections and joins to render 100 rect elements in each orientation, with alternating masks that reveal or hide the stripes through symbol shapes. The SVG output is generated dynamically based on window dimensions, and the masks combine D3's `symbol` and `range` APIs to position five distinct marker types. The code imports only `select`, `range`, `symbols`, and `symbol` from D3 v7.3.0.

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.3.0, generating a grid-like pattern of alternating vertical and horizontal bands over the full browser viewport. The artwork uses two SVG masks—one with a white circle punched through black and another with a black circle on white—so that vertical stripes appear only within the circular region, while horizontal stripes are visible everywhere except inside that circle. The code constructs 100 rectangles in each orientation via `selectAll` and `data().join()`, setting positions and dimensions to cover the canvas.

Loading thumbnail…

SVG fundamentals

An empty SVG element on a bare HTML page demonstrates the foundational structure for scalable vector graphics rendering. The example uses no external libraries, relying solely on the native `<svg>` tag within the document body. It highlights the minimal setup required for SVG-based visualization, where all visual elements—shapes, paths, and text—must be explicitly added as child nodes. This serves as a starting point for building more complex interactive charts, though the current implementation contains no drawing or data binding logic.

Loading thumbnail…

Fork of adding axes to Barchart population

This example displays a population bar chart with overlaid genomic features, using D3 and React to visualize data from CSV files. It shows a set of bars representing population sizes on a linear scale, alongside four semi-transparent rectangles that highlight specific chromosomal regions. The visualization leverages D3's `scaleBand` and `scaleLinear` to map data to SVG coordinates, with gridlines and tick labels formatted using `d3.format`. React manages the asynchronous loading of both datasets via custom hooks, while the final SVG output is rendered through ReactDOM.

Loading thumbnail…

refactore barplot

This example shows a horizontal bar chart of population data for ten countries in 2020, loaded from a CSV file and rendered as SVG. The visualization uses React to manage state and render components, while D3 v7 handles data loading with `d3.csv`, scales via `scaleBand` and `scaleLinear`, and computes tick values for the x-axis. The chart displays rectangular bars for each country, with axis labels generated using D3’s tick mapping and React’s JSX for markup. The code clearly separates the data-fetching logic into a custom `useData` hook, demonstrating React’s `useState` and `useEffect` for asynchronous data loading.

Loading thumbnail…

adding axes to Barchart population

This example shows a horizontal bar chart of 2020 population estimates for ten countries, with labeled axes and grid lines. It uses React for rendering SVG elements and D3 v7 for data loading and scales, including `csv`, `scaleBand`, `scaleLinear`, and `max`. The population data is loaded from a CSV file hosted on GitHub.

Loading thumbnail…

adding margins to Barchart population

This example shows a horizontal bar chart of the ten most populous countries, using 2020 UN population data. The bars are drawn as SVG rectangles, with a linear x-scale mapping population counts to bar widths and a band scale for country categories. The chart is rendered in React, managing data loading via `d3.csv` and state with `useState` and `useEffect`. The layout reserves fixed margins around the plot area, and the SVG canvas is 960 by 500 pixels. The code highlights the use of a margin object to compute inner dimensions, though the y-axis labels are not rendered.

Loading thumbnail…

Barchart population

This example visualizes the top 10 most populous countries in 2020 using a horizontal bar chart, with bar lengths proportional to each country's population. The visualization loads UN population data from a CSV file via `d3.csv` and renders the bars as SVG rectangles. React manages the component state and rendering, while D3’s `scaleBand` and `scaleLinear` map country names to vertical positions and population values to bar widths. The code initially displays a loading placeholder until the data arrives asynchronously.

Loading thumbnail…

Fork of Fork of loading data w/ react and d3

A pie chart displays the proportional distribution of named colors, using their RGB hex values for the fill color of each slice. The chart is built with React, which manages the asynchronous loading of a CSV file via `d3.csv` and conditional rendering, while ReactDOM mounts the component. The geometric layout and slice drawing rely on the D3 modules `d3.arc` and `d3.pie`, which compute the arc paths for each data row. The example demonstrates a minimal integration of D3’s data-processing and shape-generation functions within a React component structure, rendered as an SVG graphic.

Loading thumbnail…

Fork of loading data w/ react and d3

This example shows a column of 148 small colored rectangles, each representing a named color from a CSV dataset loaded from a GitHub gist. The visualization uses React with the `useState` and `useEffect` hooks to manage the loading state, while the `d3.csv` function fetches and parses the data. Once loaded, the `data.map` function renders each row as a div whose background color is set from the `RGB hex value` column. The chart displays a loading message until the asynchronous data request completes.

Loading thumbnail…

loading data w/ react and d3

This example demonstrates how D3 and React can work together to load and summarize a CSV dataset. The visualization initially displays a “loading...” message, then uses D3’s `csv` function to fetch a remote file of named colors from a GitHub gist. Once the data arrives, React state updates, and a text summary reports the total number of rows, columns, and approximate file size in kilobytes, formatted via `d3.csvFormat`. The rendering relies on React’s `useEffect` and `useState` hooks, with the output drawn as an SVG element in the page.

Loading thumbnail…

loading and parsing CSV data 2

This example demonstrates the basic pattern of loading and parsing a CSV file in D3, displaying the number of rows, columns, and approximate file size in kilobytes as plain text on a large-format `<pre>` element. The code fetches a remote CSV file from a GitHub gist using `d3.csv`, then chains a `.then` callback to process the parsed data. It reports `data.length` for rows, `data.columns.length` for columns, and measures the output of `d3.csvFormat(data)` to estimate the original data size, updating the DOM via `textContent`.

Loading thumbnail…

follow

A React application renders two SVG circles that follow the mouse cursor across a 960 by 500 viewport. The component tracks pointer position via the `onMouseMove` event and the `useState` hook, updating the circle coordinates in real time. The circles are positioned with an offset equal to twice their radius, creating a linked pair that trails the cursor. The code uses React 16.9 and renders directly to SVG elements through `ReactDOM.render`.

Loading thumbnail…

mousefollow

A grid of smiling faces follows the mouse cursor, each face rendered as a yellow circle with black outline, two eyes, and an arc-shaped mouth. The faces are generated using React components that construct SVG elements, with random variations in eye radius, mouth radius, and mouth width. The code uses d3’s `arc` function to create mouth paths and `range` to generate the grid, while ReactDOM renders the SVG faces into the page.

Loading thumbnail…

loading and parsing CSV data

This example demonstrates the initial step of working with external data in a web visualization: fetching and logging raw CSV content. It uses the browser’s native `fetch` API to asynchronously retrieve a text file from a GitHub gist URL, then parses the response with `response.text()`. The result is printed to the browser console via `console.log`, showing the raw comma-separated data as a string. No parsing library like d3.csv or PapaParse is involved, and no visual output is rendered—only the raw text is exposed for inspection. The approach relies on plain JavaScript and a local async function, `fetchText`, to handle the request.

Loading thumbnail…

smiley face part 1

A grid of eighteen smiley faces renders in SVG via React components, each face built from a yellow background circle, two eyes, and a mouth. The eyes and mouth radii vary randomly per face, creating subtle differences across the grid. The code uses React for component composition, D3’s `arc` generator to draw the mouth path, and `range` from D3 to create the array of faces.

Loading thumbnail…

Fork of HTML Starter

A single large yellow circle is drawn on a blank SVG canvas, centered within a 900 by 400 viewport. The circle features a black stroke and a thick border, with the page's CSS setting the body to center content at a massive 13em font size. The rendering uses an inline SVG `<circle>` element with explicit `r`, `cx`, and `cy` attributes, while the HTML document itself relies on basic CSS and JavaScript, as described in the accompanying README.