Hgeginat

@Hgeginat·11 public vizzes

Sunburst 2

This interactive sunburst diagram displays hierarchical data from the flare dataset, with each ring representing a level of the hierarchy and arc size proportional to node value. Clicking a node zooms into that branch, animating the layout through an SVG transition. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, with `transition.attrTween` handling the zoom animation and `d3.interpolate` for smooth arc morphing. Labels rotate and fade based on visibility, while a central circle resets the view.

Jun 13, 2022

Loading thumbnail…

cookies sunburst

A zoomable sunburst chart visualizes the hierarchical flare dataset, with arcs sized by value and colored by top-level category. Clicking a node zooms to focus on that branch, while a central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for geometry, with animated transitions via `transition.attrTween` and `d3.interpolate`. Labels rotate and fade based on arc visibility. Data loads asynchronously from the `@observablehq/flare` module.

Jun 13, 2022

Loading thumbnail…

Loading data in D3

This example demonstrates asynchronous data loading and rendering in D3 with a React front end. It fetches a CSV file of named colors from a GitHub gist using the `d3.csv` API, displaying each row as a colored `<div>` block once the data arrives. The page initially shows a "loading..." placeholder until the promise resolves, then maps each CSV entry to a styled HTML element whose background color is set from the `color` field. The code uses React hooks (`useState`, `useEffect`) to manage state and trigger the D3 request.

Apr 4, 2022

Loading thumbnail…

Fork of Loading data in D3

This example demonstrates a React-based data visualization that loads a CSV file of named CSS colors and renders each color as an arc segment in a partial donut chart using SVG paths. The code fetches the external CSV file with d3.csv, then maps each row to a path element using the d3.arc generator with a fixed outer radius and angle range. The fill color for each path is taken directly from the CSV’s “RGB hex value” column, showing the complete dataset without additional aggregation.

Mar 24, 2022

Loading thumbnail…

Pie based on color palette

This visualization appears to be a pie chart generated from a CSV of named colors, which it loads asynchronously and parses using D3’s `csv` function. The React app maps each color row to a small square div, using the row’s hexadecimal color value as the background, though the chart layout itself is not yet implemented. The page renders via SVG, though the current code returns only a loading message before mapping data to unstyled divs. The example demonstrates a D3-v7 and React integration, pulling data from a Gist-hosted CSV.

Mar 22, 2022

Loading thumbnail…

Vega-lite - template

This example uses Vega-Lite to render an area chart with yearly time on the x-axis and a non-zero-based quantitative total on the y-axis, with tooltips showing temperature values. The visualization is built programmatically using the `vega-lite-api` library, which registers Vega and Vega-Lite to produce an SVG. Data is loaded asynchronously from a remote CSV file using `d3.csv`. The chart fills the window and applies custom axis and label styling from a config object, with tooltips provided by the `vega-tooltip` Handler.

Mar 22, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, and weight for various car models, with the country of origin represented by color. Built using the Vega-Lite API, it loads data from the UCI Auto MPG dataset and renders circles with a fixed size and opacity. The visualization leverages `vl.markCircle` and `vl.encode` for encoding, while `window.innerWidth` and `window.innerHeight` determine the canvas size. The code uses `d3.csv` for data ingestion and a custom `config` for axis styling, with tooltips handled via vega-tooltip. The visualization is generated dynamically and appended to the document body.

Mar 21, 2022

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse a CSV file using D3’s `d3.csv` method, then displays basic dataset statistics in a large-format `<pre>` element. It shows the file size in kilobytes, the total row count, and the number of columns from the parsed data. The visualization uses the D3 v7 library, fetching data from a GitHub Gist URL containing named CSS colors. The code formats the raw data with `d3.csvFormat` to compute its size and accesses the parsed array’s `length` and `columns` properties to populate the text output.

Mar 21, 2022

Loading thumbnail…

mouse follower

A single static circle floats over an empty SVG canvas, positioned at coordinates (600, 180) with a radius of 50 pixels. The example uses plain SVG markup inside a 960-by-500 viewport, with no JavaScript, data binding, or interaction handlers. It demonstrates the minimal structure required to render a basic shape, as indicated by the title and the comment "Half way towards a smiley face," suggesting a starting point for further animation. The rendering relies solely on native SVG elements without any external libraries.

Mar 18, 2022

Loading thumbnail…

mouse follower

This example displays a static "Hello HTML!" message centered on a plain page. It demonstrates a minimal setup for rendering text with CSS styling, using a 13em font size and text alignment for visual prominence. The code relies on basic HTML structure and CSS rules without any interactive or dynamic behavior. No JavaScript, data sources, or external libraries are involved; the page functions solely as a static visual output.

Mar 18, 2022

Loading thumbnail…

Smiley face part 1

A partially constructed smiley face is drawn using React and SVG, composed of a grey circular background with a black stroke, two black eyes, and a curved mouth. The mouth is generated with d3’s `arc` generator, using specified inner and outer radii and angular limits. All components are assembled within a React component that centers them via an SVG group transform, with coordinates and dimensions passed as props. The visualization demonstrates a modular, prop-driven approach to combining SVG primitives and D3 geometry in a React environment.

Mar 18, 2022