Aki78

@Aki78·7 public vizzes

Fork of React Import d3 Data True

This example displays a colorful stacked list of horizontal bars representing every named CSS color from a CSV file loaded via d3.csv(). Each bar uses the color’s 'RGB hex value' as its background, with data fetched asynchronously and rendered through React components. The visualization demonstrates loading external CSV data with d3.csv() and mapping that data to React div elements, showing a simple, data-driven color spectrum without any interactive features.

Jun 5, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile attributes by plotting engine displacement against horsepower, with each point representing a vehicle and tooltips revealing the car’s name. Built using the Vega-Lite API, it registers Vega and Vega-Lite, fetches data from a CSV via d3’s `csv` method, and renders an SVG chart. The visualization uses custom axis and label styling from a configuration object, with marks as semi-transparent points sized at 90 pixels. It leverages `vl.markPoint`, `vl.x().fieldQ`, and `vl.y().fieldQ` for quantitative encodings, and fits the chart to the window dimensions.

Jun 5, 2021

Loading thumbnail…

React Import d3 Data

This example shows a React-based interactive face built with SVG. A single circle is rendered inside a 960 by 500 pixel SVG element, and its position is updated in real-time based on the mouse cursor's coordinates. The implementation uses React's `useState` and `useCallback` hooks to manage the mouse position state and handle `onMouseMove` events. The SVG circle is redrawn with new `cx` and `cy` attributes as the mouse moves, while the `ReactDOM.render` function mounts the application into the root HTML element.

Jun 5, 2021

Loading thumbnail…

Importing Data

This example demonstrates how to import and parse CSV data in a React-based visualization using D3 v5. It fetches a remote CSV file containing CSS named colors and displays the file size in kilobytes on the page. The code uses the `fetch` API to retrieve the data, `d3.csv` to parse it, and `d3.csvFormat` to calculate the formatted output length. A large CSS font size (13em) makes the resulting word count visually prominent, showing a minimal but functional data-import workflow.

Jun 5, 2021

Loading thumbnail…

Fork of Hello Vega Lite API

A scatter plot of US zipcodes rendered on an Albers USA projection, colored by the first two digits of the zip code to reveal regional clustering. Built with the Vega-Lite API and D3, it uses `vl.markCircle`, `vl.project`, and `vl.longitude`/`vl.latitude` encodings, with a custom D3 `hcl` color scale. The visualization is drawn to a HiDPI Canvas with a scale factor of 3 for retina display support, using data from the Vega Datasets collection.

Jun 3, 2021

Loading thumbnail…

Fork of Cities on a Globe

An interactive SVG globe shows the world’s cities with over 100,000 inhabitants, sized by population; hovering reveals names and counts. Panning by dragging and zooming via the mouse wheel or pinch gestures rotates the orthographic projection, with lower-resolution country boundaries during active motion. The visualization uses d3.geoPath, d3.geoOrthographic, d3.drag, d3.zoom, and d3.queue to load and project GeoJSON from world-atlas and CSV population data from Geonames.

Jun 3, 2021

Loading thumbnail…

Smiley Face Part I

Two smiling eyes and an arched mouth complete a yellow circle, producing a simple cartoon face. Built with React components and rendered as SVG, the example composes a background circle, offset eye circles, and a mouth path generated with the d3 `arc` generator. The d3-shape `arc` function creates the mouth’s curved outline, while React’s component structure passes fixed coordinate values for eye offset and mouth dimensions. The face is centered via an SVG group transform, with nested components defining each facial feature.

Jun 3, 2021