Skip to main content
Log in
P

perez.h89@gmail.com

@huguettep·15 public vizzes

Loading thumbnail…

Solar System

This animated visualization depicts the solar system’s planets orbiting the sun, with each celestial body shown as a circle scaled by its relative radius and positioned by its distance in astronomical units. Planet names appear as labels below their circles. The animation uses D3 transitions to sequentially grow each circle and fade in its label, then smoothly updates positions and sizes. The code leverages D3 v7’s `select`, `transition`, and `easeLinear` APIs, with a custom data array containing each planet’s distance, radius, and color.

Aug 11, 2024
Loading thumbnail…

D3 Transitions

Six colored circles float over a pale blue background as D3 transitions animate them into view. Each circle scales from radius zero to its full size with staggered delays, then repositions itself at new coordinates using a faster linear ease. The example uses `selection.join()` to manage enter and update states, applying `transition()` with explicit durations and `easeLinear` to control the motion. Data is defined inline in JavaScript, rendered as SVG circles with distinct fills and 0.667 opacity.

Aug 11, 2024
Loading thumbnail…

Pseudo Line Chart with D3

This example uses D3 to draw a pseudo line chart, where thick, rounded strokes connect a series of six data points with distinct x and y coordinates on an SVG canvas. The line is rendered using the `d3.line` generator, with a stroke width of 41 pixels and round line caps and joins, transforming a simple path into a bold, graphic element. The chart emphasizes geometric form over traditional axis labels or scales, showcasing how D3's line API can create stylized visualizations from raw coordinate data.

Aug 11, 2024
Loading thumbnail…

Blank Slate

This example demonstrates the foundational "Hello World" for the VizHub V3 Runtime Environment, which uses a blank SVG canvas as its starting point. The code defines a `main` function in `index.js` that receives a container and an options object with `state` and `setState`, enabling interactive widget support with continuous hot reloading. The static SVG markup displays a single pseudo line chart path rendered with rounded strokes, illustrating the simplified entry point where no `index.html` file is required.

Aug 11, 2024
Loading thumbnail…

Fork of Blank Slate

This example renders a set of six colorful circles of varying sizes and positions on a light blue background. The circles are placed at fixed coordinates, with translucent fills, creating a simple abstract composition. The code uses D3’s `select`, `selectAll`, and the `.join()` method to create and update SVG circle elements from a static data array. Each circle’s `cx`, `cy`, `r`, and `fill` attributes are bound directly to the data, and an `opacity` of 0.667 is applied uniformly.

Aug 11, 2024
Loading thumbnail…

Blank Canvas

A stark, minimal line chart presents a single black polyline with rounded endpoints, shaped by a series of coordinates against a blank background. The visualization overlays a rounded rectangle as a canvas backdrop, dynamically scaling the SVG to fit the full browser viewport. The chart relies on D3's `select` to manage the SVG element, while the path itself is defined directly in HTML markup, with no data-driven generation or interactive behavior. The rendering leverages the SVG `path` element and CSS to control the stroke width, linecap, and join styles.

Aug 11, 2024
Loading thumbnail…

Pseudo Line Chart with D3 - copy of final

This example uses D3.js version 7 to create a pseudo line chart—a series of thick, rounded black segments joined together to approximate a smooth curve. The code uses `d3.line` to generate an SVG path from six hardcoded data points with x and y coordinates. The path is rendered with `fill: none`, a stroke width of 55, and `stroke-linecap` and `stroke-linejoin` set to round, giving the appearance of connected bands rather than a traditional thin line. The visualization demonstrates SVG path elements, path styling attributes, and the D3 line generator API.

Aug 11, 2024
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle initially fills the browser viewport. The visualization demonstrates a minimal setup for a scalable vector graphics (SVG) canvas, dynamically sizing its dimensions to match the full browser window. The code constructs the empty canvas using the ‘select’ function from the D3 library, which is used to query the SVG element and append the background rectangle. Styling is applied via CSS to fix the body’s position and remove margins, ensuring the canvas remains edge-to-edge. No data or interaction is present; it serves as a starting point for further charting.

Aug 11, 2024
Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser window, rendered as a single rounded rectangle that adapts to the viewport dimensions. The example demonstrates a minimal D3 setup where `d3.select` attaches to the `svg` element, and the viewport size is read from `document.body.clientWidth` and `document.body.clientHeight`. Using d3.v5, the code appends a `rect` with a 40-pixel corner radius, while the CSS hides any page overflow. No data or interactive behavior is present; the piece simply shows the initial scaffolding for a charting project.

Aug 11, 2024
Loading thumbnail…

Pseudo Line Chart

Pseudo Line Chart is a minimal, full-screen visualization that draws a single rounded rectangle as its primary visual element. The chart uses D3's `select` to target an SVG and dynamically sets its width and height based on the browser viewport, appending a `rect` with a corner radius of 40 pixels. The styling relies on a fixed, full-viewport body layout with hidden overflow to ensure the graphic fills the screen. No data or additional chart elements are present, making it a demonstration of basic D3 SVG manipulation and responsive sizing.

Aug 11, 2024
Loading thumbnail…

Pseudo Line Chart

This pseudo line chart renders a blank, rounded-rectangle canvas that fills the browser viewport. It uses a fixed-position layout with the body set to cover the entire screen, while an SVG element is sized to match the client width and height. The visualization solely demonstrates the foundation of a chart by appending a single styled rectangle to the SVG, using the D3 selection and append API. No data or line series is present in the code.

Aug 11, 2024
Loading thumbnail…

Circles with D3

This example demonstrates a blank D3.js starter using the VizHub 3 runtime. It renders a single SVG element that adapts to the container’s dimensions. The code relies on the D3 `select` API and the `.join('svg')` method to create or update the SVG, with explicit width and height attributes. The visualization does not display any data or additional graphics beyond the empty SVG canvas.

Aug 10, 2024
Loading thumbnail…

Blank Slate

This example demonstrates the interactive "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets. It shows a blank slate starting point where holding the Alt key and dragging a numeric value in the editor adjusts the displayed font size in real time. The code exports a `main` function that takes a container element and renders an HTML string with inline styling, using the `fontSize` variable to set the text size.

Aug 10, 2024
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 runtime with a minimal "Hello World" visualization, showing how a simple `main` function in `index.js` renders directly into a container DIV. It highlights the platform's interactive widgets for continuous hot reloading, where holding Alt and dragging a number changes the font size live. The code uses plain HTML and inline styles via `container.innerHTML`, with no external libraries. This serves as a blank slate starting point for building more complex data visualizations.

Aug 10, 2024
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

A minimal “Hello World” template demonstrates the VizHub V3 runtime environment, where a single exported `main` function receives a container DIV and renders text directly into it using vanilla JavaScript. The code sets an inline font-size style on a div, and Alt-dragging the numeric value in the editor triggers continuous hot reloading for instant visual feedback. This starting point shows the simplified entry point and interactive widget workflow without external libraries.

Aug 10, 2024