bakstorage00001

@bakstorage00001·43 public vizzes

Simley D3 and React Part III

This example shows a yellow smiley face rendered as an SVG using React components, with D3’s `arc` generator creating the mouth path. The face is drawn with circles for the eyes and a semicircular mouth, centered via a `<g>` transform, while fixed constants define dimensions like eye offset and mouth radius. React 17 manages the DOM, and D3 v7 supplies the arc geometry, with styles applied through SVG attributes. The code demonstrates a simple integration where React handles the markup and D3 computes shape paths.

Feb 6, 2022

Loading thumbnail…

Test Let's make a face with D3.js!

A smiling face rendered as yellow SVG circles, rects, and an arc path demonstrates fundamental D3.js DOM manipulation. Eyebrows animate upward and back down through chained `transition().duration(2000)` calls on the group’s `transform` attribute, while the mouth uses `d3.arc`. The code builds the figure by selecting the SVG, appending groups, and setting shape attributes for eyes, eyebrows, and face from fixed numeric constants, with no external data source.

Feb 6, 2022

Loading thumbnail…

Test HTML Starter

This example demonstrates a minimal HTML page that displays the message “Hello HTML!” centered in large text. It uses inline CSS to style the message with a font size of 13em and text alignment, while JavaScript functionality is defined in a separate `index.js` file. The page serves as a basic starter template, illustrating how HTML, CSS, and JavaScript are structured in a single-file setup without external libraries or data sources.

Feb 6, 2022

Loading thumbnail…

Collapsible Tree Version 1

This interactive visualization displays a hierarchical tree of the Flare software package’s classes, rendered as collapsible nodes with animated transitions. Built with D3 v6, it uses `d3.tree()` for layout, `d3.linkHorizontal()` for edges, and SVG elements for rendering. Clicking a node toggles its children, with the view zoomable via d3.zoom. The underlying data comes from the `flare-2.json` file, and node labels use a white stroke halo for readability.

Feb 6, 2022

Loading thumbnail…

Stylized Bar Chart Completed

A stylized bar chart displays the top 10 most populous countries by rendering circular marks on a scatter plot, with sepal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it uses scaleLinear for axis scaling and SVG for rendering. The iris dataset is loaded via d3.csv, with tick formatting and axis labels styled in a Poppins font, while tooltips show values on hover.

Feb 4, 2022

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays the top ten countries by 2020 population, using React state to manage data loaded via D3's `csv` utility. The chart renders SVG rectangles positioned with `scaleBand` and `scaleLinear`, with D3 axes customized through React components. Styling includes light gray tick lines and a hidden page overflow, while the data originates from a UN population CSV hosted as a GitHub gist.

Feb 4, 2022

Loading thumbnail…

Refactored Bar Chart

A horizontal bar chart displays population data for ten countries in 2020, loaded from a CSV file hosted on GitHub. The React app uses a custom hook with `d3.csv` to fetch and parse the data, storing it in state. SVG rendering builds the visualization from reusable components: `AxisBottom` creates the linear population scale, `AxisLeft` labels the categorical country bands, and `Marks` draws rectangles using `scaleBand` and `scaleLinear`. The chart updates upon data loading.

