Elliot Hill

Scatter plot and color legend

This interactive scatter plot of the Iris flower dataset allows users to select which numeric attributes to plot on the x- and y-axes via React dropdown menus. Points are colored by species using a d3.scaleOrdinal with a custom color legend built from SVG circles. The visualization uses React components for axes, marks, and legend, with D3’s scaleLinear and extent for scaling. Data is loaded asynchronously from a CSV file using d3.csv.

Jul 15, 2021

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species. A color legend identifies each species, and hovering over a legend item highlights the corresponding points while fading others. The visualization uses React with D3 v5 for scales and SVG rendering, employing `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for axes, marks, and the interactive legend.

Jul 13, 2021

Polished scatter plot with menus and color

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Two dropdown menus, built with `react-dropdown`, control which attribute is displayed on the x and y axes, while flower species are color-coded using `d3.scaleOrdinal` with a custom palette. The plot is rendered as SVG using React components (`AxisBottom`, `AxisLeft`, `Marks`) that leverage `d3.scaleLinear` for axis scaling and ticks. Hovering over a point reveals its x-value via a native SVG `<title>` tooltip.

Jul 13, 2021

Polished scatter plot with menus

A polished scatter plot displays iris flower measurements, plotting sepal and petal dimensions against each other as colored circles. Interactive dropdown menus allow users to select which attribute appears on the x-axis and y-axis. The visualization uses React for state management, d3.scaleLinear for axis scales, and d3.csv to load the Iris dataset. SVG rendering with custom axis components and a Poppins font provides a clean, modern aesthetic.

Menu with Scatter plot

This interactive scatter plot displays the Iris dataset, letting users choose which flower measurements to plot on the x- and y-axes via dropdown menus. The SVG renders circles for each data point, with axes generated using custom React components that call `xScale.ticks()` and `yScale.ticks()`. The chart uses D3’s `scaleLinear` and `extent` to compute domains and ranges, while the code fetches data with `d3.csv`. Axis labels update dynamically based on the selected measurement attributes from the dataset.

Fork of Menus with React

This example demonstrates a simple pet selector using interactive dropdown menus built with React. The interface presents a label and a `<select>` element containing six animal options, with the hamster pre-selected. The code defines a reusable `Dropdown` component that manages options and a selected value, while the main `App` function uses React's `useState` hook to track the current choice and logs it to the console. The example imports React and ReactDOM to render the interface, and the styling in `index.html` scales up the font size for better visibility.

Manus with react

This example shows a pet selector interface built with React and D3, where users choose an animal from a dropdown menu. The code uses React’s `useState` hook to manage the selected pet value and a custom `Dropdown` component that renders a native `<select>` element. The dropdown options are defined as an array of objects with value and label pairs, and the selected value is displayed via React’s controlled component pattern. The visualization integrates React’s declarative rendering with D3’s data-binding capabilities, though the current implementation focuses on the interactive form rather than graphical data display.

Scatter plot

This scatter plot visualizes the relationship between sepal length and sepal width for Iris flowers, with each circle representing a data point from the Iris dataset. Built with React and D3 v5, the chart uses D3's scaleLinear to map data to SVG coordinates, while React components render the axes and marks. AxisBottom and AxisLeft components generate tick marks and labels, while the Marks component creates circles with tooltips. The y-axis label is rotated vertically using an SVG transform.

Stylized bar chart

This example displays the top 10 most populous countries as horizontal bars, ranked by population from the United Nations World Population Prospects 2019 dataset. The chart uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning, d3.csv for data loading, and d3.format for abbreviating population ticks. A native SVG `<title>` element provides hover tooltips, while the Poppins font and teal bars create a stylized aesthetic.

Axes with react+d3

A bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with SVG bars and React components for the axes. The chart uses d3.scaleBand and d3.scaleLinear for positioning, while custom React components (AxisBottom, AxisLeft, Marks) render ticks, labels, and rectangles instead of d3.axis. The bottom axis maps tick values through xScale, and the left axis uses yScale.domain() with bandwidth offsets for categorical labels. Data loads asynchronously via d3.csv and is sorted by filtering the first ten rows.

Margins

A bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data. The bars are drawn with React and d3.scaleBand for vertical positioning and d3.scaleLinear for widths, rendered as SVG rectangles. Margins are applied to the chart via a translated <g> element. The chart omits axes, intentionally presenting a minimal visualization of population sizes.

Pathetic Bar Chart

This example shows a horizontal bar chart that displays the top ten countries by population for 2020, using a clean SVG rendering. The chart’s bars are plain rectangles, sized by population values scaled linearly along the x-axis, while country names are positioned on a band scale along the y-axis. The data is loaded asynchronously from a remote CSV file using d3.csv and processed with a row function that converts population strings to numbers. The visualization is built with React components, and the scales and data loading rely on d3.scaleBand, d3.scaleLinear, and d3.max from d3 v5.

Fork of Rendering data with react

This visualization displays CSS named colors as a pie chart. It loads a CSV file of color names and hex values using `d3.csv`, then applies `pie` from d3 to arrange the data and `arc` to render each slice as an SVG path. The React app uses `useState` and `useEffect` to fetch data asynchronously and `ReactDOM.render` to draw the chart.

Rendering data with react

This example demonstrates how React can render data loaded with D3, displaying CSS named colors as horizontal stripes. The visualization maps each row from a CSV file containing color names and RGB hex values into a colored div element, with each stripe’s background color set to the corresponding hex value. The App component uses React’s useState and useEffect hooks to asynchronously fetch the CSV via d3.csv, showing a loading message until the data arrives. The resulting 960-pixel-wide bars stack vertically, creating a simple color spectrum across the viewport.

Loading data with d3

This example demonstrates loading a remote CSV dataset of CSS named colors and displaying summary statistics about it. The React application uses D3’s `csv` function to asynchronously fetch the data from a GitHub gist URL, then formats a message with the file size in kilobytes, row count, and column count. The interface initially shows “loading” until the data arrives, then presents the computed metrics in a large monospace font.