C

caineosborne

@caineosborne·20 public vizzes

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature data from San Francisco, plotting temperature against time with a smooth curve and circular markers. The visualization uses React to structure an SVG rendering, with D3 v7 providing the `scaleTime` and `scaleLinear` scales, the `line` generator with `curveNatural` for the path, and helper components for the axes. Data is loaded via `d3.csv` from a gist, and the chart includes interactive tooltips on each circle showing the formatted time and temperature value.

Loading thumbnail…

Stylized Scatter Chart

A stylized scatterplot of the Iris dataset plots petal length against sepal width, with each flower as a teal circle. The chart uses React and D3 v7 to render SVG axes, ticks, and marks via a `Marks` component. Data is loaded asynchronously from a CSV file using D3's `csv` function. The visualization includes formatted axis ticks, axis labels, and tooltip functionality via the `<title>` SVG element.

Loading thumbnail…

Line Chart

This example displays the population of the top 10 countries from the UN Population 2019 dataset. It renders a horizontal bar chart with labeled axes and SVG rectangles. Using d3’s `scaleBand` and `scaleLinear`, it maps categorical country names to the y-axis and population values to the x-axis. The population is formatted with d3’s `format` (e.g., “B” for billions) and converted to an interactive tooltip via the `<title>` element. React state and the `useData` hook, along with d3’s `csv` parser, load and filter the data. The chart includes styled ticks and axis labels from a custom Poppins font.

Loading thumbnail…

Barchart Styling

This example demonstrates a horizontal bar chart visualizing the population of ten countries, sourced from a UN 2019 dataset. The bars are styled with a distinct teal fill and black outlines, while the chart employs a categorical y-axis and a quantitative x-axis. Using React state via the `useData` hook to manage fetched CSV data, the visualization is rendered as SVG through components that build the axes and marks. The code leverages d3's `scaleBand` and `scaleLinear` for scaling, `format` for tick labels, and custom reusable React components for marks and axes.

Loading thumbnail…

Refactored Barchart step 2

This example presents a horizontal bar chart displaying population data for the top 10 countries from a UN 2019 dataset. Using D3.js v7 for scales and SVG rendering within a React component, the chart separates axis and mark rendering into modular functions. The bottom axis shows linear population values, while the left axis displays categorical country names using a band scale. React's useState hook manages the asynchronously loaded CSV data, which is parsed and sliced before being converted into rectangular SVG elements via the Marks component.

Loading thumbnail…

Barchart step 2

This bar chart displays the top 10 countries by population for 2020, using data from a UN Population dataset loaded via d3.csv. The visualization shows horizontal bars with a linear x-scale for population values and a band y-scale for country names, including gridlines and tick labels. React state manages the async data loading, while d3.scaleBand and d3.scaleLinear compute the chart geometry. The SVG is rendered by React, with d3 utilities generating tick positions and bar widths.

Loading thumbnail…

Barchart step 1

This example displays a horizontal bar chart of the top 10 countries by population for 2020, using data loaded from a CSV file via `d3.csv`. React state manages the asynchronous data fetching, and once loaded, `d3.scaleBand` and `d3.scaleLinear` position the bars within an SVG. The bars are rendered as `<rect>` elements, with the chart lacking axes or labels at this initial step.

Loading thumbnail…

Rendering D3 Arcs with React

A color wheel displays all CSS named colors from a CSV file loaded with d3.csv, with each color occupying an equal slice of the pie. The visualization uses React state to manage the loaded data and renders SVG paths generated by d3.pie and d3.arc. React’s useEffect hook fetches the data, while d3.arc’s outerRadius is set to the full chart width, resulting in a large circular palette.

Loading thumbnail…

Smiley Face Part 4

This example shows a yellow smiley face rendered as an SVG, with two circular eyes and a curved mouth drawn as an arc. The face is centered in a 960x500 viewport, using three `<circle>` elements for the head and eyes, and a `<path>` generated by D3’s `arc` function for the mouth. React manages the component structure, while D3 v7 provides the arc generator. The mouth arc uses a fixed inner and outer radius with start and end angles to create a downward curve, and the head is outlined with a thick black stroke.

Loading thumbnail…

Rendering data with react

This visualization renders CSS named colors as a series of stacked horizontal bars, creating a swatch-like display. Using React's `useState` and `useEffect` hooks, it asynchronously loads a CSV file of color data from a GitHub gist via `d3.csv`. The app displays a "Loading..." message until the data arrives, then maps each row to a div element whose background color is set by the `RGB hex value` field, with a fixed width and height. The example demonstrates integrating D3's data-fetching utilities with React's component-based rendering and state management.

