L

laplantalaplanta

@laplantalaplanta·28 public vizzes

Loading thumbnail…

Scatterplot with color

This scatterplot visualizes the Iris dataset, displaying petal length against sepal width for different iris species. Each circle represents a flower, with color encoding its species via a categorical ordinal scale. The visualization is built using React and D3 v5, leveraging the `scaleLinear`, `scaleOrdinal`, and `extent` APIs to map data to SVG coordinates and colors. Axes are rendered as custom React components, with tick marks and labels styled through CSS. Data originates from the classic Iris dataset, loaded asynchronously via D3’s CSV parser, and tooltips show values on hover.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus let viewers select which attributes appear on the X and Y axes, dynamically updating the visualization. Built with React and D3 v5, the SVG chart uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Custom React components render the axes, marks, and dropdowns, with tooltips displaying formatted values on hover.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against each other. Two dropdown menus allow users to select which measurement attributes appear on the x- and y-axes, with axis labels updating accordingly. The visualization uses React for component state and rendering, with d3-scale (scaleLinear) for positioning and d3.extent to compute domains. SVG circles represent data points with hover tooltips, while custom React components (AxisBottom, AxisLeft, and Dropdown) handle axes and menu interactions. Data loads asynchronously via d3.csv from a GitHub-hosted CSV file.

Loading thumbnail…

Menus with react

This example demonstrates a dropdown menu for selecting a pet, with a large, centered label and select element. The app uses React’s `useState` hook to track the selected value and passes it to a custom `Dropdown` component, which renders a native `<select>` element with options from a static array. Changes trigger the `onSelectedValueChange` callback, updating the displayed selection. The code relies on React 16.9 and ReactDOM, with no external data source beyond the hardcoded option list.

Loading thumbnail…

Southwark

A world map rendered with a natural Earth projection displays landmasses in teal, with graticules and country borders overlaid in light gray. The visualization uses React to manage the component lifecycle and fetch data, while D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle projection and path generation from TopoJSON world-atlas data. The map’s shape and boundaries are drawn as SVG paths, with borders derived via `mesh` to show international boundaries.

Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello React!” into the browser. It uses React 16.9.0 and ReactDOM to mount a functional `App` component into a root HTML element. The page loads these libraries from unpkg and the compiled `bundle.js` file, with a global CSS style that removes body margins and hides overflow. The code does not include any data visualization or interaction—only static text output.

Loading thumbnail…

World map

This example presents a world map with countries and landmasses rendered in a stylized SVG projection. The visualization uses a geoNaturalEarth1 projection and d3.geoPath to draw sphere, graticules, land, and interior boundaries, with data sourced from world-atlas. The React app fetches topology via d3.json, then processes it with topojson's feature and mesh functions. A Poppins font and teal color scheme distinguish land and interiors.

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature over time. The smooth curve, rendered using d3.line with curveNatural, uses a teal stroke and simple axis ticks without circles. Built with React and d3.scaleTime/scaleLinear, the SVG visualization maps timestamps to x-coordinates and temperatures to y-coordinates, while React hooks manage asynchronous data loading via d3.csv.

Loading thumbnail…

Working with time

This visualization displays a week of temperature readings in San Francisco using a scatter plot. It shows the relationship between time on the x-axis and temperature on the y-axis, with a tooltip on each point that reveals the day of the week. Built with React and D3 v5, the code uses `scaleTime` and `scaleLinear` to map data, `AxisBottom` and `AxisLeft` for axes, and SVG circles for marks. Data comes from a CSV file loaded via D3's `csv` function.

Loading thumbnail…

Stylised scatterplot iris

This stylised scatterplot visualizes the classic Iris dataset, plotting petal length against sepal width for individual flowers. Built with React and D3 v5, it renders circles as SVG elements with a distinctive gold fill, incorporating a custom tooltip that displays values on hover. The visualization uses d3.scaleLinear with `.nice()` for axis scaling, d3.extent for domain calculation, and d3.format with SI notation for axis tick labels. Data loads asynchronously via d3.csv from a GitHub Gist, with each numeric field coerced to a number.

