S

sd2beatles

@sd2beatles·30 public vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset using a scatter plot where each point represents a car, with engine displacement on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size representing vehicle weight. Hovering reveals the car’s name via tooltips. The visualization is built entirely with the Vega-Lite API, using the `vl.markCircle` and `vl.encode` methods to define the marks and channels. Data loading relies on `d3.csv`, while rendering is handled by Vega and Vega-Lite’s runtime, with custom axis styling configured through a dedicated config object.

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, plotting engine displacement against horsepower from an auto-mpg CSV dataset. Each point represents a car model, with tooltips revealing the vehicle’s name. The visualization is built using the Vega-Lite API, which composes a markPoint encoding with quantitative fields, and renders via Vega and Vega-Lite libraries. Custom configuration styles axes and labels, while `d3.csv` loads the external data source.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot animates through the four dimensions of the classic Iris Dataset, cycling the x-axis among petal width, sepal width, petal length, and sepal length every two seconds while keeping sepal length on the y-axis. The visualization uses D3 6.7.0 with a custom reusable `scatterPlot` module that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. A `setInterval` loop updates the x-value binding, redrawing the plot idempotently through the SVG `join` operation, while the Share Tech font styles the text.

Loading thumbnail…

practice

This example showcases a minimal HTML page that prints “Hello HTML” in large, centered text and logs “Hello JavaScript!” to the browser console. It demonstrates the basic integration of CSS for styling and inline JavaScript for scripting, using standard browser APIs like `console.log`. The page serves as a simple starter template, with no external libraries or data sources.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the simplest possible HTML page structure, using CSS for styling and JavaScript for console output. The code sets the document's title to “Fork of HTML Starter” and uses a `<style>` block to center the text with a font size of 13em. The body contains the text “Hello HTML” and an inline `<script>` that logs “Hello JavaScript!” to the browser’s developer tools. It highlights the fundamental building blocks of web-based visualizations, serving as a minimal starting point for HTML, CSS, and JavaScript projects.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” centered on a white background, with the same message echoed to the browser’s developer console via JavaScript. The code uses plain HTML, CSS for styling the body with a large font size and center alignment, and a vanilla JavaScript `console.log` call. It serves as a bare-bones template for web-based projects, showing static text rendering without any data or interactivity.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal setup for a web visualization using D3.js version 5. It imports the `select` function from the D3 library to target a specific HTML element and set its text content. The text itself comes from a local ES6 module, showcasing how to organize code into separate files for reusability. The visualization renders a simple centered message, "Hello VizHub!", styled with CSS. This serves as a template for understanding how to load D3 via a CDN and combine it with modular JavaScript.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the simplest possible HTML page structure, using CSS for styling and JavaScript for console output. The code sets the document's title to “Fork of HTML Starter” and uses a `<style>` block to center the text with a font size of 13em. The body contains the text “Hello HTML” and an inline `<script>` that logs “Hello JavaScript!” to the browser’s developer tools. It highlights the fundamental building blocks of web-based visualizations, serving as a minimal starting point for HTML, CSS, and JavaScript projects.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to visualize the classic Auto MPG dataset, plotting categorical origin on the x-axis and quantitative horsepower on the y-axis, with color encoding for weight and size encoding for miles per gallon. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders an interactive SVG scatterplot with a tooltip showing car names via the vega-tooltip Handler. Custom configuration in config.js adjusts font sizes and axis styling for readability, while getData.js loads the CSV using d3.csv.

Loading thumbnail…

Fork of Fork of Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset of CSS named colors using React’s `useState` and `useEffect` hooks alongside D3’s `csv` utility. While the data loads, the interface displays “Loading…” text; once fetched, it renders a plain-text summary in a large `<pre>` element, showing the file size in kilobytes, row count, and column count. The message is computed using `d3.csvFormat` and custom string concatenation, with React handling the asynchronous state update.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset of CSS named colors. It displays a text summary showing the data size in kilobytes, row count, and column count, or shows "Loading..." while fetching. The visualization uses React hooks (`useState`, `useEffect`) to manage asynchronous loading, and the D3 `csv` function to parse the remote data. The summary text is generated by a custom `message` function that uses D3’s `csvFormat` to calculate byte length.

