B

blueyjuice

@blueyjuice·38 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst diagram visualizes the hierarchical structure of the Flare data set, using nested arcs to represent each node's size and depth. Users click an arc to re-center the visualization on that subtree, with a smooth animation transitioning the layout. Built with D3 v5, the code uses `d3.partition`, `d3.arc`, and custom transition logic via `transition.attrTween` to smoothly interpolate arc geometry and label positions. The visualization renders as SVG with interactivity driven by click events on the arcs and a central circle.

Loading thumbnail…

Fork of Fork of Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical flare dataset, showing nested categories as concentric arcs whose angular width encodes value. Clicking an arc zooms into that subtree with a smooth 750ms transition, while a central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and geometry, with `transition.attrTween` animating arc paths and label rotations. The data loads from the `@observablehq/flare` module via the Observable runtime and renders as SVG with a rainbow color scale.

Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, with each ring segment representing a node whose angular width and radial extent encode its value. Clicking any segment smoothly zooms and re-centers the view on that subtree, with labels and arc opacity transitioning via `transition.attrTween` and `d3.interpolate`. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG paths, while a custom color scale maps top-level categories to a rainbow palette.

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of the Flare software package hierarchy, where clicking an arc zooms into that subtree while the center circle returns to the root. D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` generate the radial layout with sequential rainbow coloring, while animated transitions update arc paths and labels via `transition.attrTween` and `d3.interpolate`. The data loads asynchronously from the `@observablehq/flare` dataset, and interaction relies on click handlers attached to SVG `path` elements.

Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

This visualization presents a zoomable sunburst of the Flare dataset, showing a hierarchical file structure as multi-level arcs. Rendered with SVG and animated transitions, users click any segment to make it the new root, smoothly redrawing the tree with D3 v5’s updated partition layout. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute geometry, while `transition.attrTween` and `d3.interpolate` animate the arcs and labels. Colors derive from `d3.scaleOrdinal` with an interpolated rainbow range, and the data loads asynchronously from the Observable Flare library.

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst chart visualizes the hierarchical structure of the Flare dataset, with arcs color-coded by top-level category and sized by value. Clicking a segment rotates and scales the visualization to focus on that subtree, using D3 v5 transitions and `transition.attrTween` to animate arc geometry and label positions. The chart renders with SVG, leveraging `d3.hierarchy`, `d3.partition`, and `d3.arc`, while loading data asynchronously via the Observable standard library and `require`.

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of its branches and leaves through concentric, angle-based arcs. Clicking an arc zooms in to display that node as the new root, with a smooth 750-millisecond transition animating the arcs and labels via `d3.arc` and `transition.attrTween`. The chart uses D3 v5's `d3.hierarchy`, `d3.partition`, `d3.scaleOrdinal`, and a quantized rainbow color scale, rendering as SVG. Labels rotate and flip to maintain readability, and center-clicking returns to the previous level.

Loading thumbnail…

Fork of Testing2

Tweets are arranged as horizontal slopegraphs, with each image anchored to a vertical baseline and lines connecting two sentiment scores per tweet. Thick gray lines show the shift between negative and positive scores, while emoji icons mark each endpoint. The visualization uses D3 v6 scales and axes to map scores from -1 to 1, with a static dataset of twenty Twitter images and their computed sentiment values.

Loading thumbnail…

Fork of Verdienststrukturerhebung 2018

A dumbbell plot compares median gross hourly earnings for women and men across Austrian occupational groups, with each pair connected by a line showing the percentage difference. Circles mark female and male values in contrasting colors, while tooltips reveal exact euro amounts on hover. The visualization uses React with D3’s `scaleLinear`, `scalePoint`, and `extent` to position marks, and reads data from a CSV via `d3.csv`. It includes custom axis components and static text labels for the before/after comparison.

Loading thumbnail…

Fork of Dumbbell Chart

The chart compares alcohol consumption before and after an intervention for individual patients, with paired circles connected by vertical lines. It uses React components for rendering SVG marks, axes, and grid lines, while D3 v6 utilities such as `scaleLinear`, `scalePoint`, and `extent` handle scaling and domain calculation. Data is loaded asynchronously from a CSV URL via `d3.csv` and filtered to 15 patients. The visualization employs a dumbbell chart layout to highlight changes per patient, with green and orange circles representing before and after values respectively.

Loading thumbnail…

Fork of Radar Analysis Test

This visualization displays nutritional data for two groups, "Before" and "After," using a multi-axis radar chart with 20 nutrient categories. The chart uses D3 v4 APIs such as `d3.lineRadial()`, `d3.curveLinearClosed`, and `d3.scaleLinear()` to draw concentric level lines, radial axes, and percentage labels. Each group is rendered as a semi-transparent, colored polygon with circles at data points, accompanied by an SVG legend. The hard-coded values, identical across both groups, suggest a template for comparing dietary intake profiles.

Loading thumbnail…

Fork of Radar de Competências

This fork of Nadieh Bremer’s radar chart visualizes ten economic-freedom indicators for two countries, though the current dataset includes only one series (self-assessment) and displays a comparison against a class average. The D3 v5 code draws a rounded, 10-axis SVG radar chart with five concentric levels, scaling each axis to a maximum value of one. The implementation uses `d3.scaleOrdinal` for colors, `d3.scaleLinear` for radial mapping, and `d3.format` to display percentages, with hardcoded data in the JavaScript source.

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries in 2020 using data from the UN World Population Prospects 2019, presented as horizontal bars labeled with country names and population values. The React-based visualization uses D3 v5 scales (`scaleBand` and `scaleLinear`) to position bars and axes, with population formatted in billions via D3’s `format` function. Styled with the Poppins font and turquoise bars, the SVG rendering includes axis tick lines, labels, and hover tooltips through native SVG `<title>` elements.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries in 2020, with horizontal bars ranked by population size. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, with formatted tick labels converting gigabyte units to billions. Data comes from the United Nations World Population Prospects 2019, loaded asynchronously via `d3.csv`, and each bar includes a native SVG `title` tooltip showing the exact population value.

Loading thumbnail…

Fork of Global Suicide Rates Linked Views with Fast Brushing

This interactive visualization links a world map and a time-series histogram to explore global suicide rates. It displays a natural Earth projection map with circles sized by suicide counts, alongside a monthly histogram of the same data. Users can brush across the histogram to filter the map’s displayed circles. The visualization uses React, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `histogram`, with data from a CSV file and country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection map. Circle size encodes population using a square root scale, with the largest cities reaching 15 pixels in radius. The map renders country boundaries and graticules using d3.geoPath with TopoJSON data from the World Atlas, while city coordinates come from a Simplemaps CSV. Built with React and d3.v5, the SVG map overlays scaled circles onto the projected geographic features, filtered from the complete world cities dataset.

Loading thumbnail…

Fork of Loading Data with React & D3

This example displays a rainbow of CSS named colors as a semicircular pie chart, with each color represented by a slice. The visualization loads data from a remote CSV file containing color names and hex values using D3’s `csv` utility, manages loading state with React’s `useState` and `useEffect`, and renders the result as SVG paths. The chart is generated with a D3 `arc` generator, mapping each data row to a `path` element filled with the corresponding hex value.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between Country and Recovered numbers from a Fat Supply Quantity dataset, using circles sized by recovery count. It is built with the Vega-Lite API, which generates charts through declarative specifications, and runs on D3.js v5 for data loading. The code uses `vl.markCircle`, `vl.x().fieldN()`, and `vl.size().fieldQ()` to encode categorical and quantitative fields, with custom configuration in `config.js` to adjust axis and label styling. Data is fetched asynchronously via `d3.csv`.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes COVID-19 recovery counts across countries, using colored and sized circles to represent the recovered cases per nation. Data is loaded from an Auto MPG dataset, though the visualization maps it to Country and Recovered fields. Built with D3.js and the Vega-Lite API, it registers Vega and Vega-Lite libraries, configures tooltips via vega-tooltip, and renders a scatter plot with a dark customization theme, scaling circles by recovery values.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of food supply data, plotting Alcoholic Beverages against Recovered values for different countries, with tooltips revealing country names. Built with the Vega-Lite API, it uses `vl.markCircle` and `vl.encode` to define the chart. The code loads data from a CSV file via d3.csv, and renders the visualization using the Vega, Vega-Lite, Vega-Lite API, and Vega-Tooltip libraries, with custom styling from a config object.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of global food consumption data from the UCI Machine Learning Repository’s Auto MPG dataset, sourced via a Gist. The visualization encodes Animal Products and Recovered values as x- and y-position, with color by country and point size by weight. It applies a custom dark-colored axis and label configuration, and uses Vega-Lite’s `markCircle`, `encode` with `fieldQ`, and `scale` methods, all rendered through Vega’s SVG view with tooltips from Vega-Tooltip.

Loading thumbnail…

Fork of Loading Data with React & D3

This example shows the data loading lifecycle in a React and D3 application, displaying a text summary of a CSV dataset’s size, row count, and column count. It demonstrates asynchronous data fetching using D3’s `csv` utility, where the result is stored in React state via `useState` and `useEffect`. Once loaded, the `message` function formats the file size, row, and column details. The visualization uses ReactDOM to render the output, with D3 v5 and React 16.9.0, pulling data from a local CSV file about fat supply quantity.

Loading thumbnail…

Loading Data using d3 and React

This example shows an interactive summary of the CSS Named Colors dataset, reporting the file size in kilobytes, the number of rows, and the number of columns. A large, preformatted text element displays the statistics prominently. The code loads the CSV using d3.csv, then derives the file size with `d3.csvFormat(data).length`, while also accessing the parsed data’s `length` and `columns` properties. The example additionally demonstrates an alternative approach using `fetch`, `async`, and `await` with `d3.csvParse`, though that path is commented out.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 and React. It fetches CSS Named Colors data from a GitHub gist and displays the file size in kilobytes, row count, and column count in a large text format. The code uses `d3.csv` with a Promise-based `.then` method, while commented alternatives show `fetch` with `async/await` and `d3.csvParse`. The React component renders the result into a `<pre>` element, with D3 version 5 and React 16 loaded from CDNs.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data from a remote URL. It retrieves a list of CSS named colors, converts it into a structured format using the D3 `csvParse` function, and logs the total row count to the console, with the result displayed in a large <pre> element. The program uses the `fetch` API with `async`/`await` to load the text and relies on D3 v5 for CSV parsing.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count in a large text format. It uses D3 v5’s `d3.csv` method with a promise-based `.then()` callback to fetch data from a CSS Named Colors dataset hosted on GitHub Gist. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, as well as a nested “pyramid of doom” fetch pattern, showing different approaches to asynchronous data loading.

Loading thumbnail…

Fork of Smiley Face Part II

A single circle tracks the mouse cursor inside an SVG canvas, moving in real time to mirror the pointer’s position on screen. Built with React, the app uses the `useState` hook to store the current mouse coordinates and `useCallback` to handle the `mousemove` event, updating the circle’s `cx` and `cy` attributes. The rendering relies on React DOM to manage the SVG elements, with the circle’s radius fixed at 30 pixels within a 960-by-500 viewport. No external data source is used; the interaction is purely event-driven.

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates how to fetch and log data from an external CSV file containing CSS named colors. It uses the browser’s native `fetch` API and `async/await` to asynchronously retrieve the text from a GitHub gist URL, then outputs the raw CSV content to the console via `console.log`. The page is minimal, with no visual rendering or DOM manipulation, and serves as a starting point for building data-driven visualizations in plain HTML and JavaScript.

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered “Hello HTML!” message using basic CSS styling. The page consists of an HTML document that applies a 13-em font size and text alignment through a `.message` class defined in a `<style>` block. It demonstrates the fundamental structure of an HTML page with embedded CSS, without any JavaScript logic or external libraries. The rendering relies purely on the browser’s default HTML and CSS processing, showing how a static text element can be visually emphasized.

Loading thumbnail…

Fork of Smiley Face Part II

A grid of fifteen randomly generated smiley faces renders as a React component tree, with each face composed of SVG circles and a D3 arc path for the mouth. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents within a `FaceContainer` that applies a translation transform. D3’s `range` generates the array for the map, while `Math.random` varies eye offset, eye radius, mouth width, and mouth radius per face, producing subtle differences across the repeating pattern.

Loading thumbnail…

Fork of Let's Make a Face Part 2

A static React application renders a simple smiley face as an SVG graphic, consisting of a yellow circle with a black outline and two smaller black circles for eyes. Using React 16.9.0, the code defines the face directly in JSX within an HTML file, with ReactDOM and React loaded from CDN. The example demonstrates basic SVG shape rendering through React components, though interactive behavior noted in the embedded video is not implemented in this version.

Loading thumbnail…

Smiley Face Part I

A yellow circle with a black outline forms the base of a smiley face, accompanied by two solid black circles intended as eyes. The second eye has an empty `cx` attribute, leaving it visually omitted, so only one eye renders. The static SVG uses hardcoded coordinates and radii, with no JavaScript libraries or data sources, and is presented on a 960 by 500 canvas with a hidden page margin.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates loading a remote CSV dataset of CSS named colors into a React component, then displaying its file size, row count, and column count as a simple text summary. It uses `useState` to hold the data and `useEffect` with D3’s `csv` function to fetch and parse the data asynchronously. The message is composed using `d3.csvFormat` to calculate byte size. While the data loads, a “Loading…” fallback appears. The visualization highlights the integration of React state management with D3’s data-loading utilities.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors, displaying the file size, row count, and column count in large text. The code uses D3 v5’s `d3.csv` method with a promise to fetch and parse the remote CSV data. It also includes commented alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, as well as a nested promise “pyramid of doom” pattern. The rendered output is a simple text summary within a `pre` element.

Loading thumbnail…

Fork of Smiley Face Part II

A purple circle follows the mouse cursor across a blank SVG canvas, updating its position in real time with each pointer movement. Built with React and ReactDOM, the interactive graphic uses the `useState` and `useCallback` hooks to track and update mouse coordinates via an `onMouseMove` handler on the root SVG element, rendering the circle at the current pointer location.

Loading thumbnail…

Mouse Follower

A circular face, drawn with SVG, sits at the center of the canvas. The face consists of a yellow background circle, two black eyes, and a mouth shaped using the D3 arc generator. The React components each return SVG elements, with the mouth's path computed by `d3.arc()`. The entire graphic is rendered using React DOM, and while the title suggests interaction, the code does not include any mouse-tracking logic.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in the browser using the Fetch API and the `then()` method. It fetches a remote CSV file containing CSS named colors from a GitHub gist, then prints the raw text content to the browser console. The code defines an asynchronous `fetchText` function that retrieves the data and converts the response to text, while a commented-out alternative shows the equivalent nested promise structure. No data visualization or parsing is performed; the focus is solely on the initial network request and logging.

Loading thumbnail…

Fork of React Starter

This example presents a grid of fifteen procedurally generated cartoon faces, rendered as yellow SVG circles with black outlines, eyes, and arced mouths. Built with React for component composition and D3 v7 for the `arc` generator in the mouth, each face varies randomly in eye offset, radius, and mouth dimensions. The code reads properties like `centerX`, `centerY`, and `strokeWidth` to position a shared `FaceContainer` SVG wrapper, producing a playful, varied collection of expressions.