Mark Zwart

@mark-me·7 public vizzes

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to create an interactive scatter plot of auto-mpg data, displaying vehicle weight against horsepower as colored and sized circles. The plot encodes weight on the x-axis and color scale, with mpg controlling circle size and opacity for readability. The code loads data from a CSV using d3.csv, then renders the chart as SVG via Vega-Lite’s API in index.js. A custom config adjusts axis styles and removes domain lines, while tooltips reveal car model names on hover.

Mar 23, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset using React and D3. It fetches a CSV file of CSS named colors and displays a concise text summary showing the data size in kilobytes, row count, and column count. The visualization uses React’s `useState` and `useEffect` hooks to manage the loading state, while D3’s `csv` function fetches the remote data and `csvFormat` calculates its size. The interface initially shows “Loading…” until the data arrives, then updates with the computed statistics.

Mar 23, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse a CSV file using the Fetch API and D3’s `d3.csvParse` function. It fetches a remote CSV file containing CSS named colors, parses the text into an array of objects, and logs the number of columns found in the data. The code defines an asynchronous `fetchText` helper that retrieves the raw CSV string, then passes it to `d3.csvParse` for conversion. The example highlights the separation between fetching raw text and D3’s parsing utilities, using D3 v6 and native browser `fetch`.

Mar 23, 2021

Loading thumbnail…

Mouse follower

A single black circle follows the mouse pointer across a blank SVG canvas. The React component tracks cursor coordinates through an `onMouseMove` event handler, storing them in state via `useState` and updating the circle’s `cx` and `cy` attributes. The app uses React 16.9 and renders the SVG directly with ReactDOM.

Mar 23, 2021

Loading thumbnail…

Mouse follower

A yellow smiley face rendered with React and SVG follows the mouse cursor across the screen. Built with React 16.9 and D3 v5, the face is constructed using SVG circles and a D3 `arc()` generator for the mouth. The program tracks pointer movement and updates the circle’s position accordingly, demonstrating simple mouse-event handling with SVG rendering in a React framework.

Mar 23, 2021

Loading thumbnail…

Fork of Smiley face part 1

A grid of six-by-three smiley faces is rendered as a React SVG composition. Each face is built from modular components, including a yellow background circle, two black eyes, and a mouth defined by a D3 arc path. The code uses React’s component system with props to vary eye and mouth dimensions randomly, and relies on D3's `range` and `arc` utilities within the React framework. The faces are positioned via a centered translation group within each SVG canvas.

Mar 22, 2021

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page that displays the text “Hello HTML” in large, centered type, styled entirely with inline CSS. The page’s only dynamic behavior is a single call to `console.log`, which prints “Hello JavaScript!” to the browser’s developer tools. It demonstrates the basic structure of an HTML document, using a `<style>` block for presentation and a `<script>` tag for scripting, without relying on any external libraries or data sources.

Mar 13, 2021