MosheAron

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width as teal circles with a clean, minimal aesthetic. Built with React and D3 v5, it uses `scaleLinear` and `extent` to map data values to SVG coordinates, while separate axis components render grid lines and tick labels. The code defines reusable `AxisBottom`, `AxisLeft`, and `Marks` components, with the latter generating circles and native SVG tooltip titles. The data is loaded asynchronously via a custom `useData` hook that parses CSV values into numbers.

Stylized Bar Chart

A stylized bar chart displays the top ten countries by population for 2020, sourced from a UN population CSV file. The visualization highlights each country with a horizontal bar, using color to draw attention to the data points. Built with React and D3, it uses `d3.scaleBand` and `d3.scaleLinear` for positioning, and renders as SVG. Axis components are custom React functions, with tooltips provided by SVG `<title>` elements.

Refactored Bar Chart

This example shows a horizontal bar chart of the top ten countries by population in 2020, using UN Population data. The visualization is built with React and D3 v6, where D3 utilities like `scaleBand` and `scaleLinear` compute the chart scales. The code refactors the visualization into modular components, with separate files for the axes (`AxisBottom`, `AxisLeft`) and the bars (`Marks`), demonstrating a clean separation of concerns. The chart is rendered as SVG, and the data is loaded asynchronously using the `csv` function from D3.

Axes with React & D3

This example shows a horizontal bar chart of the top ten countries by 2020 population using CSS-named color data loaded via D3’s `csv` utility. The visualization renders with React state management, where `scaleBand` and `scaleLinear` map country names and population values to SVG coordinates. Gridlines and tick labels are generated from `xScale.ticks()`, with each bar’s width proportional to its population. The chart uses SVG rendering inside React components, demonstrating how D3 scales and axes integrate declaratively with React’s rendering model.

The Margin Convention

This example shows a horizontal bar chart of the top ten countries by 2020 population, with the bars drawn inside a translated SVG group to demonstrate the margin convention. The chart uses React state to manage the loaded data and conditional rendering to display a loading message. D3 utilities load the CSV data from a GitHub gist, while `scaleBand` and `scaleLinear` position the bars and map population values to widths. The outer SVG measures 960 by 500 pixels, with a 50-pixel margin on each side that defines the inner chart area.

Pathetic Bar Chart

This example displays the ten most populous countries for 2020 as horizontal bars, using a linear scale to encode population size and a band scale for country names. Built with React and D3 v6, it loads CSV data from a GitHub gist and renders SVG rectangles directly. The chart uses React state and hooks to fetch and store the data, then maps over it to draw each bar.

Rendering Data with React & D3 as a radial burst

A radial burst of 148 CSS named colors, one wedge per color, radiates from the center of an SVG canvas. The example demonstrates integrating React state management with D3 utilities: D3’s `csv` loads the color data, while `pie` and `arc` compute the angular layout and wedge geometry. React’s `useState` and `useEffect` hooks handle asynchronous data loading, and each wedge is rendered as an SVG `path` filled with its corresponding color’s RGB hex value.

Rendering Data with React & D3

A choropleth-style visualization renders all 148 CSS named colors as stacked horizontal bars, sorted by their hexadecimal values. The example demonstrates integrating React state management with D3 utilities, loading the dataset from a GitHub gist via `d3.csv`. The application uses React hooks (`useState`, `useEffect`) to fetch and store the CSV, then maps each color record to a styled `div` element with a `backgroundColor` derived from the `RGB hex value` field. The chart displays a full spectrum of color swatches, with `ReactDOM.render` mounting the component to the DOM.

Loading Data with React & D3

This example demonstrates how to load external data in a React application using D3 utilities, displaying dataset statistics as text. It fetches a CSV file of CSS named colors with `d3.csv`, then stores the result in React state via the `useState` and `useEffect` hooks. The app shows a summary message computed by `d3.csvFormat`, reporting the file size in kilobytes, row count, and column count. The visualization is minimal, rendering only the statistical text in a large `<pre>` element, with a loading indicator until the data arrives.

Vega-Lite API Template

A bubble chart displays the population of each religion across countries, with circle size encoding population and color distinguishing religions. Built with the Vega-Lite API, the visualization uses `vl.markCircle` and encodings for `x` (country), `y` (religion), `size`, and `tooltip`. Data is loaded via D3’s `csv` from a GitHub gist, and the chart renders through Vega and Vega-Lite with a custom config for styling.

Mar 3, 2021

Loading and Parsing CSV data

This example demonstrates loading and parsing a CSV file containing CSS named colors using D3.js version 6. The visualization displays three key statistics about the dataset: the file size in kilobytes, the number of data rows, and the number of columns. The code uses the `d3.csv` method to fetch and parse the remote CSV file, then extracts the dataset’s dimensions through the `data.length` and `data.columns.length` properties. The resulting summary appears as large text in a preformatted HTML element, with the D3 library loaded via unpkg.

Mar 2, 2021

Mouse Follower

A yellow circle with a black outline follows the mouse cursor across a blank SVG canvas, responding in real time to pointer movement. The visualization is built with React, using the `useState` hook to store the cursor's coordinates and an `onMouseMove` event handler to update them. D3.js is loaded for its utility functions, and the circle is rendered as an SVG element with ReactDOM, providing a simple demonstration of interactive state-driven rendering.

Mar 2, 2021