John Kobbeman

@JohnKobbeman·13 public vizzes

Vega-Lite API Line Chart Template

This example demonstrates a line chart of temperature over time, using data from the UCI Machine Learning Repository’s Auto MPG dataset via a Gist. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders as an SVG. The chart encodes time on the x-axis and temperature on the y-axis, with tooltips enabled for data inspection. D3 is used to load the CSV data, and the configuration customizes axis styling and label fonts for readability.

Feb 28, 2021

Loading thumbnail…

Vega-Lite API Bar Chart Template

This example shows a bar chart of country populations for 2015, with bars sorted in ascending order along the x-axis and tooltips displaying the population value for each country. It uses the Vega-Lite API to construct the chart specification programmatically, combining mark definitions, encoding channels, and data binding in a concise JavaScript interface. The chart renders through Vega and Vega-Lite, with the data loaded from a CSV file using d3.csv, and includes a custom config to adjust axis styling. The visualization is built from a template that registers the Vega-Lite API and integrates Vega Tooltip for interactive hover details.

Feb 28, 2021

Loading thumbnail…

Vega-Lite API Stacked Bar Chart Template

This stacked bar chart reveals the distribution of religious affiliations by country, with each bar sorted by total population and segmented by religion. The visualization is generated using the Vega-Lite API, which constructs a declarative specification for the mark `markBar` and encodings for x, y, color, and tooltip. It relies on Vega-Lite’s `vl` API, registers with Vega and Vega-Lite libraries, and fetches CSV data from a Gist. The chart uses custom configuration for axis styling and renders with an SVG view.

Feb 28, 2021

Loading thumbnail…

Vega-Lite API Scatter Plot Template

This visualization presents a scatter plot of auto-mpg data from the UCI Machine Learning Repository, using points to show vehicle weight versus horsepower. Color encodes the country of origin, while point size maps to miles per gallon. The plot is built with the Vega-Lite API, registering Vega and Vega-Lite libraries, and uses D3’s CSV parser to fetch data from a Gist. The code configures tooltips via vega-tooltip and customizes axis and label styling through a separate config object.

Feb 28, 2021

Loading thumbnail…

Loading Data with React & D3

This example shows how to load CSV data with D3 in a React application, displaying the dataset’s size, row count, and column count as text. The code uses the `csv` utility from D3 v6 to fetch a GitHub-hosted dataset of named CSS colors, while React’s `useEffect` and `useState` hooks manage the asynchronous loading state. A custom `message` function formats the statistics, and the UI switches from a “Loading...” placeholder to the summary once data arrives. The visualization demonstrates a minimal integration of D3’s data-loading and formatting APIs within React’s component lifecycle.

Feb 28, 2021

Loading thumbnail…

Refactoring the Loading and Parsing CSV Data page

This example demonstrates how to load and parse CSV data from a remote URL. The page displays three concise statistics about the dataset: its size in kilobytes, the number of rows, and the number of columns. Using `d3.csv`, it fetches a gist containing CSS named colors, then processes the result by `d3.csvFormat` and the `data.length` and `data.columns.length` properties. The output is rendered as plain text inside a `<pre>` element via `textContent`.

Feb 28, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v6, displaying basic file statistics in the browser. It fetches a remote CSV file containing CSS named colors from a GitHub gist, then uses `d3.csvParse` to convert the raw text into a structured data array. The visible output reports the file size in kilobytes, the number of data rows, and the number of columns, all rendered inside a `<pre>` element. The code relies on the native Fetch API for the HTTP request and `d3.csvParse` for parsing.

Feb 28, 2021

Loading thumbnail…

Mouse Follower

A yellow-outlined circle tracks the mouse pointer across an SVG canvas, moving smoothly as the cursor travels. The visualization uses React's `useState` and `useCallback` hooks to capture mouse coordinates from the SVG's `onMouseMove` event and update the circle's `cx` and `cy` attributes accordingly. The rendering relies on D3 v6 for SVG manipulation within a React framework, with no data source beyond the user's pointer position.

Feb 28, 2021

Loading thumbnail…

Smiley Face

This example renders a yellow smiley face with two eyes and a mouth using React and SVG. The face is centered within a 960×500 viewport, with the head drawn as a circle and the mouth constructed via a d3.arc() path using specified inner and outer radii and angular ranges. The code uses ReactDOM to mount the component and leverages D3 v6’s arc generator for the curved mouth shape. All elements are positioned using inline transform attributes.

Feb 28, 2021

Loading thumbnail…

Smiley Face v4

This example composes a yellow smiley face with a black outline, black eyes, and an arc-shaped mouth from nested React components. The face is centered on a 960 by 500 SVG canvas. The background circle, eyes, and mouth are each defined as separate React components, with the mouth generated using D3’s `arc` API to create a donut-shaped path. Rendering uses ReactDOM with D3 v6, and the SVG elements are positioned using a transformed group.

Feb 28, 2021

Loading thumbnail…

Smiley Face Array

A grid of smiley faces fills the screen, each face rendered as a yellow circle with black outlines, eyes, and a curved mouth. Faces are generated procedurally via React components, with randomized stroke widths, eye offsets, eye radii, and mouth dimensions creating subtle variation across the array. The visualization uses React 17 and D3 v6, leveraging d3.arc for mouth paths and d3.range to create the 18-face layout, with all elements drawn as SVG.

Feb 28, 2021

Loading thumbnail…

Smiley Face v6

A yellow smiley face built from SVG primitives is centered on a gray canvas. The face is composed of a circular background, two black eye circles, and a mouth arc, all rendered as separate React components. The code uses React with D3 v6’s `arc` API to generate the mouth’s path, and passes layout parameters like offsets and radii to position elements. The `FaceContainer` wraps everything in an SVG with a translated group, demonstrating a modular, component-based approach to creating and composing shapes.

Feb 28, 2021

Loading thumbnail…

Making a Custom Smiley Face

This example shows a custom smiley face built entirely with SVG shapes. It uses React to render a yellow circle for the head, two black circles for eyes, and D3’s `arc()` generator to create both the mouth and nose as filled paths. The arcs are positioned using start and end angles, with inner and outer radii defining their thickness. The face is centered on a 960 by 500 canvas, and the code specifies stroke widths and offsets for the facial features.

Feb 27, 2021