Victor Henriquez

@VictorHenriquez·7 public vizzes

Fork of Stylized Bar Chart

This fork of a stylized bar chart displays the top 10 most populous countries using UN World Population Prospects 2019 data. It renders horizontal bars in SVG with React, using d3.scaleBand and d3.scaleLinear for positioning, and formats population ticks with d3.format. The chart includes styled axes, a "Population" label, and native `<title>` tooltips showing values, all styled with the Poppins font.

Sep 23, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays a pie chart of CSS named colors, where each slice is filled with the exact color it represents. Using D3 utilities `d3.csv`, `d3.pie`, and `d3.arc`, it loads color data from a GitHub gist and computes the pie geometry. React 16 with hooks manages the asynchronous data loading and renders the resulting SVG paths. The visualization shows all CSS colors arranged in a full circle around a central point.

Sep 22, 2022

Loading thumbnail…

Rendering Data with React & D3

This example shows a vertical sequence of horizontal color bars representing CSS named colors, loaded from a CSV file of named color hex values. The React component uses the `useState` and `useEffect` hooks to fetch the data asynchronously via D3’s `csv` function, displaying a "Loading..." message until the data arrives. Once loaded, each row is rendered as a `<div>` whose background color is set to the corresponding `RGB hex value` from the dataset, with a fixed width and height. The visualization relies on React’s declarative rendering rather than D3’s DOM manipulation, combining React state management with D3’s data-loading utilities.

Sep 22, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with each point sized and colored to reveal density and labeled by car name via tooltips. The visualization is built using the Vega-Lite API (vl) combined with D3’s csv loader to fetch the auto-mpg dataset from a GitHub Gist. The code configures axis styling, a dark color scheme, and an interactive tooltip handler, then renders the chart to fill the browser window using Vega’s SVG renderer.

Sep 19, 2022

Loading thumbnail…

Fork of Vega-Lite API Template2

This visualization displays automobile performance data from the UCI Machine Learning Repository, plotting miles per gallon against horsepower for individual car models. Points are colored by region of origin and sized according to vehicle weight, with tooltips revealing model names. The implementation uses the Vega-Lite API combined with Vega and Vega-Lite libraries, with D3’s `csv` function loading the dataset. The chart is configured for full-window rendering, with axis styling and dark text customized in the configuration file.

Sep 19, 2022

Loading thumbnail…

Smile Face Part1

A single yellow circle with a thick black outline renders in the center of an SVG canvas. The example demonstrates the initial step of constructing a smiley face, showing only the head shape without facial features. Built with React and ReactDOM, the code uses vector graphics primitives, specifically the SVG `circle` element, to define the shape with explicit center coordinates, radius, fill color, and stroke properties. The `cx`, `cy`, and `r` attributes are set directly in the React component's JSX.

Aug 31, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays a bare HTML page with an embedded YouTube video and no visible data visualization. The code uses standard HTML markup with a `<title>` element and an empty `<body>`, relying on the iframe API to load external video content. It does not employ any JavaScript libraries such as D3 or Three.js, nor does it render charts or graphs. The page serves as a minimal template for integrating multimedia, with the video as the sole interactive element.

Aug 31, 2022