Fork of React Starter

100%

Fork of React Starter

✓ Published0🌍 Public

Last edited May 5, 2022

Created on May 5, 2022

This example plots airport locations as red circles on a map, with each point colored by state and showing a tooltip on hover. The visualization loads airport data from a CSV file hosted on jsDelivr, then renders it using a Vega-Lite API specification defined in `viz.js`, which is registered with the Vega and Vega-Lite libraries in `index.js`. The React starter app fetches the data asynchronously via D3’s `d3.csv` method, then passes it to the Vega-Lite chart, which sizes the plot to fill the browser window.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React Starter

This example is a React starter that sets up an empty SVG canvas sized to the browser window. On mount, the app uses D3’s `csv` function to load a local `data.csv` file, which contains monthly temperature readings from 1901 onward, but it only logs the parsed data to the console and does not render any visualization. The code combines React with D3 v5 and renders the SVG element declaratively, but it lacks any plotting, axes, or other visible output.

VVikil Lakkavatri

78% match

Loading thumbnail…

Fork of React & D3 Starter

A simple scatter plot displays ten labeled points from a small CSV dataset, mapping x and y coordinates with linear scales. The visualization demonstrates a modular React and D3 integration where React manages the SVG container and D3 handles the rendering logic. The `viz.js` module uses `d3.scaleLinear` and `d3.extent` to compute scales, while `axes.js` employs `d3.axisLeft` and `d3.axisBottom` for chart axes. Data flows through a custom `useData` hook that loads and parses the CSV with `d3.csv`. The code separates concerns across files, making it a practical starting template for scalable projects.

Tteissierducros

78% match

Loading thumbnail…

Fork of React & D3 Starter

This React and D3 starter visualizes the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis with semi-transparent circles. The code demonstrates a decoupled integration pattern, where React manages the component lifecycle in `App.js` and `VizWrapper.js`, while D3 handles rendering through `d3.select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` in `viz.js` and `axes.js`. Data is loaded asynchronously via `d3.csv` in `useData.js`, and the SVG output fills the viewport. This example serves as a scalable template for projects expecting growing complexity.

Jjaelar0

77% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This visualization gallery example presents a blank React application built with D3, using CDN links for React, ReactDOM, and D3. The code defines a `VizContainer` component that abstracts SVG and group elements, following the standard margin convention. It renders a 960 by 500 pixel SVG canvas with inner and outer rectangles that visualize the plotting area boundaries. The boilerplate sets up variables for dimensions and margins, with the `showMargins` prop toggleable to display or hide these reference rectangles. No actual data or chart is rendered, only the container structure.

MMateusz Urban

77% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a minimal React and D3.js starter project for SVG visualizations. It shows a simple SVG canvas with a light gray background, a darker gray border, and a single red circle in the top-left corner. The code defines a reusable `VizContainer` component that handles the standard margin convention, translating the inner coordinate system and optionally displaying the margin boundaries. It uses CDN-loaded React, ReactDOM, and D3, with dimensions and margins set as variables, and renders the visualization through the `ReactDOM.render` API.

Jjon65

77% match

Loading thumbnail…

Fork of React & D3 Starter

This fork of the React & D3 Starter visualizes the classic Iris dataset as a scatter plot. The code demonstrates a decoupled React and D3 integration pattern where a `VizWrapper` React component manages the SVG container and calls a separate `viz` function to handle D3 rendering. Using D3 v7 APIs like `scaleLinear`, `extent`, `csv`, `axisLeft`, and `axisBottom`, the example plots sepal length against petal length. The JavaScript and React libraries are loaded via UMD from unpkg, and the data is fetched from a local CSV file.

Cchiara01050105@gmail.com

77% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This example presents a React starter template for integrating D3 visualizations within a margin-convention layout. The `VizContainer` component abstracts the SVG and group elements, optionally rendering gray background rectangles to highlight the margins. The visible visualization is a simple bar chart generated by the `barChart` function, which uses `d3.create` and `d3.selectAll` to render div elements with steelblue backgrounds sized proportionally to each data value. The app mounts via `ReactDOM.render`, and the code relies on CDN-loaded React 16 and D3 v6.

WWittawat Sadindum

77% match

Loading thumbnail…

Fork of React Starter

This example demonstrates a basic React application that renders a static message ("Hello vega") alongside a Vega bar chart embedded from a remote specification. The code initializes a React root using `createRoot` and renders a simple functional component with JSX, while separately using `vegaEmbed` to inject the Vega visualization into a dedicated div. It imports React 18, ReactDOM, Vega, Vega-Lite, and vega-embed from CDNs, with the chart specification sourced from a raw GitHub URL. The example shows a minimal integration of React for UI text and Vega for data visualization on the same page.

DDeclan Naughton

76% match