keitheade

@keitheade·28 public vizzes

Delete me

This example renders a blank page with no visible content or interactive behavior. The HTML file contains only an empty body, while the CSS defines a minimal layout with a centered title border and a network container sized at 500 by 960 pixels. No JavaScript, data loading, or visualization libraries are referenced in the code, and the title "Delete me" suggests placeholder or template status rather than a functional data visualization. The SVG or canvas rendering is not implemented.

Nov 7, 2021

Loading thumbnail…

Delete me

This example displays a blank visualization with no visible content. It uses a minimal HTML structure containing an empty body and a CSS stylesheet that sets the body margin to zero, hides overflow, and defines a title style. The main functionality relies on the body element being empty, with no data, libraries, or rendering APIs in use. The page currently shows only a static, unstyled document without any interactive or graphical elements.

Nov 7, 2021

Loading thumbnail…

Delete me

This example demonstrates a simple data-binding and DOM manipulation pattern using D3.js. It selects all paragraph elements in the body, binds an array of six numbers to them, and appends a new paragraph for each data point. Each paragraph displays a text string containing the numeric value, such as “I’m number 4!”. The code uses D3’s `select`, `selectAll`, `data`, `enter`, and `append` methods, along with the `text` function to set content. Data is provided as a hardcoded array.

Nov 7, 2021

Loading thumbnail…

Delete me

This example displays a blank HTML page with a title of “Delete me” and no visible visualization. It includes an empty style block and an empty body, with no JavaScript, data sources, or rendering libraries referenced. The page simply renders as an empty document, demonstrating a minimal scaffold without interactive or graphical content.

Nov 7, 2021

Loading thumbnail…

Untitled

A grid of circles occupies the canvas, each circle’s position and size derived from a force-directed layout. The visualization shows a network-like arrangement where nodes cluster and repel, creating organic spacing. Using `d3.forceSimulation` with `forceManyBody` and `forceCollide`, the code updates node positions on each tick, redrawing them via Canvas 2D API calls. A title bar is styled via CSS, and the entire scene resets when the page reloads, as noted in the README. The rendering relies on manual canvas drawing rather than SVG or WebGL.

Nov 7, 2021

Loading thumbnail…

Network Map #3

This network visualization maps the devices on a local area network using a force-directed graph layout. The D3.js and d3-force libraries power a physics simulation that positions nodes representing IP addresses and hosts (like "Pixel-4" and "LIFX") as red circles connected by black lines, with each node labeled by its identifier. The graph organizes around central gateway IP addresses from the CSV data, illustrating the network's structure and device relationships.

Nov 6, 2021

Loading thumbnail…

React crash course

A React crash course demonstrates rendering a static "Hello React!" message through the component-based React API. The example uses React 16.13.1 and ReactDOM to mount an `App` component into a DOM element with `ReactDOM.render`. It imports hooks like `useState`, `useEffect`, `useRef`, and `useReducer`, though the current component does not invoke them. The index.html file defines a large text style and loads production builds of React and ReactDOM from unpkg.

Nov 5, 2021

Loading thumbnail…

Rendering Data with React & D3 - Stylied Line chart

This example shows a stylized line chart of San Francisco’s weekly temperature readings over time, plotting temperature against timestamps using an SVG canvas. It is built with React and D3 v7, where React manages the component structure and D3 APIs such as `scaleLinear`, `extent`, and `timeFormat` handle scaling and axis ticks. The code loads CSV data from a GitHub gist, extracts temperature and timestamp fields, and renders custom SVG axis components (`AxisBottom`, `AxisLeft`) and circle marks (`Marks`) with tooltips. Styling is applied via CSS classes for tick lines, labels, and mark colors.

Nov 4, 2021

Loading thumbnail…

Temperature in San Francisco Line Plot

This line plot displays temperature readings in degrees Celsius over one week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while circles mark each data point. Data is loaded from a CSV file containing timestamp and temperature columns. The SVG rendering includes a titled chart with labeled axes, grid lines, and a steelblue fill for the circles, all styled through CSS.

Nov 4, 2021

Loading thumbnail…

Rendering Data with React & D3 - Stylied scatter plot

This scatter plot displays the Iris dataset, plotting sepal length against sepal width for individual flower samples. The visualization uses React components to structure the SVG rendering, with D3.js v7 handling the linear scaling, axis tick generation, and data loading via the `d3.csv` function. Custom React components for the axes and data marks demonstrate a hybrid approach, where D3's `scaleLinear` and `extent` functions compute the chart geometry while React's JSX syntax defines the SVG output, including styled tick marks and circles with hover tooltips.