Loading thumbnail…

Stylized barchart

This stylized bar chart displays the ten most populous countries, sorted by population, using data from the United Nations World Population Prospects 2019. Orange bars extend horizontally from the left, with a bottom axis showing population in billions and left axis labels for country names. Built with React and D3 v5, the SVG visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with custom components for axes and marks. Population values are formatted using D3’s `format` function to abbreviate large numbers, like replacing “G” with “B.”

Loading thumbnail…

Refactored barchart

This bar chart displays the ten most populous countries in 2020 using data from the United Nations World Population Prospects 2019. The visualization uses React components that wrap D3 scales, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes are rendered as custom SVG elements, with tick labels generated via `axisBottom` and `axisLeft` style logic, while rectangles are drawn as marks in the SVG. Data is loaded asynchronously with `d3.csv`.

Loading thumbnail…

Axes with React & D3

This example uses D3 and React to render a horizontal bar chart of the ten most populous countries from the United Nations World Population Prospects 2019 dataset. It displays population values for 2020 with x-axis tick marks generated via `xScale.ticks()` and country labels positioned using a band scale. The chart includes only these axes and bars—no gridlines or margins beyond the SVG viewport. The code loads data with `d3.csv` and uses `scaleBand` and `scaleLinear` for layout.

Loading thumbnail…

The Margin Convention (barchart)

This bar chart displays the top ten countries by 2020 population, using horizontal bars that scale linearly from zero. Built with React and D3, the SVG renders through a `d3.scaleBand` for the y-axis categories and a `d3.scaleLinear` for the x-axis values, with margins applied via a translation group. Data is loaded asynchronously from a CSV URL using `d3.csv`, and the chart updates after filtering to the first ten rows. The visualization demonstrates the standard margin convention by positioning all bars within a padded inner plotting area.

Loading thumbnail…

D3 bar chart no axis

This example uses React and D3 v7 to render a horizontal bar chart of the top 10 countries by 2020 UN population data, loaded via `d3.csv`. The visualization omits axes and scales, showing only colored rectangles whose widths correspond to population values through `d3.scaleLinear` and vertical positioning via `d3.scaleBand`. React state manages the asynchronous data loading, and the SVG output is generated directly from React components without D3’s selection-based rendering.

Loading thumbnail…

Rendering data with React & D3

A radial burst visualizes CSS named colors as equal-width pie slices, each filled with its corresponding RGB hex value. The example loads color data from a CSV file using `d3.csv` and transforms it with the `d3.pie` layout. React manages the component state and renders SVG paths via `d3.arc`, while the code also includes commented-out manual angle calculations for alternative slice generation.

Loading thumbnail…

Rendering data with React

This example displays the CSS named colors from a CSV file as a vertical stack of horizontal color bars. It uses React with hooks (`useState`, `useEffect`, `useCallback`) to load data asynchronously via d3.csv and render each row as a styled div. The background color of each bar comes from the `RGB hex value` column, with fixed width and height. ReactDOM renders the App component into the document root, and d3 v7 handles the CSV parsing.

Loading thumbnail…

Vega-Lite API Template - bubble chart

A bubble chart displays the population of five religions across multiple countries, with circle size encoding population values and axes categorizing by country and religion. Built with the Vega-Lite API, it registers Vega and Vega-Lite, loads CSV data via d3.csv, and renders an SVG view with tooltips from vega-tooltip. Configuration customizes axis fonts and tick colors for readability, while the chart auto-fits to the browser window.

Loading thumbnail…

Vega-Lite API Template - stacked barchart

This example presents a stacked bar chart of population by religion across countries, using a dark-themed visualization to improve readability. The chart is built with the Vega-Lite API, which programmatically constructs the specification, while D3.js handles CSV data loading from a remote source. The visualization renders through Vega and Vega-Lite, with a tooltip handler for interactive population details. The chart resizes to fit the browser window, and the color encoding distinguishes religious affiliations.

Loading thumbnail…

Vega-Lite API Template - barchart

