Oscar

Scatter Plot with Menus (React D3)

Menus with React

This example shows a React-based dropdown menu for selecting a pet, with the current choice logged to the console. It demonstrates how React state and props manage a controlled `<select>` element through a reusable `Dropdown` component, which maps over an options array. The code uses React’s `useState` and `ReactDOM.render`, with no direct d3 APIs; instead, D3.js is loaded via CDN but remains unused except as a dependency. The styling uses large fonts for the label and select, with smaller font for options.

React Starter

This example displays the simple text “Hello React!” on a blank canvas. It starts a React application within a minimal HTML page, using React and ReactDOM (specifically `ReactDOM.render`) to mount a functional component into a root `div` element. The visualization relies on the unmodified React 16.9.0 and its DOM library, alongside D3 version 5.11.0, though no D3 functions are invoked in the provided code. The approach demonstrates the foundational integration of React as a rendering layer for a web-based visualization environment.

World Map with React & D3

This example renders a world map using React and D3.js, displaying landmasses and country interiors in teal on a light gray sphere with a graticule overlay. It loads TopoJSON data from the world-atlas package, then employs `d3.geoNaturalEarth1` projection, `d3.geoPath`, and `d3.geoGraticule` to generate SVG paths within a React component. The `topojson` library's `feature` and `mesh` functions extract land and interior boundaries from the topology data.

Working with Time (Line Chart)

A line chart displays temperature measurements over time, using a smooth curve to connect data points from a CSV file of San Francisco weekly temperatures. The visualization renders as an SVG, with React managing the component structure and D3 v5 handling scales and axes—specifically `scaleTime` for the x-axis and `scaleLinear` for temperature. The `line` generator with `curveNatural` draws the path, while custom axis components generate ticks and labels, and hover tooltips reveal exact time values for each point.

Making a Scatter Plot

This example demonstrates how to build a scatter plot from the classic Iris dataset, encoding petal length on the x-axis and sepal width on the y-axis. It uses React to define custom SVG components, with D3 v5 functions like `scaleLinear`, `extent`, and `format` to compute scales and axis ticks, while the data is loaded asynchronously from a CSV file via D3's `csv` function. The visualization includes labeled axes, formatted tick marks, and circular marks with tooltips, all rendered as SVG elements within a React component.

Making a Bar Chart with React

This example shows a horizontal bar chart of the top 10 countries by population in 2020, with rectangular marks colored teal and a formatted axis labeling values in billions. Built with React and D3 v5, it uses scaleBand for the y-axis, scaleLinear for the x-axis, and separates chart elements into reusable components like AxisBottom, AxisLeft, and Marks. Population data is loaded from a CSV file using d3.csv, and the SVG is rendered entirely through React.

Fork of Smiley Face Part III

This example renders the full CSS named-color palette as a circular pie chart using React and D3. The visualization displays each color name from a CSV dataset as a slice with its corresponding RGB hex fill, producing a rainbow-like wheel. The code combines React hooks for state management with D3’s `pie` and `arc` generators to compute slice angles and SVG paths. All shapes are drawn as SVG elements within a single group transformed to the chart’s center.

Fork of Loading and Parsing CSV Data

This example demonstrates loading a CSV file of CSS named colors and displaying summary statistics about the dataset. The visualization presents the file size in kilobytes, the total number of rows, and the number of columns in a large text format. The code uses D3 version 5’s `d3.csv` method to fetch and parse the remote CSV data from a GitHub gist, then applies `d3.csvFormat` to compute the textual representation size. The results are rendered into an HTML `<pre>` element via JavaScript DOM manipulation.

Fork of Hello HTML

A grid of six-by-three randomized faces demonstrates how React components and D3’s `arc` generator can compose static SVG. Each face uses `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, with `FaceContainer` positioning the group via a `translate` transform. Randomized dimensions—mouth radius and width, eye radius and offset, stroke width—are passed as props from `d3.range`. The rendering is purely declarative, with no data binding or interactions.