ArubaKLM

@ArubaKLM·8 public vizzes

Fork of Polished World Map

This visualization displays Major League Baseball stadiums on a polished map of the United States, with circles sized according to stadium capacity and colored by division. Built with React and D3 v5, it uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries and interiors from US Atlas TopoJSON data. The map loads stadium coordinates, capacities, and divisions from a CSV file, applying `d3.scaleSqrt` for circle sizing. Interactive dropdown menus allow filtering by division, supported by React state management and custom axis and legend components.

Jan 28, 2023

Loading thumbnail…

MLB Parks

This interactive scatterplot visualizes Major League Baseball stadiums, plotting each park's opening year on the x-axis against a user-selected attribute (capacity, construction cost, or opening year) on the y-axis. Points are color-coded by roof type using a d3.scaleOrdinal and SVG circles with native tooltips. Built with React and D3 v7, the visualization uses d3.csv for data loading, d3.scaleLinear for axes, and custom React components for axes and legend rendering. A dropdown menu allows switching between different y-axis attributes.

Jan 17, 2023

Loading thumbnail…

MLB Parks

This example displays a summary of the CSS Named Colors dataset as a text message, showing its size in kilobytes, the number of rows, and the number of columns. It loads and parses a remote CSV file using `d3.csv()`, then formats the result with `d3.csvFormat()` to compute the byte size. The page uses React and D3 v5, with the parsed data rendered directly into the DOM via `textContent`.

Jan 16, 2023

Loading thumbnail…

stylized scatter plot

This stylized scatter plot displays the Iris dataset, with petal length on the x-axis and sepal width on the y-axis, using colored circles to represent individual flowers. Built with React and D3 v5, it renders as SVG with custom axis components and a dropdown menu to switch between different x-axis attributes. The visualization uses d3.scaleLinear for scaling, d3.extent for domain calculation, and d3.csv for data loading, with CSS styling from the Poppins font family and a teal color for the marks.

Jan 12, 2023

Loading thumbnail…

This example shows a smiley face rendered as a yellow circle with two black eyes and an open mouth, centered on the screen and sized to the browser window. The face is built entirely with React and SVG elements, using inline circle components for the head, eyes, and mouth. The code defines numeric constants for eye offset, eye radius, mouth width, and mouth radius, then applies them within JSX. React 16.9 renders the SVG markup directly into the DOM, with the face scaling to fill the viewport height and width.

Jan 12, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a minimal interactive visualization of a single circle centered on the screen, rendered as an SVG element that spans the full browser window. As the mouse moves over the SVG, the `handleMouseMove` event logs the cursor’s x and y coordinates to the console. Built with React 16.9.0 and ReactDOM, it uses the onMouseMove prop to capture pointer events and updates the viewport dimensions via `window.innerWidth` and `window.innerHeight`. The circle’s radius is fixed at 30 pixels, and no other data or animation is present.

Dec 28, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL using the Fetch API within an asynchronous function. The program fetches a dataset of CSS named colors and logs the parsed text to the browser console, displaying raw output in a large `<pre>` element. It relies on vanilla JavaScript promises and async/await syntax, with D3 v5 loaded via CDN but not yet used for visualization. The visualization remains minimal, focusing on the data-loading workflow rather than graphical rendering.

Dec 28, 2022

Loading thumbnail…

HEllo HTML

A yellow SVG face renders in a React component, featuring a circular background, two eyes, and a mouth drawn with the d3.arc path generator from d3. The face is centered in a 960x500 viewport, with all geometry specified via constants for offsets, radii, and stroke widths. React 18 and ReactDOM manage the SVG output, while CSS styles a separate "Hello HTML!" message behind it. The example combines React's declarative component structure with D3's arc API for precise shape construction, demonstrating a minimal hybrid approach.

Dec 28, 2022