Skip to main content
Log in
F

fcordon@pin.upv.es

@fernanCordon·15 public vizzes

Loading thumbnail…

Círculos con interacción

Seven colorful circles rest on a soft green background, with one highlighted by a black outline and full opacity. Clicking any circle selects it and persists that choice by rewriting the `selectedIndex.csv` file through VizHub’s `writeFile` API. The code uses D3 selections (`select`, `join`) to render and update the SVG circles, while reading the initial selection from the CSV via an imported module. This demonstrates self-modifying code where user interaction changes the stored state.

Feb 10, 2025
Loading thumbnail…

Arrastrar

Six colored circles of varying sizes and positions are rendered on a light green background. Users can drag each circle freely within the container, with its coordinates updating in real time as it moves. The visualization demonstrates the d3-drag module, applying a drag behavior to SVG circle elements that update state through a setState callback. Written with D3 v7, it initializes the circle data on first render and uses D3’s select, drag, and data join methods to manage the interactive elements.

Feb 10, 2025
Loading thumbnail…

Gráfico de linea

This visualization demonstrates a simple line chart constructed using SVG path elements, plotting six data points with coordinates defined by the `x` and `y` properties. The rendering uses the `d3.line` generator to produce the path data, which is then applied to an SVG `<path>` element with a thick black stroke, rounded line caps, and rounded line joins. The code leverages the D3.js library's `select` and `line` functions, and the chart is drawn within an SVG container that adapts to the available width and height. The visualization highlights the core mechanics of SVG path rendering and D3's line generator without any axes or labels.

Feb 9, 2025
Loading thumbnail…

SVG Icons

This example displays a small set of vector icons from Heroicons, shown as large, browser-rendered SVG elements. It demonstrates a practical way to embed icons directly in JavaScript without external image files. The code uses `d3.select` to build a flexbox layout, iterates over the icon keys with `selectAll` and `join`, and injects the raw SVG strings via `.html()`. The rendered SVG is then resized by setting the `width` attribute to 250 pixels.

Feb 9, 2025
Loading thumbnail…

Mouse círculo

This example demonstrates a single red circle that follows the mouse cursor across the visualization canvas. The circle's position updates directly in response to pointer movement, with the cursor’s coordinates captured from each mouse event. The implementation uses d3’s `select` and `pointer` functions within an interactive SVG, where a `mousemove` handler triggers state updates via a spread operator to maintain an immutable state object. The circle’s `cx` and `cy` attributes are then re-rendered from the updated state, showcasing a simple, reactive update pattern.

Feb 9, 2025
Loading thumbnail…

Pie Básico

This example shows a donut chart built from seven colored slices, each sized by a radius value from the input data array. The D3 code uses `d3.pie()` to compute the slice angles and `d3.arc()` to generate each path shape, with slices centered in the SVG and given a semi-transparent fill. The visualization renders on a light green background, demonstrating the basic pie layout with the general update pattern and method chaining.

Feb 9, 2025
Loading thumbnail…

Letras animadas

This example demonstrates D3’s selection.join pattern with animated transitions for entering, updating, and exiting letters. It generates a shuffled, sorted subset of the alphabet every second, rendering each letter as a text element colored green when entering, black when updating, and brown when exiting. The code uses `d3.select`, `d3.transition`, and `d3.shuffle` to animate vertical and horizontal movement, with a `setInterval` loop and a cleanup function that works with hot reloading.

Feb 9, 2025
Loading thumbnail…

onda

A wave-like pattern of circles animates across the screen, with each circle’s position and radius oscillating sinusoidally over time. Built with D3 v6, the visualization updates a static SVG selection every frame using `setInterval`, while `vizData` binds new data arrays to `circle` elements via `.join()`. The `makeData` function generates positions based on a time parameter, and the rendering leverages SVG attributes for live updates.

Feb 9, 2025
Loading thumbnail…

Círculos Interaction state

Seven pastel circles on a light green background respond to clicks. Clicking a circle raises it to the top and adds a thick black outline, while clicking the background removes the highlight. The example uses d3-selection’s `join` for data binding and `on` event listeners to update a `selectedId` in the shared state. The data is a static array of circle positions and radii, rendered as SVG elements.

Feb 9, 2025
Loading thumbnail…

Javascript Arrays

This example demonstrates a minimal web page that uses CSS and JavaScript to display a centered greeting message. The code defines an HTML document with a single div element containing the text “Hello HTML!”, styled through a class selector. It relies on native browser APIs and does not import external libraries, serving as a barebones starter template for integrating interactive visualizations. The page is built with standard HTML structure and can be extended with frameworks like React, as referenced in the accompanying documentation.

Feb 4, 2025
Loading thumbnail…

Sol_LeWitt

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes on an SVG canvas. The stripes are masked by two overlapping circles, creating a circular intersection pattern that reveals and hides parts of the grid. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to define the visual effect. The artwork scales to the browser window, with masks controlling which stripes remain visible, echoing LeWitt’s geometric, systematic style.

Feb 2, 2025
Loading thumbnail…

Sol Lewitt

A minimalist SVG reproduction of a Sol LeWitt wall drawing. The canvas displays a blank drawing area with no visual marks, while the accompanying script logs "Hola mundo" to the console. The piece uses raw HTML, CSS, and JavaScript with inline SVG elements, setting up a 900x500 coordinate space. The rendering approach is static, with no external visualization libraries or data-processing functions visible in the code, emphasizing the conceptual framework over graphical output.

Feb 1, 2025
Loading thumbnail…

Sol Lewit

A reproduction of Sol LeWitt’s wall drawings, this example renders geometric grid-based patterns directly in the browser. It shows a single large title message, “Hello HTML!”, styled with an oversized font, but the visualization logic is not present in the provided code. The page uses plain HTML and inline CSS, with an empty script tag, so it does not yet employ any data-visualization libraries or APIs. The rendering approach is static, with no interaction or animation, and no external data source is referenced.

Feb 1, 2025
Loading thumbnail…

Círculos con D3

This example demonstrates how to draw and dynamically style circles within an SVG container using D3.js. It shows an array of circle objects, each with x, y, radius, and fill color properties, rendered through the D3 `select`, `selectAll`, `data`, and `join` API calls. The code sets the SVG's width and height from the container, applies a light background, and uses method chaining to assign circle attributes like `cx`, `cy`, `r`, and `fill` from the data, with a uniform opacity value.

Feb 1, 2025
Loading thumbnail…

aaa

This example demonstrates the "Hello World" of the VizHub V3 Runtime Environment, showing how a simple `main` function exported from `index.js` renders content into a container DIV. It highlights interactive widgets by allowing a numeric value, the font size, to be adjusted via Alt-drag for continuous hot reloading. The code uses the `container.innerHTML` property to display a centered "Hola Mundo" message, with the font size dynamically reflected in real time. This serves as a blank slate for building more complex visualizations in VizHub V3.

Jan 31, 2025