GregS1290

Creating a Line Chart

This example shows a line chart of weekly temperature and time data from a CSV file hosted on GitHub. The chart uses a natural curve to connect temperature measurements across timestamps, with a time-scaled x-axis and linear y-axis. Built with React, D3 v5, and SVG, the code uses `scaleTime`, `scaleLinear`, `extent`, and `line().curve(curveNatural)` to render the visualization. Custom React components handle the axes and marks, while the `csv` function loads the dataset with temperature and timestamp parsing.

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot displays temperature over time for San Francisco, using the Iris Dataset’s weekly temperature readings. The chart, built with React and D3 v5, renders SVG circles for each data point, with axes generated from `scaleTime` and `scaleLinear`. Axis labels and tooltips are implemented via custom components, and the Poppins font is loaded from Google Fonts. The visualization updates React state after fetching the CSV, and the loading state is shown with a `<pre>` element.

Fork of Working with Time

A fork of Curran Kelleher's "Working with Time" example, this scatter plot visualizes temperature readings over one week from the Data Canvas Sense Your City Dataset. The React application uses D3 v5 scales (`scaleTime` and `scaleLinear`) and React components for axes and marks, rendering SVG circles with a `title` element for tooltips. The data is loaded asynchronously via `csv()` from a GitHub gist, with time formatted using `timeFormat('%a')` for weekday labels on the bottom axis.

Fork of Stylized Scatter Plot

A React-based scatter plot visualizes the Iris Dataset, showing petal length against sepal width. The visualization uses d3.scaleLinear for both axes, with formatted tick labels and axis labels. Data loads via d3.csv from a GitHub gist, parsing numeric values for all four iris measurements. The SVG rendering displays circles for each data point, with hover tooltips showing petal length values. The chart uses a Poppins font and custom styling for ticks, marks, and axis labels, with a responsive design that centers the visualization in the viewport.

Fork of Pathetic Bar Chart

This example displays the Iris dataset as a scatter plot of petal length against sepal width, with circular marks colored teal and axes with tick labels. Built with React and D3 v5, it uses `scaleLinear` for both axes, `extent` to compute domains, and SVG for rendering. The `AxisBottom` and `AxisLeft` components generate ticks, while `Marks` renders circles with HTML tooltips showing petal length values. Data loads asynchronously via `csv` from a GitHub-hosted Iris dataset.

Oct 30, 2021

Rendering Data with React & D3

This example visualizes the 148 named CSS colors as a donut chart, with each slice filled by its corresponding RGB hex value. Using React state to manage data loading, it fetches a CSV via `d3.csv` and renders an SVG through `ReactDOM`. The pie layout is computed with `d3.pie`, while each segment’s path is generated by `d3.arc`, producing a colorful circular spectrum that maps each color name to its visual representation.

Oct 27, 2021

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial burst, with each color represented as a slice of a pie chart emanating from the center. The example loads color data from a CSV file using D3’s `csv` utility, then uses React’s `useEffect` and `useState` hooks to fetch and manage the data. React renders each slice as an SVG `path` element, while D3’s `pie` and `arc` functions compute the angular positions and arc paths for the slices.

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template displays a scatter plot of MLB team batting data, with each circle representing a team and positioned by its XBA value. The visualization uses the Vega-Lite API with D3 to fetch CSV data from a GitHub Gist, and uses Vega Tooltip for interactive hover details. The chart is configured with custom axis styling and font sizes, and the circular marks are colored by team name with opacity for readability.

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with tooltips revealing the model name for each point. It uses the Vega-Lite API to declaratively define the scatter plot, with D3.js (d3.csv) loading the auto-mpg dataset from a GitHub gist. The code registers Vega, Vega-Lite, and Vega-Tooltip, and renders the chart as SVG, adjusting the view to fit the window size.

Fork of Smiley Face Part II

This fork displays a smiley face visualization built with React and D3 v7, rendering the face as SVG circles with a yellow fill and black stroke. It loads CSS named colors data from a GitHub gist using `d3.csv`, then displays file size, row count, and column count via a custom message function that formats the CSV data with `d3.csvFormat`. The app uses React hooks (`useState`, `useEffect`) to fetch and manage the data asynchronously, while the commented-out SVG markup in the HTML provides the static fallback for the face shapes.

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL. It displays a message showing the data’s size in kilobytes, the number of rows, and the number of columns from the CSS Named Colors dataset. The code uses D3 v7’s `d3.csv` and `d3.csvFormat` to fetch and measure the data, then updates a `<pre>` element with the summary. A commented alternative shows the equivalent approach using the Fetch API and `d3.csvParse`.

Oct 25, 2021

Fork of Smiley Face Part III

This example shows a grid of yellow smiley faces rendered in SVG, with each face composed of a circular background, two eyes, and an arc-shaped mouth. The code uses React components to modularize the face parts, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, while leveraging D3's `arc` API to generate the mouth path. Each face is generated with randomized eye radius, and the faces are rendered as a collection via a React map over a D3 `range` array. The final output displays six columns and three rows of faces, each with varying eye sizes.

Oct 25, 2021

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React to structure SVG elements and D3’s `arc` generator to create the mouth. The face fills the browser viewport, with a yellow circle for the head, two black eye circles, and a thick, inverted U-shaped mouth path. Dimensions and positions are computed from `window.innerWidth` and `window.innerHeight`, centering the face dynamically. The implementation uses ReactDOM to mount the SVG into the DOM, while D3’s `arc()` defines the mouth’s inner and outer radii and angular range.

Oct 24, 2021

Fork of Let's Make a Face Part I

A simple animated smiley face built with React and rendered as SVG. The code generates a yellow circle for the head and two smaller black circles for eyes, positioned using fixed width, height, and offset constants. It uses ReactDOM to render the SVG elements into the DOM, with the face’s center and eye placement derived from the viewport dimensions. No actual animation or smile is implemented yet, as the title and README indicate this is the first step toward a more complete face.

Oct 24, 2021