Feb 4, 2022

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of UN population data for ten countries in 2020, rendered as SVG using React and D3. The React component manages the loaded CSV data with `useState` and `useEffect`, while D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` utilities handle data loading and scaling. Axes are drawn manually by iterating over `xScale.ticks()` and the y-scale domain, with tick labels and lines positioned via transforms. The bars are `rect` elements sized by the scales within a translated group.

Feb 3, 2022

Loading thumbnail…

The Margin Convention

The visualization displays a horizontal bar chart of the top ten countries by 2020 population, using varying bar lengths to represent population magnitude. It loads data from a CSV file via `d3.csv`, parses the population values, and renders the chart as an SVG. The implementation uses React state with `useState` and `useEffect` to manage the asynchronous data loading, then applies `d3.scaleBand` for the y-axis and `d3.scaleLinear` with `d3.max` for the x-axis scaling, encoding each country as a rectangle within a transformed group.

Feb 3, 2022

Loading thumbnail…

Pathetic Bar Chart

This example demonstrates a basic bar chart that displays the top-ten most populous countries using 2020 population data from a UN dataset. The React application asynchronously loads CSV data via the d3.csv utility and renders the visualization as SVG rectangles. The chart assigns each country’s name to a y-axis position using d3.scaleBand and maps the logged population count to bar widths via d3.scaleLinear. While the visualization loads, the program shows a "Loading..." message, and the bars lack axes, labels, or other annotation.

Feb 3, 2022

Loading thumbnail…

Rendering Data with React

This example visualizes the top 10 countries by 2020 population as a horizontal bar chart rendered with SVG. The code loads UN population data from a CSV file using `d3.csv`, processes the rows, and stores the result in React state via the `useState` and `useEffect` hooks. D3’s `scaleBand` and `scaleLinear` position the bars, while React maps the data to `<rect>` elements. A loading message displays until the data arrives, with the chart updating once React state is set.

Feb 3, 2022

Loading thumbnail…

Flower of Colors Rendering Data with React

This example shows a flower-like radial visualization of 148 named CSS colors, with each color occupying a wedge-shaped slice arranged in a circular pattern. The code loads the color data asynchronously using `d3.csv` and manages the loading state with React’s `useState` and `useEffect` hooks. Each slice is rendered as an SVG `<path>` element using the `d3.arc` generator, with angles computed proportionally from the data’s index. The visualization centers the flower by translating the SVG group to the middle of the canvas.

Feb 3, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how React and D3.js can work together to load and render a dataset of CSS named colors. The page displays a vertical stack of colored horizontal bars, each representing a color from the data, with the width fixed at 960 pixels. The code uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading via D3’s `d3.csv` utility, which fetches the CSV data from a remote URL. Until the data arrives, the interface shows a "Loading..." message, after which React maps the parsed rows to styled div elements. The example highlights a simple pattern for integrating D3’s data-loading capabilities with React’s state-based rendering.

Feb 3, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to combine React hooks with D3 utilities for asynchronous data loading and display. The application fetches a CSV file containing CSS named colors using D3’s `csv` function within a `useEffect` hook, while React’s `useState` manages the loading state—showing “Loading…” until data arrives. Once loaded, it renders a summary message computed in `message.js`, reporting the file size in kilobytes (via `d3.csvFormat`), row count, and column count. The visualization uses React 16.9 and D3 v7, with the fetched data stored in component state and displayed in a styled `<pre>` element.

Feb 2, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and parse a CSV file within a React environment using D3 v5. The visualization displays basic statistics about the loaded dataset: its size in kilobytes, the number of rows, and the number of columns, rendered in a large monospace text element. It uses the `d3.csv` method to fetch and parse the data, then applies `d3.csvFormat` to calculate the file size. The data comes from a GitHub Gist containing CSS named colors.

Feb 2, 2022

Loading thumbnail…

Loading and Parsing CSV Data with D3

This example demonstrates how to load and parse a CSV file using D3.js, displaying basic dataset statistics. The visualization shows the file size in kilobytes, row count, and column count within a large text element. The code fetches a CSV file containing CSS named colors from a GitHub Gist, uses `d3.csv` to retrieve and parse the data, then `d3.csvFormat` to measure its size, and finally updates the page’s pre-formatted text content. The D3 v5 API handles the asynchronous data loading and parsing.

Feb 2, 2022

Loading thumbnail…

Vega-Lite Stacked Bar Chart

This stacked bar chart displays the population distribution of five major religions across different countries, using horizontal bars where each segment’s length represents population size and color encodes religious affiliation. Built with the Vega-Lite API on top of Vega and Vega-Lite, the visualization fetches data from a CSV file via `d3.csv` and renders interactively as an SVG, with tooltips enabled through Vega-Tooltip. The chart applies custom configuration for axis styling and font sizes, and sorts countries by total population, with bar size and opacity fixed at 100 and 1 respectively.

Feb 2, 2022

Loading thumbnail…

Vega-Lite Bar Chart

This bar chart visualizes population by country for 2015, using the Vega-Lite grammar to map countries to the x-axis and population to the y-axis. Built with the `vega-lite-api` and rendered via the `vega` and `vega-lite` libraries, it loads data from a CSV file using `d3.csv` and displays interactive tooltips via `vega-tooltip`'s Handler. The chart is styled with a custom config for improved readability.

Feb 2, 2022

Loading thumbnail…

Vega-Lite Line Chart

This visualization displays temperature readings over time as a single semi-transparent line, with tooltips revealing the associated location name for each data point. Built with the Vega-Lite API, it renders as an SVG using vega-lite v4 beta and vega-tooltip for interactive hover information. The code loads CSV data from a remote GitHub gist using d3.csv, then configures the chart dimensions to fit the full window while customizing axis colors and label styles for readability. The line mark uses explicit size and opacity settings to achieve its subtle visual effect.

Feb 2, 2022

Loading thumbnail…

Vega-Lite API Example

This example uses the Vega-Lite API to create a scatter plot of automobile data from a CSV file. The visualization encodes miles per gallon, horsepower, origin, and weight into position, color, and size, with a tooltip revealing the car name. It leverages vega-lite-api, vega, and vega-lite to generate an SVG chart, and d3.csv for data loading. The chart uses overlaid translucent circles and a custom config to improve label readability.

Feb 2, 2022

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between a car’s acceleration and horsepower from the classic Auto MPG dataset, plotting each vehicle as a point with a tooltip that reveals its name. The visualization is built using the Vega-Lite API, which programmatically constructs a scatter plot via `vl.markPoint`, `vl.x().fieldQ('acceleration')`, and `vl.y().fieldQ('horsepower')`. Data is loaded asynchronously with D3’s `csv` function from a GitHub gist, while the chart is rendered to SVG and wrapped with interactive tooltips from `vega-tooltip`. The appearance uses custom config for larger fonts and lighter grid lines.

Feb 2, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time to mirror the pointer's movement. The example demonstrates React's state management and event handling, using the `useState` hook to track mouse coordinates and an `onMouseMove` event listener on the SVG element. ReactDOM renders the component, which draws a navy circle with a radius of 30 pixels against a blank white background. The visualization highlights a simple interactive pattern with minimal code, relying solely on React's declarative rendering rather than any additional libraries.

Feb 2, 2022

Loading thumbnail…

Loading and Parsing CSV Data with D3

Feb 2, 2022

Loading thumbnail…

Mouse Follower - Code Optimization

Two navy and red circles follow the mouse cursor across an SVG canvas, offset horizontally to create a trailing effect. Built with React and rendered as SVG elements, the visualization uses the `useState` hook to track mouse coordinates and the `useCallback` hook to optimize the mousemove event handler, which updates the circle positions via `setMousePosition`. The initial mouse position is centered on the 960×500 viewport.

Feb 2, 2022

Loading thumbnail…

Mouse Follower colors

A fixed-size SVG scene contains two circles, one navy and one red, that track the cursor's position as it moves over the canvas. The red circle is offset 150 pixels to the left of the mouse, creating a trailing color pairing. Built with React 16.9, the component uses the `useState` hook and an `onMouseMove` event handler to update the circle coordinates on every pointer movement. The SVG `<circle>` elements render with hardcoded fill colors, and no data source is loaded.

Feb 1, 2022

Loading thumbnail…

Smiley Face Part VI

A grid of randomly generated smiley faces uses React components to compose SVG circles and arcs, with D3’s `arc` generator shaping each mouth. The `Face`, `Eyes`, `Mouth`, and `BackgroundCircle` modules accept randomized props for stroke width, eye offset, and mouth radius, producing varied expressions. Each face is rendered in its own SVG via `FaceContainer`, and D3’s `range` creates 18 faces. The code takes full advantage of React’s component model and ES6 modules.

Feb 1, 2022

Loading thumbnail…

Mouse Follower

This example renders a static smiley face using React and D3, centered within an SVG canvas. The face is composed of three circles for the eyes and head, plus a mouth drawn with the `d3.arc()` path generator. The rendering uses a `<g>` transform to center the mouth arc and other shapes around the middle of the viewport. The circle positions and radii are defined as constants, and the SVG output is mounted into the DOM via `ReactDOM.render()`. No interactive mouse-following behavior is implemented in the displayed code.

Feb 1, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and read a CSV file in the browser using the Fetch API and asynchronous JavaScript. It loads a remote CSV file containing CSS named colors from a GitHub Gist and logs the raw text content to the browser console. The implementation defines an async function, `fetchText`, which requests the URL, extracts the response as text, and then invokes a `.then()` callback to handle the parsed output. The example also includes commented-out alternative code showing a chained `fetch` and `response.text()` approach.

Feb 1, 2022

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML!” in large, centered type. It demonstrates the foundational web technologies of HTML for structure, CSS for styling, and JavaScript for potential interactivity. The styling is applied via a `<style>` block targeting the `.message` class, while no external libraries or data sources are used. This bare-bones setup serves as a starting point for web development and visualization projects.

Feb 1, 2022

Loading thumbnail…

Simley D3 and React Part VII

A grid of randomly generated cartoon faces fills the screen, each with a yellow circular head, black outline, two eyes, and a D3 arc-based mouth. The example demonstrates reusable React components—BackgroundCircle, Eyes, Mouth, and Face—composed within an SVG container. D3 v7 generates the mouth paths via `d3.arc()`, while React’s `range()` from D3 creates an array of 45 faces, each with randomized dimensions for stroke, eye position, and mouth size. Rendering is entirely SVG-based without external data.

Feb 1, 2022

Loading thumbnail…

Simley D3 and React Part VI

A grid of forty-five yellow smiley faces renders in React, each built from reusable components for the background circle, eyes, and mouth. The faces use an SVG `<g>` transform to center coordinates, while the mouth is drawn with `d3.arc()` to create a semicircular path. React props control face dimensions, eye offsets, and stroke width, and `range()` from d3 generates the repeated array of faces.

Feb 1, 2022

Loading thumbnail…

Simley D3 and React Part V

This example shows a smiling face built from primitive SVG shapes, composed of a yellow background circle, two black eyes, and a curved mouth. It demonstrates how D3 and React can be combined to create declarative, reusable components. The visualization uses React’s component model to structure the code, with `BackgroundCircle`, `Eyes`, and `Mouth` as separate functions. D3’s `arc` API generates the mouth’s path, while SVG’s `<g>` element translates all components to the canvas center. The rendering is static, with no interaction or data source beyond hardcoded dimensions.

Jan 31, 2022

Loading thumbnail…

Simley D3 and React Part IV

A yellow smiley face rendered in SVG, built with React components and D3’s arc generator. The code defines reusable React elements for the background circle and eyes, while the mouth uses `d3.arc` with inner and outer radii plus start and end angles. D3 v7 and React 17 are loaded via CDN, and the SVG is centered using a `<g>` transform. The example demonstrates a declarative React-D3 integration, producing a static visualization without interactivity or data binding.

Jan 31, 2022

Loading thumbnail…

Simley D3 and React Part II

This example shows a static smiley face drawn as a yellow circle with two black eyes, rendered in SVG. The visualization demonstrates how to integrate D3-style SVG drawing with React by using reusable JavaScript variables for dimensions and offsets. It uses React and ReactDOM to render the SVG elements, with hardcoded values for the face radius, eye position, and stroke width. The code defines constants for width, height, and eye geometry rather than using external data or interactive features, focusing on a minimal component-based approach.

Jan 31, 2022

Loading thumbnail…

Simley D3 and React Part II

This example shows a static smiley face rendered as an SVG, composed of a yellow circle with a black stroke for the face and two smaller dark circles for eyes. The code uses plain SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—positioned via hardcoded coordinates within a 960×500 viewport. It demonstrates a minimal React-free HTML page, relying solely on D3 v3’s SVG support indirectly through direct DOM markup, with no data binding or interactive behavior.

Jan 31, 2022

Loading thumbnail…

Simley D3 and React Part I

This example shows a static smiley face built with raw Scalable Vector Graphics (SVG) shapes, without using D3 or React logic. Three circles—a large yellow face with a black stroke, plus two smaller eyes—are positioned via explicit coordinate attributes inside an inline SVG element. The code relies on basic SVG circle elements and CSS styling to set the body margin and hide overflow. No data source is involved; the visualization is purely declarative markup within an HTML file.

Jan 31, 2022

Loading thumbnail…

Making a BarChart - Formatting Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from a CSV file, with population values converted from thousands to absolute numbers. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for categorical country labels, and `axisBottom`/`axisLeft` for formatted ticks, including a custom `format` function that abbreviates large numbers (e.g., turning G into B). SVG rendering applies a margin convention, removes default axis lines, and styles bars and text via CSS.

Jan 31, 2022

Loading thumbnail…

Making a BarChart

The bar chart ranks the ten most populous countries using 2018 estimates from the data.csv file, with population values multiplied by 1000. Built with D3 v5, it renders SVG rectangles using `scaleLinear` for the x-axis, `scaleBand` for y-axis categories, and `axisBottom`/`axisLeft` for tick marks. Margins offset the chart, while the `enter()` selection appends styled `rect` elements with steelblue fills.

Jan 30, 2022

Loading thumbnail…

d3 Intro

A yellow circle with a black outline serves as a face, featuring two circular eyes, rectangular eyebrows, and a semi-circular mouth drawn using the d3.arc() generator. The eyebrows animate upward and then return to their original position through chained d3 transitions, each lasting 2000 milliseconds. The entire scene is rendered as static SVG elements selected via d3.select, with all shapes positioned using computed width and height attributes from the SVG element.

Jan 30, 2022

Loading thumbnail…

Blank Canvas

An empty SVG canvas occupies the full browser viewport, presenting a blank space with no data or visual elements rendered. The page sets up a fixed, full-screen body area and an initial 960×500 pixel SVG element, though the JavaScript includes commented-out code that would resize the SVG and append a rectangle. Using D3 v5's `select` method, the script references the SVG but takes no active drawing action, leaving the visualization completely empty.

Jan 30, 2022

Loading thumbnail…

Shapes

The visualization displays a collection of basic geometric shapes—an ellipse, rectangle, and circle—colored individually and grouped to illustrate SVG styling and transformation. A second group applies a uniform fill and stroke, while a line and an unclosed path demonstrate stroke properties and line joins. The example is built with d3.v5, using the `select` API to target the SVG, and relies on raw SVG elements and CSS classes for rendering, with a fixed viewport enforced by the stylesheet.

Jan 30, 2022

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal setup for building interactive visualizations with D3 within VizHub. It renders the text “Hello VizHub!” in a centered, large font on the page. The code imports the `select` function from the D3 library and a local ES6 module named `myMessage`, which exports the message string. D3 is loaded via UNPKG, and the message is injected into an HTML div using the `select` and `.text` methods.

Jan 30, 2022

Loading thumbnail…

World Countries Tree

This example shows a hierarchical tree of world countries organized by continent and subregion. The layout uses D3’s `tree()` and `hierarchy()` functions to compute node positions, with curved `linkHorizontal()` paths connecting parent and child nodes. Labels display each country’s full name, with font size decreasing by tree depth. The visualization supports pan and zoom through D3’s `zoom()` behavior, applied to a group element. Data comes from a static `data.json` file, and all rendering is done with SVG elements styled via external CSS.

Jan 29, 2022