D

dev-ignacio-h

@dev-ignacio-h·18 public vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes drawn on a canvas. It shows circles, a rectangle, and a line, with one circle and the rectangle using fill colors, and the rectangle also having a stroke. The SVG is embedded directly in an HTML file using the `svg` element. The code includes a path element with a truncated `d` attribute, though its full path is not defined. This serves as a static, declarative example of vector graphics rendering without any scripting or external libraries.

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between horsepower and weight for various car models. Each circle is color-coded by the car’s origin, and hovering reveals a tooltip with the car’s name and origin. The visualization is built with D3 v5, using `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering includes grid lines, axis labels, and a title.

Loading thumbnail…

Rendering Data with React

This example demonstrates how to load and display CSS named color data fetched from a GitHub Gist, using D3's `csv` utility to parse the data. The React application renders the data as colored SVG elements, showcasing a hybrid approach where D3 handles data ingestion while React manages the UI. The code also includes a `message` module that formats a summary of the data size, row count, and column count, though this message is not displayed in the final output. The visualization is built with React 16.9 and D3 v6, rendering SVG elements dynamically based on the parsed color data.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading a remote CSV dataset using D3’s `csv` method within a React component, displaying the data’s size, row count, and column count as text. The `useState` and `useEffect` hooks manage the asynchronous data loading, rendering a “loading...” message until the promise resolves. The application uses React 16.9, D3 v6, and SVG-free output, presenting the metrics in a large `<pre>` element. The data come from a GitHub gist containing CSS named colors.

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the auto-mpg dataset, showing the relationship between engine displacement and horsepower, with tooltips displaying car names. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries to create a lightweight, declarative chart specification. Data is loaded asynchronously via d3.csv, while the layout adapts to the full viewport with custom axis styling and opacity-adjusted point marks for readability. The result renders as scalable SVG through the Vega view engine.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower with tooltips showing vehicle names. Built with the Vega-Lite API and D3’s CSV loader, it renders as an SVG scatterplot using semi-transparent points to reveal density. The visualization sizes itself to the window and applies custom styling for larger axis labels, with the Vega tooltip handler enabled for interactive inspection.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v6, displaying the file size, row count, and column count of a dataset containing CSS named colors. The program fetches the CSV from a GitHub gist via `d3.csv`, then reports the parsed data’s dimensions using `d3.csvFormat` and the resulting array’s properties. A large monospaced `<pre>` element renders the summary, while the code also includes commented alternatives using `fetch` and `d3.csvParse` for manual text handling.

Loading thumbnail…

Interaction with React

A React application renders a single circle that tracks the mouse cursor across an SVG canvas. The component uses the `useState` hook to store the cursor's coordinates and updates them through the `onMouseMove` event handler. Each mousemove event triggers `setMousePosition`, causing React to re-render the SVG circle at the new `clientX` and `clientY` positions. The example demonstrates state-driven updates within a React component, using ReactDOM to mount the app and SVG elements for drawing.

Loading thumbnail…

Face Part VI - Compartmentalizing Complexity

A grid of sixteen identical smiley faces demonstrates how a React component can compartmentalize SVG rendering. Each face is composed of separate React components for the background circle, eyes, and mouth, all positioned within a shared `FaceContainer` using absolute coordinates. The mouth is drawn using a D3 arc path, while the faces are generated from a D3 range, producing a repetitive pattern that highlights the modular structure.

Loading thumbnail…

Smiley Face Part V - ES6 Modules

A smiling face rendered as an SVG diagram using React components for its yellow background circle, two black eyes, and a curved mouth. The mouth shape is generated with the D3 `arc()` generator, while the background and eyes are simple SVG `<circle>` elements. React 17 renders the composed components into the DOM, with D3 v6 imported specifically for the arc path calculation. The face is centered within a 960-by-500 viewport, and all sizes and offsets are defined as constant variables in the main module.

Loading thumbnail…

Smiley Face Part IV - ES6

A smiling face drawn with SVG shapes in React, centered on a yellow circle with black stroke, two eyes, and an arc-based mouth. D3’s `arc` generator defines the mouth path from inner and outer radii with a half-turn angle range, while React components structure the SVG elements. Rendered via `ReactDOM.render` into the `#root` element, using fixed dimensions and computed offsets for facial features.

Loading thumbnail…

Fork of Smiley Face Part III - With D3

A static smiley face is drawn using SVG shapes, showing a yellow circle for the face, two smaller circles for the eyes, and a semi-circular path for the mouth. The visualization is constructed with React, which renders the entire graphic declaratively, and leverages D3’s `arc` API to generate the mouth’s path data. The face is centered with a black stroke, and all elements are positioned relative to the center using a transform. The code sets fixed dimensions and variables for offsets and radii, yet no interactive behavior or data source is present.

Loading thumbnail…

Smiley Face Part II - With React

This example shows a smiley face rendered as two offset eyes and a yellow circle head with a thick black outline. The SVG is built declaratively using React components and JSX, with dimensions and positions defined as JavaScript constants. It uses React 17 and ReactDOM’s `render` method to mount the component into the DOM. All shapes are drawn with SVG `circle` elements, using attributes like `cx`, `cy`, `r`, `fill`, and `strokeWidth`, computed from the center coordinates and predefined offsets.

Loading thumbnail…

Smiley Face Part I

A large yellow circle with a black outline occupies the center of an SVG canvas, accompanied by two smaller black circles positioned to the upper left and upper right. This first part of a smiley face uses basic SVG shapes, specifically the `circle` element, with explicit `cx`, `cy`, and `r` attributes to define position and size. The rendering is an SVG graphic with a width of 960 and height of 500, and the face elements are placed relative to a center point at (480, 250).

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal HTML page built with D3.js v3, containing only a document declaration and an empty body element. It is a forked version of a basic "Hello HTML" template. The page renders nothing visually; it serves as a starting point for projects that will add interactive elements later. The code uses standard HTML5 structure with a `<head>` and empty `<body>`, and no external libraries, stylesheets, or JavaScript are loaded at runtime. As such, the visualization shows an empty canvas, with no data or rendering logic executed.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” centered on the page at a very large font size of 13em. It demonstrates a minimal HTML page that uses inline CSS for styling the body element and inline JavaScript for logging a message. The code directly uses the `console.log` API to output “Hello JavaScript!” to the browser’s developer tools. As a bare-bones starter, it shows how basic HTML, CSS, and JavaScript integrate without any external libraries.

Loading thumbnail…

Making a Bar Chart

This example shows the population of the top ten most populous countries using a horizontal bar chart, with data sourced from the 2017 World Population Prospects. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` to display the country names and population counts. Data is loaded asynchronously via `d3.csv`.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from D3.js SVG shapes animates its eyebrows upward and back down. The code uses `d3.select` to append circles, rects, and an `arc()`-generated path onto a 960×500 SVG, with a yellow circular head, black-outlined eyes, and a curved mouth. Eyebrow motion is driven by chained `transition().duration(2000)` calls that translate the eyebrow group, demonstrating sequential SVG attribute tweening.