tim10133222

@tim10133222·10 public vizzes

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, using data from the United Nations World Population Prospects 2019. React renders SVG elements, while D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting (`format`) handle layout and tick labels. The chart includes custom axis components, tooltips via SVG `<title>` elements, and a loaded CSV dataset processed with `d3.csv`.

Jan 30, 2023

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as a horizontal bar chart, with bars extending from a blank left edge and no axes or labels. Loaded from a United Nations World Population Prospects 2019 CSV, the data is parsed with d3.csv and scaled using d3.scaleBand and d3.scaleLinear. Rendered as SVG rectangles within a React component, the chart uses d3.max to compute the population range and maps each country to a bar width proportional to its 2020 population.

Jan 16, 2023

Loading thumbnail…

D3 Bar Chart

This interactive bar chart displays United Nations population estimates for 2020 across ten countries, with horizontal bars scaled proportionally using d3.scaleLinear and d3.scaleBand. Built with React and D3 v5, it loads CSV data via d3.csv, converts population strings to numbers, and renders SVG rectangles. The chart updates reactively through React hooks (useState, useEffect, useCallback) asynchronously fetching data from a GitHub gist URL.

Jan 3, 2023

Loading thumbnail…

D3 Color pie

This example visualizes the 148 named CSS colors as a single pie chart, where each slice represents one color and is filled with that color's RGB hex value. The chart is rendered using React and D3 v5, with data loaded from a CSV file hosted on GitHub. The pie layout is computed with `d3.pie()` using a constant value of 1 per row, and each slice is drawn as an SVG path via `d3.arc()`, centered within a predefined 960×480 viewport.

Jan 3, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, with color representing the origin of the car, and point size mapped to vehicle weight. Tooltips display the car model name on hover. The code explicitly registers Vega, Vega-Lite, and Vega-Tooltip, then asynchronously loads CSV data via `d3.csv`, applies a custom `config` for axis labels and styling, and renders a full-window SVG using `vl.mar` with size and opacity encodings.

Jan 2, 2023

Loading thumbnail…

Fork of HTML Starter

This example presents a static web page that displays the text “Hello HTML!” in large, centered type. It demonstrates a minimal setup using raw HTML with embedded CSS and JavaScript, without any external libraries or data sources. The styling is defined within a `<style>` block, applying a font size of 13em and text alignment to the `.message` div. The page’s content and presentation are fully self-contained, illustrating the fundamental structure of a basic HTML document.

Jan 2, 2023

Loading thumbnail…

Loading anr parsing CSV Data

This example demonstrates how to load and parse CSV data with D3 v7, displaying the file size, row count, and column count as large text. It fetches a remote CSV file containing CSS named colors using the Fetch API, then parses the raw text with `d3.csvParse`. The resulting data array and column metadata are accessed through the parsed object, and the summary metrics are written into a pre element using vanilla JavaScript DOM manipulation. The visualization is minimal, focusing purely on the data-loading pipeline rather than graphical rendering.

Jan 2, 2023

Loading thumbnail…

Interactive circle

This example shows how a user’s pointer position directly controls the placement of a single circle within an SVG canvas. As the mouse moves over the full-width, full-height SVG, the circle centers itself exactly at the cursor’s client coordinates. Built with React (using the `useState` and `useCallback` hooks) and D3 v7 for rendering, the app updates the circle’s `cx` and `cy` attributes through React state changes triggered by the `onMouseMove` event. The visualization demonstrates a simple, responsive interaction pattern without external data sources.

Jan 1, 2023

Loading thumbnail…

Fork of HTML Starter

A grid of 10 cartoon faces renders in SVG via React components, each with a yellow circular background, magenta eyes, and a smile drawn using a D3 arc path. The faces vary randomly in eye radius and mouth dimensions per render, generated using `Math.random()` within the React `App` component. D3 v7 provides the `arc` generator for the mouths, while React functional components like `BackgroundCircle`, `Eyes`, and `FaceContainer` assemble the SVG elements. The code uses React 18 with `ReactDOM.render` to mount the visualization into the page.

Jan 1, 2023

Loading thumbnail…

Fork of Hello Package.json

This example showcases a custom package.json setup in VizHub that enables ES6 imports of React and D3 libraries without manual script tags. The app renders a large "Hello package.json" message using ReactDOM, while the package.json defines dependency versions and maps library names to browser globals via the vizhub.libraries field. It also specifies an ISC license.

Jan 1, 2023