Nov 4, 2021

Loading thumbnail…

Rendering Data with React & D3 - style barchart Axis

This example renders a horizontal bar chart showing the top 10 countries by 2020 population from a UN dataset, styled with React components and D3 scales. The custom `AxisBottom` and `AxisLeft` components use `d3.scaleBand` and `d3.scaleLinear` to position ticks, while `Marks` draws the rectangular bars in SVG. Data is loaded via `d3.csv`, and the chart displays population values with a tick format that converts gigabytes to billions.

Nov 4, 2021

Loading thumbnail…

Rendering Data with React & D3 - Refactored barchart Axis

This example shows a horizontal bar chart of the top 10 countries by population in 2020, with axes and bars rendered as SVG elements. React manages the component structure, while D3.js provides the `scaleBand` and `scaleLinear` functions for positioning the bars and tick marks. The axes are separated into reusable components—`AxisBottom` and `AxisLeft`—that generate SVG lines and text elements using D3's scale ticks and domain. Data is loaded from a CSV file via D3's `csv()` function within a custom `useData` React hook.

Nov 4, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3 - barchart Axis

This example displays a horizontal bar chart of the top 10 most populous countries for 2020, using data from a UN population CSV. It demonstrates a hybrid approach where React (16.13.1) manages the component structure and state, while D3 (v7.1.1) provides the `scaleBand`, `scaleLinear`, and `max` functions for chart layout. The chart renders as SVG with axes: x-axis ticks and labels generated from `xScale.ticks()`, and y-axis country labels positioned using the band scale. The bars themselves are drawn as `rect` elements, with their widths and heights computed from the data and scales.

Nov 4, 2021

Loading thumbnail…

Rendering Data with React & D3 - barchart Margin

This example shows a horizontal bar chart of UN population data for 10 countries in 2020, rendered as an SVG. The React component loads the CSV with `d3.csv`, then uses `scaleBand` for the country categories and `scaleLinear` for population values. Margins are applied by translating a `<g>` element with the `d3` coordinate system, and each bar is a `<rect>` whose width reflects the population. React state manages the data loading lifecycle with `useState` and `useEffect`.

Nov 4, 2021

Loading thumbnail…

Rendering Data with React & D3 - barchart Basic

This example renders a horizontal bar chart of the top ten countries by 2020 population, sourced from a 2019 UN population CSV. The visualization combines React’s component-based state management with D3’s `csv`, `scaleBand`, and `scaleLinear` functions to map country names and population values to SVG rectangles. The `useState` and `useEffect` hooks asynchronously load and slice the data, while the categorical y-axis and linear x-axis position the bars within a 960-by-500 pixel viewport.

Nov 4, 2021

Loading thumbnail…

Rendering Data with React & D3

This example renders the CSS named colors as a pie chart using React and D3. The visualization shows each color as a slice of a full circle, with each slice’s fill matching its corresponding hex value. The code loads color data from a CSV file via `d3.csv`, computes the pie layout with `d3.pie`, and draws the arcs using `d3.arc`. React manages the component state and rendering, while D3 handles the SVG path generation.

Nov 4, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a data-loading workflow where D3’s `csv` function fetches a dataset of CSS named colors and their hex values from a GitHub gist. The React app uses `useState` and `useEffect` to manage the asynchronous data fetch, displaying a “Loading...” message until the data arrives. Once loaded, each row renders as a thin horizontal rectangle with its background color set to the corresponding `RGB hex value` field. The visualization uses React’s `map` method to create stacked color swatches, showing a flat, ordered list of all colors in the CSV.

Nov 4, 2021

Loading thumbnail…

Network Map #2

A network map visualizes devices on a local network as red nodes with green outlines, labeled by IP address, connected by black links to their gateway. The layout is computed using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces. Node and link data derive from a CSV file listing hosts, IPs, and interfaces, parsed with d3.csv. The SVG rendering updates positions on each simulation tick.

Nov 3, 2021

Loading thumbnail…

json

This example displays a table of network devices, showing each device’s hostname, IP address, MAC address, and network interface. The data is loaded from a local JSON file using the `fetch` API and parsed with `response.json()`. The visualization renders the raw data in a simple, unadorned format, with a minimal black-and-white design; the code includes an empty script block and extensive CSS, but no charting or rendering library is used beyond the native browser APIs. The page structure is defined in an HTML file that loads a bundled JavaScript file.

