marquesjr79

@marquesjr79·7 public vizzes

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting fuel efficiency against horsepower. Each circle encodes vehicle origin through color and weight through size, with hover tooltips revealing model names. The visualization uses the Vega-Lite API to declaratively specify the chart, while D3.js (d3.csv) handles data loading. The code leverages vega-lite-api’s `vl` builder to chain mark and encoding specifications, with vega-tooltip providing interactive legends and tooltips.

Mar 12, 2022

Loading thumbnail…

Vega-Lite API Temperatura

This bar chart visualizes population by country for 2015, with bars sorted in descending order and tooltips displaying exact population values on hover. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification through methods like `markBar()` and `encode()`. Data is loaded asynchronously via `d3.csv` from a Gist hosted CSV file, and the chart renders to SVG using Vega. Custom styling is applied through a configuration object to adjust axis labels, ticks, and tooltip appearance.

Jan 10, 2022

Loading thumbnail…

Vega-Lite API Modelo

A scatter plot displays auto-mpg data, mapping origin to the x-axis, horsepower to the y-axis, weight to color, and mpg to circle size for each vehicle model. Built with the Vega-Lite API, the visualization uses `vl.markCircle` with encoded fields and tooltips, while the data loads via `d3.csv` from a UCI Machine Learning Repository gist. The rendered output adapts to the window dimensions using `window.innerWidth` and `window.innerHeight` with a fit autosize, and the `vega-tooltip` handler provides interactive hover details.

Jan 10, 2022

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL, logging the raw text to the browser console. The code uses the Fetch API to retrieve the file from a GitHub gist containing CSS named colors, then calls `response.text()` to extract the CSV content. The `async`/`await` syntax handles the asynchronous request, and the resulting text is displayed via `console.log`. No data transformation or visualization is performed beyond this initial fetching and logging step.

Jan 7, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part V

Fifteen identical smiley faces, each rendered as a yellow SVG circle with a black stroke, black eyes, and a curved mouth, are stacked on top of one another. The code uses React components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` to build each face, while `d3.arc` generates the mouth path. A `range` from d3 creates the array of faces, and random eye radii add slight variation.

Jan 7, 2022

Loading thumbnail…

Fork of Smiley Face Part IV

This gallery example renders a classic smiley face using React and D3.js v7. The face is composed of SVG primitives: a yellow circular background, two offset black circles for eyes, and a mouth drawn as an arc path. The mouth leverages D3's `arc` function to generate a semi-circular shape with specified inner and outer radii and angular span. All face components—background, eyes, and mouth—are assembled within a React component hierarchy and positioned via a central SVG group. The layout uses a computed center point and offsets for each facial feature to maintain a balanced, recognizable expression.

Jan 7, 2022

Loading thumbnail…

Smiley Face Part I

A yellow smiley face is drawn using SVG circles and an arc for the mouth, centered within a square viewport. The face is constructed with React, leveraging `d3.arc` to define the mouth’s path, while the eyes and head are simple circle elements. The rendering uses SVG with D3’s `arc` API for the curved mouth, with all coordinates computed relative to the canvas center.

Jan 7, 2022