danilo

@sweatybrain·6 public vizzes

Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length on the x-axis and body mass on the y-axis. Each circle is colored by penguin species (yellow for Adelie, green for Gentoo, brown for Chinstrap) and encoded with bill length and depth as elliptical radii. Built with React and D3 v5, it uses `csv()` to load remote data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. The SVG is rendered full-screen, with custom font styling and axis labels displayed prominently.

Jun 13, 2023

Loading thumbnail…

trying more stuff again

A turquoise circle follows the mouse cursor within an SVG canvas, creating a direct positional mapping between pointer movement and the circle’s center. Built with React state and a `useCallback` handler, the `onMouseMove` event updates the circle’s `cx` and `cy` attributes in real time. The visualization uses d3.v5 only for SVG element creation, while React manages the reactive rendering, resulting in a simple interactive tracking effect.

Jul 25, 2022

Loading thumbnail…

stuff with vega-lite-api

This example presents a bar chart of worldwide religious populations, sorted in descending order and color-coded by religion, with tooltips showing exact values. It is built using the Vega-Lite API, which programmatically defines the bar mark and encodings, then renders through Vega with SVG output. The visualization loads CSV data via d3.csv and applies a custom configuration that removes axis domains, sets gray tick marks, and increases label and title font sizes for readability.

Jul 25, 2022

Loading thumbnail…

loadin data w react & d3

This example demonstrates loading a CSV dataset with D3 and storing it in React state for display. It fetches a named colors dataset from a GitHub gist using `d3.csv`, then uses React hooks (`useState`, `useEffect`) to manage the asynchronous data loading. Once loaded, the custom `message.js` module computes and displays the dataset’s row count and approximate file size in kilobytes. A loading placeholder appears while the request is pending.

Jul 25, 2022

Loading thumbnail…

more stuff

This example presents a minimal status readout for a loaded CSV file. It displays the row count and the formatted file size in kilobytes within a large-text HTML `<pre>` element. The visualization fetches named color data from a remote CSV file using `d3.csv` and subsequently formats the parsed data with `d3.csvFormat` to calculate its size. The D3 v7 library handles the asynchronous data loading and parsing.

Jul 25, 2022

Loading thumbnail…

trying stuff

This example shows a grid of nine identical pairs of faces, each composed of two overlapping SVG faces with different mouth orientations. Built with React and D3.js v7, the code uses the `arc()` API to generate mouth paths, with one face rendering a downward arc and the other an upward arc. The faces are positioned using a `FaceContainer` that translates the SVG group to a center point, while `range(9)` from D3 creates the repeated array. All rendering is done through SVG elements defined in separate component files.

Jul 24, 2022