Nov 2, 2021

Loading thumbnail…

Network - import json

A network visualization displays three named nodes—Alice, Bob, and Carol—connected by directed links, rendered as circles and lines in an SVG. Using d3.forceSimulation with forceManyBody, forceLink, and forceCenter, the layout animates positions on each tick. The example demonstrates importing data via d3.csv and integrating D3 force layouts within a React component, though the visible data is hardcoded while the CSV file remains unused.

Nov 2, 2021

Loading thumbnail…

Fork of D3 v5 Circle Packing from Observable

This example shows a circle packing visualization of the Flare software package hierarchy, with nested circles representing the hierarchical structure and size of each node. The visualization uses a sequential color scale with the interpolateMagma colormap to encode depth, and each leaf node displays its name text clipped to the circle boundary. The code is built with D3 v5 and uses the d3.pack, d3.hierarchy, and d3.scaleSequential APIs, loading data from the @observablehq/flare module. Circles are rendered as SVG circles, with hover states and tooltips showing the full ancestor path and value.

Nov 2, 2021

Loading thumbnail…

Loading Data with React & D3 (working)

This example shows a React component that loads a CSV file of network device information—including hostname, IP address, MAC address, and interface—and displays the text "data is" once the asynchronous call completes. It uses React’s `useState` hook to manage the loaded data and D3’s `csv` function from d3.v7 to fetch and parse the remote `data.csv` file. The rendered output is minimal, focusing on the data-loading pattern rather than any visualization.

Nov 2, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external CSV data into a React application using D3 utilities, displaying a simple status message that changes from “loading” to “loaded” once the data arrives. The code uses React’s `useState` hook to track the data state and D3’s `csv` function to fetch and parse the data from a local `data.csv` file. It also calculates the file size in kilobytes using `d3.csvFormat` and reports the row and column counts in a console message. The interface is minimal, showing only the loading state text.

Nov 1, 2021

Loading thumbnail…

Mouse follow

A moving circle follows the mouse cursor across an SVG canvas, with its position updating in real time as the pointer moves. The example uses React state management with the `useState` and `useCallback` hooks to track cursor coordinates, and renders the circle via SVG elements in a React component. Mouse move events trigger updates to the circle's center position, initialized to the middle of a 960×500 viewport. The visualization demonstrates a simple interactive pattern using React's declarative rendering and event handling.

Nov 1, 2021

Loading thumbnail…

Let's Make a Face Part 3

This example displays a stylized face using React and D3’s `arc` generator. The SVG shows a yellow semicircular mouth drawn with a filled arc, and a single black-outlined circle for an eye, positioned using fixed offsets. Built with React 17 and D3 v7, the code renders the mouth path via `arc().innerRadius(0).outerRadius(250)` and places the eye with plain SVG circle properties, relying on literal coordinate values rather than data-driven scales. The face remains incomplete, showing only the mouth and one eye.

Nov 1, 2021

Loading thumbnail…

Fork of Let's Make a Face Part 2

This fork of “Let's Make a Face Part 2” shows a partial smiley face: a large yellow circle with a black outline and two solid black eyes, positioned symmetrically on a transparent SVG canvas. The code uses React to render the SVG elements, with `ReactDOM.render` attaching the component to a root div. Hard-coded constants define the canvas dimensions, center, eye offset, and radius, while the circle elements receive explicit coordinates and stroke properties. No interaction is present; the view is static until reloaded.

Nov 1, 2021

Loading thumbnail…

Smiley Face #2

This example renders a classic smiley face using React and a canvas-based drawing approach. It displays a yellow circular head with dark eyes and a curved mouth, built entirely through procedural shape generation. The code relies on React 17 for component rendering and the Canvas API for drawing, with the face constructed from arcs and circles. A console log statement confirms the script executes, though the visual output represents the primary interaction.

Nov 1, 2021

Loading thumbnail…

Lets make a face

This example shows a simple, hand-coded SVG face with a large yellow circular head and two smaller black eyes positioned symmetrically. It renders entirely through static SVG elements—a head circle with a black stroke and two eye circles—without any interactivity or animation. The code uses raw SVG markup inside an HTML file, setting geometric attributes like `r`, `cx`, and `cy` directly, with no JavaScript libraries or data sources involved. The face is halfway to a smiley, lacking a mouth or other features.

Nov 1, 2021