M

Marco Malvicini

@MarcoMalvic·22 public vizzes

Loading thumbnail…

loading data in react

This example shows how to load external CSV data in a React application using D3 utilities. The component displays a loading message until the data arrives, then shows a summary of the dataset—its size in kilobytes, row count, and column count—in large monospace text. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous data-fetching lifecycle, calling `d3.csv` on the specified GitHub Gist URL and storing the parsed result in state. Only the data’s metadata is rendered, not the actual CSV contents.

Loading thumbnail…

Points on a Map

A map of the world displays cities with populations over 50,000 as small translucent dots. The visualization uses a React component with D3’s `geoNaturalEarth1` projection and `geoPath` to render country boundaries, graticules, and the sphere outline. City coordinates are projected from latitude and longitude, with data loaded via `d3.csv` from the Simplemaps World Cities Database, while land and interior borders come from TopoJSON in the World Atlas TopoJSON dataset.

Loading thumbnail…

Points on a map

This example displays a world map using a Natural Earth projection, with landmasses rendered in teal and the graticule and country borders drawn as cyan lines over a light gray sphere. The visualization loads GeoJSON data from the world-atlas TopoJSON file using `json()` and converts it with `feature` and `mesh` from topojson. React state stores the loaded data, while `geoNaturalEarth1` and `geoPath` from d3 generate the SVG paths for each geographic feature.

Loading thumbnail…

interactive color legend

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between flower measurements through dropdown menus that select the X and Y axes. The visualization uses D3.js v5 scales and React state to manage selections, while the color legend for species is interactive—hovering over a species name highlights only those data points and fades the others. All marks render as SVG circles, with the legend built from ordinal color scales and hover event handlers that filter the displayed data.

Loading thumbnail…

Scatterplot with color legend

This interactive scatterplot displays the Iris flower dataset, plotting sepal and petal measurements with points colored by species via a d3.scaleOrdinal color legend. Users select which attributes appear on the X and Y axes using React dropdown menus. The visualization uses React state to manage selections, d3.csv for data loading, and d3.scaleLinear with extent for axis scaling, rendered as SVG circles with tooltips.

Loading thumbnail…

Scatterplot with color

This interactive scatterplot displays the Iris flower dataset, allowing users to compare any two measured attributes (sepal and petal length/width) by selecting them from dropdown menus. Each flower is rendered as a colored circle, with species distinguished through a d3.scaleOrdinal color mapping. The visualization uses React state to manage selections and render SVG marks, while d3.csv loads the data and d3.scaleLinear scales map attribute values to x and y positions. Axes are generated manually from d3 scale ticks, and hover tooltips show formatted values via SVG `<title>` elements.

Loading thumbnail…

Polished Scatterplot with menus

This interactive scatterplot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus dynamically select which numerical attributes are plotted on the X and Y axes. The visualization is built with React and renders using SVG, leveraging d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. The code also utilizes React state and a custom `useData` hook to manage asynchronous data fetching and updating the chart components.

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays Iris flower measurements, allowing users to select which attribute appears on the X and Y axes via dropdown menus. Built with React hooks (useState, useEffect) and D3 v5 scaleLinear and extent utilities, it renders SVG circles with axis components and tooltips, loading data from a CSV URL through D3’s csv function. The visualization updates scales and labels dynamically based on menu selections, with formatted axis ticks using d3.format.

Loading thumbnail…

dropdown menu 1

This example shows a React-based dropdown menu for selecting a pet from a list of six options, with the chosen value displayed via a console log. It demonstrates controlled component state using React’s `useState` hook, passing the selected value and an update function to a reusable `Dropdown` component. The component renders a native HTML `<select>` element, mapping over an array of option objects with `value` and `label` properties, and marks the current selection with the `selected` attribute. The app is mounted with `ReactDOM.render` into a root div, styled with large fonts in the HTML.

Loading thumbnail…

Line chart Temp vs Time

This line chart displays temperature over time, using a smooth curved line to show how temperature fluctuates across the week. The data is loaded from a CSV file using `d3.csv` and stored in React state via the `useData` hook. The chart is rendered as an SVG, with `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` with `curveNatural` to create the path. Axes are built from custom React components that generate tick marks and labels.

Loading thumbnail…

Scatter Plot with Time

This scatter plot visualizes temperature readings over time, with each circle representing a measurement plotted along a time-based x-axis and a linear temperature y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data from a CSV file into SVG circles. The chart includes labeled axes with formatted weekday tick marks on the x-axis, and hovering over a circle reveals the exact time through SVG `<title>` tooltips.

Loading thumbnail…

Scatterplot iris dataset

