Francisco Ortega

@AuyLocks·8 public vizzes

Fork of Vega-Lite API Template

This example visualizes a scatter plot of automobile data, mapping weight on the x-axis, horsepower on the y-axis, and encoding country of origin as color and fuel efficiency (mpg) as point size. The visualization is built using the Vega-Lite API, which composes a declarative specification in `viz.js` and renders it as an SVG. Data is loaded from a remote CSV file via `d3.csv`, and the chart’s appearance is customized through a config object that adjusts axis styles and label typography. Interactivity is added via the Vega Tooltip handler, enabling hover details.

Mar 16, 2021

Loading thumbnail…

Loading Data with React & d3

This example shows a React app that loads a CSV dataset from a GitHub gist using d3.csv, stores the result in React state via the useState and useEffect hooks, and displays a short summary of the dataset as plain text. The message function from a local module formats the data by reporting its size in kilobytes with d3.csvFormat, the row count, and the number of columns. While loading, the app displays the word “Loading...”, and the final output updates once the asynchronous data request resolves. The example uses d3 v5 and React 16.9.

Mar 12, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, with React managing its position in real time. The component uses React’s `useState` and `useCallback` hooks to track pointer coordinates from the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes accordingly. The example demonstrates a minimal integration of D3.js (v5) with React, where D3 provides no visual functions—only the SVG rendering is handled by React, and the circle radius is fixed at 30 pixels. The canvas is 960 by 500 pixels, and the initial cursor position starts at the center.

Mar 11, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the basic workflow of loading and parsing a CSV file with D3.js, displaying summary statistics about the dataset. It fetches a CSV file containing CSS named colors from a GitHub gist, parses it, and shows the file size in kilobytes, the number of data rows, and the number of columns. The visualization uses the `d3.csv()` function to asynchronously fetch and parse the data, and `d3.csvFormat()` to measure the formatted output length. The resulting information is rendered as large text using plain HTML and CSS styling.

Mar 11, 2021

Loading thumbnail…

Smile Face part 1

A grid of 18 randomly generated smiley faces, each rendered as an SVG with a yellow circular background, two black eyes, and a mouth shaped as a half-circle arc. The faces vary in eye offset, eye radius, and mouth dimensions due to random values passed as props. Built with React and D3 v5, the Mouth component uses `d3.arc()` to generate the path, while `FaceContainer` translates each face into its own SVG element. The code demonstrates reusable component composition for generative, data-driven visuals.

Mar 8, 2021

Loading thumbnail…

MyFace

A stylized face is rendered as an SVG graphic, composed of a yellow circular head with black outlines, two eyes, a mouth, and additional facial features. The example demonstrates compositional drawing with React and D3, using JSX to construct shapes and the `d3.arc` path generator to define the mouth’s curved outline. Other elements such as rectangles, ellipses, and lines are positioned manually via SVG transforms to create eyebrows, blush, and a nose. The code uses React’s `ReactDOM.render` to mount the component and D3 v5 for the arc calculation.

Mar 7, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a single static circle centered on a 960 by 500 pixel SVG canvas. The circle is drawn using raw SVG markup, with no data binding or interaction. The page uses a minimal HTML structure with inline CSS to remove the default margin. It serves as a basic starter template for creating SVG-based visualizations without the aid of a JavaScript library.

Mar 6, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a static SVG circle centered within an HTML page. The visualization uses raw SVG markup inside an HTML document, with the circle’s center and radius set directly via the `cx`, `cy`, and `r` attributes. The page’s embedded CSS removes margins and hides overflow, ensuring the graphic fills the viewport. This code relies on the browser’s built-in SVG rendering and no additional JavaScript libraries.

Mar 6, 2021