D

dleoenri

@SanDmaN-rgb·23 public vizzes

Loading thumbnail…

ScatterPlot

This scatterplot displays the relationship between petal length and sepal width in the Iris dataset, with each data point represented as a circle. The visualization uses React and D3 v7, employing `scaleLinear` for both axes and rendering SVG elements through components like `AxisBottom`, `AxisLeft`, and `Marks`. The axes include formatted tick labels and axis titles, while circles include HTML title tooltips. Data is loaded asynchronously from a CSV file using D3’s `csv` function and parsed in `useData`.

Loading thumbnail…

Converge

This visualization displays mobile app download counts per device using a horizontal bar chart. The chart filters data by a specific date, showing only entries from 02/09/2022. Bars are rendered as SVG rectangles using React components, with scales from D3 v7 (`scaleLinear`, `scaleBand`) mapping download values to widths and devices to vertical positions. The visualization includes an X-axis with formatted tick labels and an interactive file upload input that appears intended for loading custom datasets.

Loading thumbnail…

MyDataScatterPlot

This bar chart displays the number of downloads for various mobile devices, using a horizontal bar layout where the length of each bar corresponds to the download count. The visualization includes interactive elements like file upload and date picker inputs, though the data itself is fetched from a remote CSV file. The chart is built with React and rendered as SVG, utilizing D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Hovering over a bar reveals a tooltip with the precise download value, and the bars are styled with a color transition on hover.

Loading thumbnail…

Stylized Barchart Test

This stylized bar chart displays mobile app download totals across devices, with the dataset filtered to two rows and the x-axis scaled beyond the maximum value to expand tick labels. The visualization is built with React (v18) and D3 v7, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for bars. Hovering changes bar color via CSS transitions, while `<title>` tooltips show formatted values. Data loads from a CSV via `d3.csv`, and axes are generated from D3 scales rather than D3 axis components.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data, mapping engine displacement to the x-axis, horsepower to the y-axis, and model year to color. The visualization is created programmatically via the `vl` API, with data loaded asynchronously from a remote CSV file using d3's `csv` function. The chart resizes to fit the browser window and includes a custom tooltip handler from Vega-Tooltip, while the `config` module customizes axis and label styling for improved readability.

Loading thumbnail…

upload tester

This example shows a file upload interface built with React. It displays file details such as name, type, size, and last modified date after a user selects a file. The component uses the `useState` hook to manage selected file state and a form data submission. It sends the file to the freeimage.host API via a `fetch` POST request using a placeholder API key. The rendered output conditionally shows file metadata or a prompt to select a file, and includes a submit button.

Loading thumbnail…

Barchart Stylized

A stylized horizontal bar chart displays the populations of ten countries from a UN 2019 CSV dataset. The React app loads data with `d3.csv` and renders SVG bars using D3's `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The Poppins font and teal fill give the visualization a clean, modern look, with axis labels and tooltips formatted via `d3.format`.

Loading thumbnail…

Barchart Refactored

This example shows a horizontal bar chart of the top 10 countries by population in 2020, using data loaded from a CSV file via `d3.csv`. Bars are rendered as SVG `<rect>` elements, with axes built from the reusable React components `AxisBottom` and `AxisLeft`, which use `d3.scaleBand` and `d3.scaleLinear` to map positions. The chart is structured with React hooks (`useState`, `useEffect`) to fetch and transform the data, and the whole visualization is embedded in a single SVG canvas within a React app.

Loading thumbnail…

Refactored Barchart Test

This example shows a horizontal bar chart comparing mobile app downloads across devices, using a filtered dataset of two rows extracted from a CSV file. The visualization renders SVG rectangles scaled by download counts, with axis labels generated through React components. The code builds the chart using D3 v7’s `scaleBand` and `scaleLinear` for positioning, while React manages component state via hooks like `useState` and `useEffect` to load and slice the data asynchronously.

Loading thumbnail…

Barchart Test