This example demonstrates a bar chart visualization of population by country for 2015, using a dataset loaded from a GitHub gist via d3.csv. The chart displays countries on the x-axis sorted in descending order of population, with population values mapped to the y-axis. It is constructed programmatically using the Vega-Lite API (vl) to define the bar mark and encodings, then rendered through Vega and Vega-Lite engines. The code also applies a custom configuration for axis styling and uses Vega-Tooltip for interactive hover details.

Loading thumbnail…

Vega-Lite API Template - linechart

This line chart visualizes daily temperature trends using the Vega-Lite API, which programmatically defines a line mark with encoded temporal x-values and quantitative y-values. Data is loaded asynchronously via D3’s `csv` parser from a San Francisco temperature dataset. The example demonstrates a minimal Vega-Lite specification, with tooltips enabled through vega-tooltip and custom axis styling in a separate config file. It integrates Vega, Vega-Lite, and the Vega-Lite API libraries, rendering to SVG and fitting the full browser window.

Loading thumbnail…

Vega-Lite API Template - experiment

This interactive scatter plot visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) using the classic auto-mpg dataset, loaded via `d3.csv` from a remote GitHub Gist. Encoded as circles with size and color mapped to quantitative fields, the chart reveals correlations among these performance metrics. Built with the Vega-Lite API for programmatic specification, it renders through Vega, Vega-Lite, and the `vega-tooltip` Handler, with automatic resizing to fit the window.

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with tooltips revealing each vehicle’s name. It uses the Vega-Lite API to declaratively define the marks and encodings, registering with Vega and Vega-Lite for rendering as SVG. Data is loaded asynchronously from a CSV file via d3.csv, while the chart’s size adapts to the browser window. Configuration customizes axis and label styling, and Vega-Tooltip provides interactive hover information.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset using React hooks and D3 utilities. The application fetches a list of CSS named colors from a GitHub gist, then displays a text summary showing the file size in kilobytes, row count, and column count. The code uses `useState`, `useEffect`, and `useCallback` for state management, along with D3’s `csv` loader and `csvFormat` to process the data. While the data loads, the interface shows a simple “loading...” message before rendering the final statistics.

Loading thumbnail…

loading and parsing csv data/d3/fetch

This example demonstrates how to load and parse a remote CSV file using D3 v7 and the Fetch API. It fetches a dataset of CSS named colors from a GitHub gist and uses `d3.csv` to parse the data, then displays summary statistics including the file size in kilobytes, the number of rows, and the number of columns in a large, monospaced preformatted text element. The code also includes a commented-out alternative using `fetch` with `async` and `await` and `d3.csvParse`, showing a manual two-step approach.

Loading thumbnail…

Mouse follower

A simple interactive visualization renders an SVG circle that follows the mouse cursor across a 960×500 viewport. The React component tracks the cursor’s `clientX` and `clientY` coordinates through an `onMouseMove` handler, storing them in state via `useState` and updating the circle’s `cx` and `cy` attributes. D3.js v5 and React 16.9 manage the rendering, with the circle starting at the center of the screen. The visualization demonstrates state-driven updates in a React-D3 hybrid, using SVG elements for direct DOM manipulation.

Loading thumbnail…

Basic html boilerplate

A bare-bones HTML page with an empty body, providing the minimal structure required for any web-based visualization. The page contains only the `<!DOCTYPE html>` declaration, an `<html>` element, a `<head>` with a title, and an empty `<body>` tag. It demonstrates the fundamental boilerplate needed to begin coding with web technologies. The example includes an embedded YouTube video link in its README, but the `index.html` file itself uses no JavaScript libraries or external APIs—it is purely static markup with no visualization logic.

Loading thumbnail…

React components, props, JSX transpilation, ES6, arrays

The visualization displays a grid of randomly generated smiley faces, each composed of modular React components for the background circle, eyes, and mouth. Built with React and ES6, the code uses JSX transpilation to pass props like radius, offsets, and dimensions into child components. D3 v5 provides the `arc` API for generating the mouth path and the `range` function to create an array for mapping faces. Each face is rendered as an SVG with randomized property values, showcasing reusable component composition and parameterized design.