Loading thumbnail…

Fork of Vega-Lite API Template

This circular scatterplot visualizes the relationship between a car’s origin and its horsepower, using data from a CSV file of automobile specifications. Each semi-transparent dot marks a single vehicle, with the transparency building up in dense areas to reveal clusters. The visualization is generated programmatically through the Vega-Lite API, which translates the declarative spec into Vega for rendering. The `vl.markCircle` method defines the marks, while `.encode` maps the categorical `origin` field to the x-axis and the quantitative `horsepower` field to the y-axis. A toolkit is configured for enhanced axis styling and readability.

Loading thumbnail…

Sample Line Graph of Vega-Lite API Template

This example draws a line graph of weekly temperature readings for San Francisco. It uses the Vega-Lite API to define a single line mark with a time-encoded x-axis and a quantitative y-axis, with tooltips showing temperature values. The visualization renders as SVG via Vega and Vega-Lite, while D3’s `csv` function loads the data from a GitHub gist. The code customizes label styling for readability and fits the chart to the full browser window.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and display metadata about a CSV dataset using React and D3. It shows the number of columns, rows, and file size in kilobytes after fetching a colors dataset from a GitHub gist via the `csv` method from `d3`. The React `useState` hook tracks the data, initially `null`, while `useEffect` triggers the asynchronous load. The `message` utility, using `d3.csvFormat`, calculates the size, and the view renders either the statistics or a "Loading..." placeholder.

Loading thumbnail…

Loading data

This example demonstrates how to load and parse a remote CSV file using D3’s `d3.csv` method, reporting the dataset’s size in the browser. The page displays three lines of text: the number of columns, the number of rows, and the file size in kilobytes, computed via `d3.csvFormat` and `Math.round`. Data is fetched asynchronously from a GitHub Gist URL, and the results are rendered into a `<pre>` element using DOM manipulation. The minimal styling uses large CSS font sizes to emphasize the metadata.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor as it moves across an SVG canvas, updating its position in real time. The visualization uses React state via `useState` and `useCallback` to track mouse coordinates from the `onMouseMove` event, and renders the circle with SVG markup. The React DOM library mounts the component to the page, while the circle’s center is set to the current pointer location. This demonstrates a simple interactive pattern where user input directly drives visual output.

Loading thumbnail…

Smiley Face Part 5

A grid of eighteen randomly generated smiley faces demonstrates how React components compose reusable SVG elements. Each face combines a yellow background circle, two black eyes, and an arc-based mouth, all wrapped in a face container that translates the coordinate system. The code uses React function components and D3’s `arc` generator for the mouth path, with randomized eye position, eye radius, and mouth dimensions applied per face. Data is generated via `d3.range` and rendered through ReactDOM.

Loading thumbnail…

Smiley Face Part 4

This gallery example displays a classic smiley face composed of a yellow circular head with black outlines, two small eye circles, and a curved mouth arc. Built with React and D3 v7, it renders to an SVG canvas using D3’s `arc` generator to define the mouth’s inner radius, width, and start and end angles. The head is a separate React component, and all elements are positioned relative to the center using SVG group transforms.

Loading thumbnail…

Smiley Face Part 3

This example shows a stylized smiley face built from SVG shapes: a yellow circle with a black stroke, two small eyes, and a curved mouth. It uses React to define the visualization components and D3’s `arc` generator to create the mouth path. The code sets fixed positions, radii, and angles for each part, then renders them into an SVG canvas via ReactDOM. The face is centered on a 960×500 viewport, with all geometry computed from constant values.

Loading thumbnail…

Fork of Smiley Face Part 2

A smiley face rendered as a yellow SVG circle with two black eyes, drawn programmatically using React. The face is centered on a 960x500 canvas, with the face radius derived from the canvas height and eye positions offset symmetrically from the center. ReactDOM renders the App component, which uses JSX to create the SVG elements. The code defines constants for the face radius, stroke width, eye offsets, and eye radius, and applies a black stroke to the face circle. React 16.9.0 and ReactDOM are loaded from an external CDN.

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline forms the face of a smiley, accompanied by two smaller black circles positioned as eyes on a blank white background. The code uses a static SVG with explicit `circle` elements, setting coordinates and radii directly in the markup. It renders at 960 by 500 pixels without any JavaScript interaction or animation, serving as a foundational step toward the full smiley-face visualization.