Jorge MataH

@matahj·11 public vizzes

11.-Vega-Lite API 2

This example visualizes San Francisco weekly temperature data as a single smooth area chart, with time on the x-axis and temperature on the y-axis. Built using the Vega-Lite API 2, the chart leverages `vl.markArea`, `vl.x().fieldT`, and `vl.y().fieldQ` to encode temporal and quantitative fields. It pulls data via `d3.csv` from a gist URL, registers Vega and Vega-Lite, and renders interactively with a tooltip handler, while custom axis and label styling improve readability.

Oct 14, 2021

Loading thumbnail…

10.-Vega-Lite API Template

This example shows the relationship between car origin and horsepower using a scatter plot of the auto-mpg dataset, with vehicle names displayed as tooltips. The visualization is built entirely through the Vega-Lite API, which constructs a specification programmatically via `vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`, and `vl.tooltip()`. The code registers Vega, Vega-Lite, and Vega-Lite API, then renders the chart as an SVG with `vl.register` and `marks.render()`, using custom axis and label styling from the config object. Data is loaded asynchronously with `d3.csv` from a GitHub gist.

Oct 14, 2021

Loading thumbnail…

9.-Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset in a React application using D3 utilities. It fetches named CSS color data from a GitHub gist via `d3.csv` and stores the parsed rows in React state with the `useState` and `useEffect` hooks. While the data loads, the app displays a "Loading..." message; once received, it uses the `message` function to report the dataset’s size in kilobytes (via `d3.csvFormat`), row count, and column count in a large monospace `<pre>` element.

Oct 14, 2021

Loading thumbnail…

8.-Loading and Parsing CSV Data 2

This example loads a CSV file of CSS named colors from a GitHub gist and displays summary statistics about the dataset. The page reports the file size in kilobytes, the total number of data rows, and the number of columns. It uses `d3.csv` to fetch and parse the remote CSV, then calls `d3.csvFormat` to measure the formatted data length. A commented alternative demonstrates `fetchText` with `d3.csvParse`.

Oct 12, 2021

Loading thumbnail…

7.-Mouse Follower (React)

A bright circle trails the user's pointer as it moves across an SVG canvas, resetting to the canvas center on load. The React app tracks mouse coordinates with `useState` and an `onMouseMove` event handler, updating the circle’s `cx` and `cy` attributes. It uses D3 v7 for SVG rendering within a React 17 UMD setup, with the circle’s position bound directly to the pointer’s client coordinates.

Oct 11, 2021

Loading thumbnail…

6.-Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in the browser using the Fetch API. It fetches a remote CSV file listing CSS named colors from a GitHub gist and logs the raw text content to the console. The code uses an asynchronous `fetchText` function that awaits the response and converts it to text via `response.text()`. No actual parsing, visualization, or DOM manipulation occurs; the example serves purely as a basic demonstration of retrieving external tabular data for later use in a web application.

Oct 11, 2021

Loading thumbnail…

5.-Happy face (React and D3 3)

This example shows a grid of 18 randomly generated happy faces rendered as SVGs using React and D3 v7. Each face, composed of a yellow background circle, two eyes, and an arc-based mouth, is created with custom React components like FaceContainer, BackgroundCircle, Eyes, and Mouth. The D3 arc generator constructs the smile path from random mouth radius and width values. The React app maps over a d3.range array to produce multiple faces with randomized eye offsets, positions, and sizes.

Oct 11, 2021

Loading thumbnail…

3.-Happy face (React and D3 1)

A React and D3.js example renders a smiling face as an SVG composition. The code defines fixed dimensions for the head, eyes, and mouth using arcs and circles. The face is drawn with a yellow outer circle, black stroke, and coordinate offsets for eye placement. The mouth is generated via `d3.arc()` with specified inner and outer radii and angular start and end points. React handles the SVG elements declaratively, while D3 provides the path generation for the curved mouth. The visualization demonstrates a simple, static graphic without interactivity or data binding.

Oct 11, 2021

Loading thumbnail…

4.-Happy face (React and D3 2)

A smiling face is drawn as a yellow circle with black outlines, featuring green elliptical eyes, angled black eyebrows, and a brown mouth with a pink inner curve. Built with React and D3 v7, the SVG graphic uses d3.line with curveCardinal to generate the mouth paths, while circles, lines, and ellipses define the face features. The app renders into the root div using ReactDOM, with static coordinate constants positioning elements relative to the canvas center.

Oct 11, 2021

Loading thumbnail…

2.-Happy face (React)

This example renders a cheerful yellow face as an SVG graphic within a React application. The face consists of a large yellow circle with a black stroke, two black eyes positioned symmetrically, and a mouth drawn as an arc using the `d3.arc` helper from D3 v7. React 17 constructs the SVG elements declaratively, while D3’s arc generator builds the mouth path with user-defined inner and outer radii and start/end angles. The layout is fixed, with coordinates computed relative to the center of the canvas. The data is hard-coded in the JavaScript source rather than loaded from an external dataset.

Oct 11, 2021

Loading thumbnail…

1.-Happy face (html)

A single yellow circle with a black outline and two smaller black circles creates a simple happy face. The face is drawn using an SVG element that is 960 by 500 pixels. The main circle is centered with a radius of 240, while the eyes are positioned to the left and right of the center, using the `cx`, `cy`, and `r` attributes. The example uses raw SVG markup directly in an HTML file, with no external JavaScript libraries or data sources.

Oct 11, 2021