GeneralHummel

@GeneralHummel·3 public vizzes

Bar Chart

This bar chart displays the top 10 countries by estimated 2020 population, using horizontal bars ranked from largest to smallest. The visualization loads CSV data from a GitHub gist, which is parsed with `d3.csv` and structured in React state via a custom `useData` hook. The x-axis uses a `d3.scaleLinear` range mapped to population values, while the y-axis uses a `d3.scaleBand` for country categories. SVG elements are generated by React components for axes and marks, with `d3.format` applied to abbreviate tick labels.

Aug 9, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a Vega-Lite API bar chart displaying job counts by job number and card type for a factory in New York. The stacked bars use color to distinguish card types (CDL vs. DL) and include tooltips showing the summed count per category. The visualization is built with the Vega-Lite API, which wraps the Vega and Vega-Lite libraries, and uses vega-tooltip to handle interactive hover details. Static data is defined inline in JavaScript, and the chart is rendered as an SVG that automatically fits the full browser window.

Aug 8, 2021

Loading thumbnail…

Smiley Face Part 1

A yellow smiley face with black outlined eyes and a curved mouth is rendered as an SVG inside a React component. The code uses d3.arc to generate the mouth path, while the circle elements for the face and eyes are created directly with JSX. The face and features are positioned relative to a central transform using width and height constants, with a stroke width of 10 pixels applied to the background circle. The example demonstrates combining React’s declarative rendering with D3’s geometry utilities for SVG shapes.

Aug 8, 2021