katjur01

@katjur01·11 public vizzes

Bar chart with React & D3

This example presents a horizontal bar chart of the top 10 most populous countries in 2020, using data loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with grid lines generated from `xScale.ticks()`. React manages the application state and renders the SVG output, displaying an initial "Loading..." message before the data arrives. The bars are drawn as SVG `<rect>` elements within a translated `<g>` group, with the entire visualization rendered using React DOM.

Jun 8, 2023

Loading thumbnail…

Untitled

This example visualizes global population data from a 2019 UN dataset, displaying each country as a rectangle in a bar-chart-like SVG layout. The chart maps country names to vertical positions using a D3 scaleBand, though the rectangles are left with placeholder width and height values. The code loads the CSV data with D3’s `csv` utility and manages asynchronous data fetching with React hooks (`useState`, `useEffect`). React renders the SVG elements directly, while D3’s scaling functions handle the band positioning for each row.

May 31, 2023

Loading thumbnail…

Vega-Lite API - sankey diagram

This example uses the Vega-Lite API to construct a stacked bar chart showing the population of different religions by country. The visualization reads CSV data from a remote URL, which contains the top five religions per country. It employs `markBar` with x- and y-encodings for country and population, color-encoding by religion, and a tooltip for population values. The code registers Vega, Vega-Lite, and Vega-Tooltip, rendering the chart as an SVG that fits the window size. A custom config adjusts axis and label styling for improved readability.

May 15, 2023

Loading thumbnail…

Rendering Data with React & D3

A radial burst chart visualizes CSS named colors from a CSV dataset, encoding each color as a wedge arranged around a central point. The visualization is rendered as an SVG using React components, with D3 utilities handling data loading and geometry computation. Specifically, `d3.csv` fetches the color data, while `d3.pie` and `d3.arc` compute the angular and radial paths for each wedge, which are then filled with their corresponding hex values from the dataset.

Apr 27, 2023

Loading thumbnail…

Loading data with React and D3

This example demonstrates how to load and display a summary of CSS named colors data using React and D3. The app fetches a CSV file from a GitHub gist using the `d3.csv` function, and React's `useState` and `useEffect` hooks manage the asynchronous data loading. Once the data arrives, the `message` utility computes and displays the number of rows, columns, and file size in kilobytes using `d3.csvFormat`. The interface shows plain text output in a `<pre>` element, initially displaying "Loading..." until the data is ready. The visualization is rendered as SVG, though no graphical marks are drawn.

Apr 27, 2023

Loading thumbnail…

Vega-Lite API

This example demonstrates a stacked bar chart of country populations by religion, using the Vega-Lite API to construct the visualization declaratively. It fetches data from a CSV file via d3.csv, then renders the chart as SVG with vega and vega-lite, customizing axis and label styles through a config object. The bars are encoded with country on the x-axis, population on the y-axis, and religion determining color, with tooltips showing population values. The chart auto-fits to the browser window size.

Apr 24, 2023

Loading thumbnail…

Vega-Lite API - scatter plot

This example demonstrates a scatter plot of vehicle data using the Vega-Lite API, showing the relationship between miles per gallon and horsepower across different car origins, with point size encoding weight and tooltips displaying car names. The visualization leverages `vl.markCircle` with opacity for density perception, and custom scales that avoid zero-based axes. It loads CSV data from a GitHub gist via d3.csv, then renders to SVG using Vega and Vega-Lite with a dark-on-light custom config. The code registers vega-tooltip for interactive hover labels and uses d3.v5.

Apr 24, 2023

Loading thumbnail…

Parsing CSV Data with D3

This example displays a brief summary of a CSV file’s contents—the number of rows, columns, and approximate file size in kilobytes—as large text on a blank page. It loads the CSS-named-colors dataset from a GitHub gist using the `d3.csv` function, which parses the remote file asynchronously. The code then computes the summary values from the parsed data object and the formatted output of `d3.csvFormat`, writing the result into a `<pre>` element.

Apr 19, 2023

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor as it moves across an SVG canvas. The circle updates its position in real time through React’s `useState` and `useCallback` hooks, which handle mouse-move events. The example uses React and D3 v7, rendering the circle as an SVG element with coordinates derived from the `clientX` and `clientY` properties of the mouse event.

Apr 19, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse a CSV file containing CSS named colors from a remote GitHub gist. The page uses the Fetch API to retrieve the text data asynchronously, then prints the raw CSV content to the browser console. The code illustrates both a nested promise chain and a cleaner async/await approach, highlighting the latter as a preferred method for avoiding nested callbacks. No external libraries are used; the example relies entirely on native browser JavaScript features.

Apr 18, 2023

Loading thumbnail…

Smily face Part1

A grid of 18 smiling faces is rendered in SVG, with each face showing a yellow circular head, black-outlined stroke, eyes, and an arched mouth. The component-based React code composes reusable D3.js parts, using the `arc` API for the mouth path and `range` from D3 to generate the array of faces. Randomization is applied to the eye radius of each face, creating slight visual variation across the repeated smiley icons.

Apr 18, 2023