This example shows a horizontal bar chart comparing the number of downloads for two mobile device categories. The bars are rendered as SVG rectangles using React, with scales created by `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. It uses `d3.csv` to load data from a GitHub gist, filtering the dataset to two rows. The chart includes grid lines and tick labels generated from `xScale.ticks()`, while y-axis labels are positioned manually from the scale’s domain.

Loading thumbnail…

Axes with React & D3

A horizontal bar chart displays population data for ten countries in 2020, loaded via D3's `d3.csv` from a GitHub gist. React renders the SVG, while D3's `scaleBand` and `scaleLinear` position bars and axes. The code builds custom tick marks and labels using `xScale.ticks()` and manual SVG text elements, avoiding D3's axis components. React hooks manage the asynchronous data loading, and the chart updates when the fetched dataset becomes available.

Loading thumbnail…

Margin Convention

This example demonstrates the margin convention for chart layout in D3, rendering a horizontal bar chart of the top ten countries by 2020 population from a UN dataset. The chart uses React hooks to load CSV data via `d3.csv` and calculates inner dimensions by subtracting a fixed margin from the SVG’s width and height. Bars are drawn as SVG `<rect>` elements positioned with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, all translated inside a `<g>` group using the margin offsets. The code imports `arc`, `pie`, and `max` from D3, though the example only uses the latter for scaling.

Loading thumbnail…

Fork of Rendering Data with React

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered as SVG rectangles. The chart loads UN population data from a CSV file using d3.csv, then maps each country’s population to bar widths with d3.scaleLinear and uses d3.scaleBand for vertical positioning. React state and the useEffect hook manage the asynchronous data loading, while ReactDOM.render mounts the visualization into the DOM. The code relies on React 18, d3 v7, and SVG elements created directly within JSX.

Loading thumbnail…

Rendering Data with React

This example renders a donut-shaped pie chart from a CSV of CSS named colors, using React to structure the component and D3’s `pie` and `arc` generators to compute the slices. Each slice is drawn as an SVG `<path>` filled with the corresponding hex value from the dataset. The chart is centered with a D3 arc outer radius matching the SVG width, and a loading message appears until the data is fetched asynchronously.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes the CSS named colors dataset as a radial burst, with each color occupying an equal-sized slice of a pie chart. The visualization uses React for component rendering and state management, while D3 v5 utilities like `csv`, `arc`, and `pie` handle data loading and geometric calculations. The `arc` generator with an outer radius equal to the full width creates the pie-shaped paths, which are rendered as SVG elements with fill colors directly from the hex values in the dataset.

Loading thumbnail…

Fork of Vega-Lite API Template Origin

This visualization displays a bar chart of population by country, with colors encoding religion and tooltips revealing population values on hover. It uses the Vega-Lite API to construct the chart, with getData.js loading CSV data from a gist containing religion-by-country statistics. The code leverages vega-lite-api's `markBar`, `x()`, `y()`, `color()`, and `tooltip()` methods, registered with vega and vega-lite, and renders via the SVG view with a vega-tooltip handler. The config customizes axis ticks and font styles for readability.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and display CSV data in a React component using D3's `csv` method. The app fetches a remote CSV file representing MobileDownloads data, then uses React's `useState` and `useEffect` hooks to manage the asynchronous data loading. While the data is being fetched, it shows a "Loading..." message; once loaded, it displays summary statistics including file size in kilobytes, row count, and column count, formatted with `d3.csvFormat`. The visualization uses React 18, D3 v7, and a production UMD build of React.

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates loading and parsing a CSV file from a remote URL, displaying the file size in kilobytes, the number of data rows, and the number of columns in a large text preformatted element. It uses D3 v7's `d3.csv` method to fetch and parse the data asynchronously, then calculates the formatted output length using `d3.csvFormat`. The data source is a GitHub gist containing mobile download statistics. The example also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse` for comparison.

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor across an SVG canvas, its position updating in real time with every pointer movement. The example combines React 16.9's `useState` and `useCallback` hooks to manage the circle's `cx` and `cy` attributes, while D3 v5 supplies the `arc` import. Rendering is handled through ReactDOM's `render` method, which places an interactive `<svg>` with an `onMouseMove` listener into the page root.

Loading thumbnail…

Mouse Follower

A yellow face with two eyes and an open mouth is rendered inside an SVG. The face is built from reusable React components split across multiple ES6 modules, including separate files for the background circle, eyes, and mouth. The mouth shape is generated with the `d3.arc` API, while React's `<React.Fragment>` is used to group the eyes. All coordinates are hardcoded relative to the center of the 960×500 SVG canvas. The example demonstrates how to organize React components into modular files and use D3 utilities within a React rendering pipeline.

Loading thumbnail…

Mouse Follower

A smiling face rendered as an SVG using React and D3 follows the mouse cursor across the screen. The face is constructed with D3’s `arc()` generator for the mouth, alongside static circle elements for the eyes and face outline. The component uses React’s declarative JSX to define the SVG structure, while D3 v5 calculates the path geometry. Mouse movement triggers a transform on the root group, shifting the entire face to track the cursor’s position. The example demonstrates hybrid React-D3 integration for interactive visualization.

Loading thumbnail…

tryer1

This interactive visualization renders a grid of eighteen randomly generated smiley faces using React and D3.js. Each face is composed of SVG circles for the background and eyes, plus a D3 arc path for the mouth. The faces vary in eye position, eye radius, and mouth dimensions, created through JavaScript’s Math.random() within the React mapping function. The code imports specific D3 components like `arc` and `range` to generate the shapes and iterate over the array, respectively.

Loading thumbnail…

Fork of Smiley Face Part IV

A yellow smiley face rendered in SVG, with black-outlined circular eyes and a thick arc-shaped mouth, sits centered on a 960-by-500 canvas. Built as a React component, the example combines React 16.9 and D3 v5’s `arc` generator to compute the mouth path, while the background circle, eyes, and stroke width are defined as JSX primitives. The face’s geometry is positioned using a translation group, with all dimensions hard-coded in the script.