JoseIGuzman

@JoseIGuzman·6 public vizzes

Rendering Data with React and D3 2

This example displays a horizontal bar chart of the top 10 countries by 2020 population, using data loaded from a CSV file via D3’s `csv` utility. It combines D3’s `scaleBand` and `scaleLinear` to map country names and population values to SVG `rect` elements, while React’s `useState`, `useEffect`, and `useCallback` manage the asynchronous data loading and rendering state. The chart updates only after the data arrives, showing a static list of bars scaled to the maximum population value.

May 10, 2021

Loading thumbnail…

Rendering Data with React and D3 1

This example displays a vertical stacked bar chart of CSS named colors, with each color rendered as a thin horizontal strip. The visualization loads a CSV dataset of named CSS colors from a remote URL using D3’s `csv` utility, then stores the parsed data in React state via the `useState` and `useEffect` hooks. Once loaded, the app maps each color record to a React `<div>` element, setting its background color from the `RGB hex value` column and fixing its dimensions to create the stacked effect. The code combines React 16.9 for component rendering and state management with D3 v5 for data fetching and parsing.

May 10, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between vehicle weight, horsepower, and fuel efficiency across different countries of origin, using a bubble chart where each point represents a car model. The data comes from the auto-mpg.csv dataset, loaded via d3's csv method. Built with the Vega-Lite API, it registers both Vega and Vega-Lite libraries, and constructs the plot using vl.markCircle with encodings for x, y, color, size, and tooltip. The visualization is rendered as an SVG, with custom config styling for axes and guide labels, and includes an interactive tooltip via the vega-tooltip Handler.

Apr 30, 2021

Loading thumbnail…

Interaction with React

A React component tracks the mouse and draws a circle that follows it across an SVG canvas. The code uses React’s `useState` and `useCallback` hooks to store and update the cursor’s coordinates, and `ReactDOM.render` to mount the app. It renders a single SVG `<circle>` element whose `cx` and `cy` attributes are bound to the current mouse position.

Apr 30, 2021

Loading thumbnail…

Let's Make a Face React

This example renders a yellow smiley face built from reusable React components, including a circular background, two eyes, and an arc-based mouth. The face is centered within an SVG container using a translated `<g>` element. The code uses React 17 and D3 v6, with the mouth path generated via the `d3.arc()` API. The visualization is static, but the component-based structure allows easy customization of facial features and dimensions through props.

Apr 30, 2021

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black outline is centered in an SVG canvas, flanked by two smaller unfilled circles to its upper left and right. The example demonstrates basic SVG shape rendering within an HTML page, using no JavaScript libraries. The rendering relies solely on inline SVG elements and CSS to position the shapes, with the page styled to remove margins and hide overflow. It serves as a minimal fork of the classic "Hello HTML" example, showcasing static vector graphics.

Apr 29, 2021