jacoyat08

@jacoyat08·4 public vizzes

Vega-Lite API Template

A scatter plot shows the relationship between pressure and acceleration, with tooltips revealing each point's name. Built with Vega-Lite API, it loads CSV data from a remote GitHub repository using d3.csv. The visualization uses Vega and Vega-Lite libraries, configures axes and label styling, and renders as a full-window SVG with interactive tooltips from vega-tooltip.

Feb 20, 2020

Loading thumbnail…

Scatter Plot with Layers

An interactive scatter plot maps sound effects as colored, draggable circles organized by category using a custom legend. Clicking a circle plays its corresponding audio file, while hover reveals the name via a tooltip. The visualization supports zooming, panning, and keyboard controls to pause playback. Built with D3 v5, it uses SVG for rendering and the Web Audio API alongside jQuery for sound management.

Feb 17, 2020

Loading thumbnail…

React and bar chart Black Box approach

A React-based bar chart displays population statistics for ten countries, sourced from a CSV file. The visualization uses d3.csv to load and preprocess data, then builds a horizontal bar chart with d3.scaleLinear and d3.scaleBand scales. React manages component state and lifecycle through useState and useEffect hooks, while D3 handles SVG rendering and axes via d3.axisLeft and d3.axisBottom. The code demonstrates a black-box approach where D3's imperative DOM manipulation occurs within useEffect, separated from React's declarative rendering of the Svg container.

Feb 17, 2020

Loading thumbnail…

React and bar chart Black Box approach

This visualization presents a horizontal bar chart of country populations, ordered by country name, with the United States listed twice due to duplicate entries in the CSV file. Built with React 16 and D3 v5, the example demonstrates a "black box" approach where D3 directly manipulates the SVG DOM within React’s `useEffect` hook, bypassing React’s virtual DOM. It uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for scales, and `axisLeft` and `axisBottom` for axes, rendering into an SVG element via `select` and `append`.

Feb 17, 2020