Josuerocha504@gmail.com

@Rocha504·6 public vizzes

Fork of Vega-Lite API2026

This example uses a scatter plot to visualize relationships in the auto-mpg dataset, showing miles per gallon against horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API for declarative specification, with data loaded via d3.csv. The chart leverages vega-lite-api’s chained methods for encoding, and integrates vega-tooltip for interactive hover details. The rendering uses the Vega view with SVG output, configured with custom styling for axis labels and titles.

Feb 16, 2026

Loading thumbnail…

Hello HTML with D3

A smiling face is drawn with SVG shapes, including a yellow circle, red eyes, and a curved mouth, using React components for each part. The face is composed from a `BigCircle`, two `Eye` components, and a `Mouth` component, all positioned via transforms and props. The `Mouth` uses D3's `arc` to generate the path, while the app loads data asynchronously from a CSV URL via `d3.csv`, displaying the row and column count. The visualization is rendered with React and D3 v7, with SVG output.

Feb 16, 2026

Loading thumbnail…

ForkofLoadingandParsingCSVData

This example demonstrates the minimal workflow for loading a remote CSV file and converting its text content into structured JavaScript objects using D3 v7. It fetches the raw file via the standard `fetch` API, obtains the text with `response.text()`, and then applies `d3.csvParse(text)` to transform the comma-separated values into a parsed array. The resulting data is logged to the browser console, illustrating how to separate the asynchronous download from the parsing step without any graphical rendering. The source data comes from a gist hosted by user Rocha504.

Feb 15, 2026

Loading thumbnail…

Fork of Hello HTML

A yellow circle tracks the mouse across an SVG canvas, with its position updated on every mouse move event. The example is built with React, using `useState` and `useCallback` to manage the event handler, and leverages D3 v7's `arc` function to define the path for the smile shape. The `HappyFace` component composes the `BigCircle`, `Eye`, and `Mouth` subcomponents, each rendered as SVG elements with specified coordinates and radii.

Feb 15, 2026

Loading thumbnail…

Fork of Hello HTML

This fork of a simple HTML hello-world example presents a minimal, static web page with no data visualization or interactive elements. It contains two nearly identical HTML files, `index.html` and `myOwn.html`, each rendering a title tag stating "Hello HTML huh" (with a slight typo in the first) inside an otherwise empty body. The code uses no external libraries, JavaScript, or rendering APIs; it relies solely on basic HTML markup to display text in the browser. The example demonstrates the starting point for a visualization project, showing only the raw document structure before any charting or data-binding code is added.

Feb 6, 2026

Loading thumbnail…

Fork of Hello HTML

This example demonstrates the minimal structure of an HTML document combined with a JavaScript visualization using D3.js v3. It shows a blank page with an empty body, serving as a starting point for embedding interactive graphics. The code loads D3 from a remote source and uses its core API to manipulate the Document Object Model (DOM) or SVG elements once the script executes, though no specific visualization is drawn here. The fork focuses on the foundational setup required for any D3-based chart, with the visualization logic left for the user to add.

Feb 6, 2026