Mateusz Urban

@MateuszUrb·8 public vizzes

Fork of HTML Starter

This example displays a bar chart of categorical data, showing the number of votes for six color categories. It uses the Chart.js library to render the visualization on an HTML canvas element. The chart is configured with colored bars, borders, and a y-axis that begins at zero, using the `Chart` constructor with a bar type and associated datasets. The data is hardcoded within the script.

Mar 7, 2021

Loading thumbnail…

Loading Data with React & D3

A smiling face is rendered as a multi-colored donut chart using React and D3, with each slice filled by a distinct CSS color from a remote CSV dataset. The example demonstrates data loading with `d3.csv` inside a React `useEffect` hook, showing a loading state until the data arrives. The visualization computes an arc path for each CSV row using `d3.arc` and `d3.pie`, positioning the chart via an SVG `<g>` transform. React manages the component state and renders the SVG elements.

Mar 7, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js version 6, displaying a summary of the loaded dataset. It fetches a CSS Named Colors CSV file from a GitHub gist and shows the file size, row count, and column count in large text. The primary implementation uses `d3.csv` with a promise-based `.then()` callback to handle the parsed data. Alternative commented-out approaches include using `fetch` with `async`/`await` and `d3.csvParse`, as well as a nested fetch chain, illustrating different ways to handle asynchronous data loading.

Mar 7, 2021

Loading thumbnail…

Untitled

This example demonstrates the raw output of fetching and displaying a CSV file of CSS color names and values directly in the browser. The page shows the entire comma-separated data as plain text on a large canvas. The code uses the native `fetch` API to retrieve the remote CSV, then calls `document.write()` to render the response. No D3 or other visualization libraries are involved; it is a minimal React starter project that highlights asynchronous data loading and parsing.

Mar 7, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between health, population, and geographic region using a bubble scatter plot. Data from a CSV file containing income and health metrics is loaded via d3.csv, then rendered as circles whose size represents population and position reflects health scores across regions. The chart is built using the Vega-Lite API, with vega-lite-api handling mark encoding and vega-tooltip providing interactive hover details. Custom configuration in config.js adjusts axis styling and font sizes to improve readability against the dark theme.

Mar 7, 2021

Loading thumbnail…

Follow mouse position

A smiling face is rendered as a static SVG graphic, centered within the browser window. The example demonstrates how to build a reusable React component using JSX to represent SVG elements like circles for the face, eyes, and mouth. It relies on React and ReactDOM to mount the component, with dimensions and positions derived from `window.innerWidth` and `window.innerHeight`. The visualization is purely presentational, with no interactive behavior or data binding.

Mar 7, 2021

Loading thumbnail…

Fork of React + D3 Viz Starter

This visualization gallery example presents a blank React application built with D3, using CDN links for React, ReactDOM, and D3. The code defines a `VizContainer` component that abstracts SVG and group elements, following the standard margin convention. It renders a 960 by 500 pixel SVG canvas with inner and outer rectangles that visualize the plotting area boundaries. The boilerplate sets up variables for dimensions and margins, with the `showMargins` prop toggleable to display or hide these reference rectangles. No actual data or chart is rendered, only the container structure.

Mar 7, 2021

Loading thumbnail…

Smile face

This example renders a yellow smiley face in an SVG using React and D3. The face is composed of a background circle, two eyes, and a mouth, all positioned relative to a center point. The mouth path is generated with the D3 `arc()` function, which creates a curved shape based on specified radii and angles. The React components structure the SVG elements, while D3 handles the geometric calculations for the mouth's arc. The illustration demonstrates a simple, modular approach to building shapes with reusable React components.

Mar 6, 2021