Loading thumbnail…

Untitled

This example visualizes metadata about CSS named colors, displaying the dataset size in kilobytes, row count, and column count as text. It loads color data using D3 utilities and manages the resulting information through React state. The code uses `d3.csvFormat` to calculate file size, with `data.length` and `data.columns.length` providing additional statistics, all rendered through React components in a minimal HTML page.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset of CSS named colors. It displays a text summary showing the data size in kilobytes, row count, and column count, or shows "Loading..." while fetching. The visualization uses React hooks (`useState`, `useEffect`) to manage asynchronous loading, and the D3 `csv` function to parse the remote data. The summary text is generated by a custom `message` function that uses D3’s `csvFormat` to calculate byte length.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates loading and summarizing a dataset of CSS named colors. The visualization displays a text summary showing the data’s size in kilobytes, row count, and column count, with a loading message before the data arrives. The app uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading, while D3’s `csv` function fetches and parses the remote CSV file. The `message` function formats the summary using `d3.csvFormat` to calculate file size.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a simple React component that loads a CSV file of CSS named colors and displays whether the data has finished loading. It uses React’s `useState` hook to manage the data state, and D3’s `csv` function to fetch and parse the external dataset from a GitHub gist. The app renders either a “loaded” or “loading” message in a `<div>`, with the asynchronous data retrieval triggering a state update once the file arrives. The code integrates React and D3 utilities directly, though it omits error handling and the more detailed message formatting seen in commented-out sections.

Loading thumbnail…

Start Data

This example demonstrates the initial step of loading and parsing a remote CSV file containing CSS named colors. It fetches the data from a GitHub Gist using the `fetch` API with async/await, then parses it with `d3.csvParse`. The result is a concise text summary displaying the file size in kilobytes, the number of rows, and the number of columns. The visualization appears as plain text within an HTML `<pre>` element, showing how raw data can be transformed and displayed before any graphical representation.

Loading thumbnail…

Start Data

This example displays basic statistics about a CSV dataset of CSS named colors, showing the file size in kilobytes, row count, and column count in large text. It loads the data from a remote gist URL using d3.csv and the Fetch API, then formats the result with d3.csvFormat to calculate the kilobyte size. The message is rendered into a pre element via textContent. The visualization demonstrates data loading and parsing with d3.v7 in a simple, text-based output.

Loading thumbnail…

Loading and Prasing CSV data

This example demonstrates the initial steps of loading and parsing a CSV file containing CSS named colors. The page shows a bare HTML structure with JavaScript that fetches the data from a remote GitHub Gist URL using the `fetch` API. The code’s commented-out promise chain outlines the process of receiving the response and extracting text, indicating the intended workflow for handling the data. It serves as a minimal starting point for a React-based visualization, linking to a separate starter template for further development.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face with two eyes and an open mouth, rendered as an SVG graphic. The face is drawn using React components that wrap D3 shape generators, with the `FaceContainer` component setting up the SVG canvas and coordinate system. D3’s `arc` function creates the mouth path, while circles define the face and eyes. The render uses React 16.9 and D3 v5, with all positioning centered around the middle of the 960x500 viewport.

Loading thumbnail…

Fork of Fork of Smiley Face Part 3

This interactive smiley face is rendered as a scalable vector graphic using React and D3. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth drawn as an arc path. The code uses D3’s `arc` generator to compute the mouth’s path, specifying inner and outer radii and angle ranges, while React handles the SVG element composition and layout.

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen randomly parameterized smiley faces rendered as SVG via React components and D3’s `arc` generator for the mouths. Each face varies in stroke width, eye offset and radius, and mouth dimensions, with a yellow circle face, black outlined stroke, and simple arc mouth. The code composes reusable React components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—inside a `<g>` transform, while `d3.range` generates the array of faces. This example demonstrates declarative SVG scene graphs built from React state and D3 shape primitives.