This scatterplot visualizes the Iris dataset, plotting sepal length against sepal width for 150 flower samples. The React component uses the `useData` hook with `d3.csv` to load and parse the data, then renders SVG circles via the `Marks` component with `d3.scaleLinear` for both axes. Axes are generated with `d3.ticks` through reusable `AxisBottom` and `AxisLeft` components, and hover tooltips display formatted values using `d3.format`.

Loading thumbnail…

Stylized barchart

This stylized barchart displays the populations of the ten most populous countries in 2020, using a horizontal bar layout with a clean, modern aesthetic. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning and the `csv` utility to load data from a GitHub gist. SVG `<rect>` elements render the bars, with native `<title>` tooltips showing formatted population values and custom axes labeling countries and population counts (with billions abbreviated as “B”).

Loading thumbnail…

Refactored barchart

The chart displays the populations of the ten most populous countries as horizontal bars, sorted by country name along the vertical axis. It loads the UN Population 2020 dataset via the d3.csv utility and uses React state to store the loaded data. The visualization is built with React and rendered as SVG, using d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and reusable React components for the axes and marks.

Loading thumbnail…

Axes with D3 React

This example demonstrates a horizontal bar chart of United Nations population data for 2020, using D3.js scales and React state management. It loads a CSV dataset with `d3.csv`, stores the parsed data in React's `useState` hook, and renders SVG bars with `d3.scaleBand` and `d3.scaleLinear`. Custom axes are drawn manually by mapping ticks from the scales, showing D3's utility functions integrated with React's component lifecycle. The chart displays the top ten countries by population, with axes labeled using SVG text elements.

Loading thumbnail…

D3 React bar chart

This example displays a horizontal bar chart of the top ten countries by 2020 population, using data loaded from a CSV file via `d3.csv`. A React component manages the loaded data with `useState` and `useEffect`, while D3’s `scaleBand` and `scaleLinear` map countries and population values to SVG coordinates. The chart renders SVG rectangles and grid lines, with axes omitted, and includes a loading message before data arrives.

Loading thumbnail…

Visualizing data with React & D3

A donut chart displays the proportional distribution of CSS named colors, with each color category represented as a slice of the pie. The visualization loads tabular data from a CSV file using the `d3.csv` utility, stores it in React state via `useState` and `useEffect`, and renders each slice as an SVG path. The chart uses the `d3.pie` layout and `d3.arc` generator to compute the arc geometry, while React maps over the data to create the path elements with the color's hex value as the fill.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and miles per gallon from the auto-mpg dataset. It renders a scatter plot using Vega-Lite’s API, with circle size mapped to mpg, color to weight, and tooltips showing car names. The code builds the chart via `vl.markCircle` and `vl.encode`, then renders it with `vega`, `vega-lite`, and `vega-tooltip`, using `d3.csv` to load the data and custom config to adjust axis styling.

Loading thumbnail…

course_part2

This example demonstrates how to load and summarize a CSV file of CSS named colors using D3.js v6. It displays the approximate file size, number of rows, and number of columns in the dataset. The visualization uses the `d3.csv` method to fetch and parse the remote CSV data, then formats the statistics with `d3.csvFormat` and `Math.round`. Results are shown as plain text inside a `<pre>` element, with the code also including an alternative commented-out approach using `fetch` and `d3.csvParse`.

Loading thumbnail…

parsing csv data with d3

This example demonstrates a minimal HTML page that logs a JavaScript message to the browser console, serving as a basic introduction to combining CSS and JavaScript in a web page. The page uses no external libraries or data sources; instead, it relies on plain HTML, inline CSS for centered text styling, and a simple `console.log` call to output “Hello JavaScript!”. The code is a bare-bones starting point for learning how to structure a webpage and execute client-side scripts, with no interactive or visual data outputs beyond the static “Hello HTML” text displayed on screen.

Loading thumbnail…

interaction with react

A circle follows the mouse pointer inside an SVG canvas, with its center position updating in real time. The example demonstrates how to combine React's state management with event handling for interactive visualizations. The code uses React's `useState` hook and `useCallback` to track mouse coordinates, while D3.v5 provides the SVG rendering environment. The circle's `cx` and `cy` attributes update dynamically based on the mouse movement events captured by the SVG's `onMouseMove` handler.

Loading thumbnail…

Fork of Hello HTML

A grid of 18 cartoon faces, each with a yellow circular head, black outline, two eyes, and a curved mouth, is rendered with randomized facial features. The visualization uses React components to compose each face from separate circle and path elements, while D3’s `arc` generator creates the mouth shape and `range` produces the grid data. Parameters like eye radius, offset, and mouth width vary per face via `Math.random()`.