Loading thumbnail…

Fork of Smiley Face Part IV

A React component renders a classic smiley face as an SVG graphic, with a yellow circle for the head, black eyes, and an arched mouth. The visualization demonstrates how D3’s `arc` generator defines the mouth’s curved path, while the head and eyes are drawn as basic SVG circle elements. The code combines React’s declarative component structure with D3’s geometry utilities, using fixed pixel dimensions and coordinates to position each facial feature within a 960 by 500 viewport. The example highlights the integration of D3’s shape generation inside a React-rendered SVG.

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a yellow smiley face using React and D3 in an SVG. The face is centered with two eyes and a semicircular mouth, all drawn with basic geometric shapes and an arc generator. The code uses React 16.9 for component structure, ReactDOM for mounting, and the `arc()` function from D3 v5 to create the mouth path. The face is built with explicit pixel offsets and radius values, and the background circle is positioned using a translation transform.

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen yellow smiley face using React and D3.js. The face is centered with a circular head, two eyes offset horizontally and vertically, and a mouth drawn as an arc path using D3’s `arc` function. The SVG coordinates adapt to the browser window’s inner dimensions, and the face scales based on the viewport height. The implementation relies on React’s `ReactDOM.render` to mount the SVG, while D3 supplies the arc path for the mouth.

Loading thumbnail…

Fork of Smiley Face Part II

This example demonstrates a simple yellow smiley face rendered as a static SVG graphic, comprising a large circular head with two smaller eye circles. The visualization is built using React, with the `React` and `ReactDOM` libraries from the UMD builds, and renders directly to SVG within an HTML page. The code defines fixed dimensions, a center point, and offsets to position the circles, using a `strokeWidth` of 20 pixels for the head's outline. The rendering approach is purely declarative, with all circle coordinates hard-coded rather than derived from data.

Loading thumbnail…

Fork of Smiley Face Part II

A smiling face is drawn with React and SVG, using yellow circles for the head and eyes with black outlines, all rendered inside a 960-by-500 viewport. The implementation relies on React 17 and ReactDOM to mount the SVG elements into the DOM, with the markup defined as JSX in the App component. The page also includes a commented-out static SVG version of the same shape, suggesting an iterative design process. No interactive behavior or data binding is present, as the code only displays the static graphic.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Loading thumbnail…

Fork of Hello HTML

This example shows a smiley face rendered as a single SVG graphic, constructed with React and D3. The face is built from basic geometric shapes: a yellow circle for the head with a black stroke, two filled circles for eyes, and a D3-generated arc path for the mouth. React composes the SVG elements, while the `arc()` API from d3 defines the mouth’s curved path, specifying its inner and outer radii and start and end angles. The SVG canvas is fixed at 660 by 500 pixels, with the face centered through an SVG transform.

Loading thumbnail…

Fork of Hello HTML

This fork of Hello HTML uses React 17.0.2 and renders a static SVG scene featuring a large yellow circle with a black stroke and two smaller empty circles positioned as eyes. The SVG defines the shapes directly with fixed coordinates, while a script logs a message to the console. It demonstrates a minimal React setup with inline styling for a full-viewport layout and no margin, focusing on basic SVG circle elements rather than interactive data binding.

Loading thumbnail…

Starter

This example shows a static SVG composition of three circles: a large yellow circle outlined in black, with two smaller unfilled circles positioned symmetrically on either side. The page uses HTML, CSS, and JavaScript, with the SVG canvas set to 960 by 500 pixels. The code directly defines the shapes and their properties, such as coordinates, radii, fill, and stroke, without any dynamic behavior or data loading. The rendering is plain SVG.