Skip to main content
Log in
S

Sarah Elkeurti

@khadelk·10 public vizzes

Loading thumbnail…

Axes for React and D3

This example displays a horizontal bar chart of the top ten countries by population in 2020, using data loaded from a CSV file. The visualization is built with React and D3 v5, rendered as an SVG. The code uses D3 utilities like `csv` for data loading, `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `max` to compute the domain. Axis ticks and grid lines are generated from the scales, with bars drawn as SVG rectangles.

Apr 11, 2022
Loading thumbnail…

Bar Chart with React & D3

This visualization displays the ten most populous countries in 2020 as a horizontal bar chart, where bar length encodes population size. The code uses React hooks (useState, useEffect, useCallback) to manage asynchronous data loading via d3.csv, which fetches UN population data from a GitHub gist. D3 scales (scaleBand for countries, scaleLinear for population totals) position the SVG rectangles rendered as React components. While the HTML loads React and D3 from CDNs, the visible chart omits axes, labels, and color, showing only raw bars against a white background.

Apr 9, 2022
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 countries by population for 2020, using data from a CSV file loaded via D3's `csv` utility. The chart encodes population values horizontally and country names vertically, with the styled bars, axes, and text rendered as SVG through React components. The code utilizes D3 scales (`scaleBand` and `scaleLinear`) for positioning, a custom `tooltipFormat` using D3's `format` function, and React state managed via the `useData` hook. The design features a Poppins font, teal bars, and muted axis colors.

Apr 9, 2022
Loading thumbnail…

Refactored Bar Chart

This bar chart visualizes the top 10 countries by 2020 population using data from the UN Population 2019 dataset, loaded via D3’s `csv` utility. Built with React and D3 v5, it encodes population with a linear x-scale (`scaleLinear`) and country names with a band scale (`scaleBand`) for the y-axis. The SVG rendering is composed of custom components for axes (`AxisBottom`, `AxisLeft`) and bars (`Marks`), with React state managing the asynchronous data loading.

Apr 9, 2022
Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 10 countries by 2020 population from UN data. The chart uses SVG rectangles positioned with `scaleBand` and `scaleLinear` scales, nested inside a translated `<g>` group to offset the visualization from the SVG edges. React hooks like `useState` and `useEffect` manage asynchronous data loading via `d3.csv`, while the margin object explicitly defines padding for the plot area.

Apr 6, 2022
Loading thumbnail…

Rendering Data with React & D3

This example visualizes CSS named colors as a pie chart, where each slice represents a single color from a CSV dataset of named colors. The code uses D3 utilities `d3.csv` to load the data, `d3.pie` to compute slice angles, and `d3.arc` to generate SVG path shapes. React manages the asynchronous data loading with `useState` and `useEffect`, rendering each path with its corresponding hex color as the fill. The visualization demonstrates how React handles state while D3 handles the geometric computations and SVG output.

Apr 6, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a set of automobiles, with tooltips revealing the vehicle name for each point. The scatter plot is constructed using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded from a CSV file using D3’s `csv` function, while the visualization’s appearance is customized through a configuration object that adjusts axis styles and font sizes. The chart fills the entire viewport and uses semi-transparent points to reveal overlapping data.

Apr 6, 2022
Loading thumbnail…

Fork of Mouse Follower

This example demonstrates a React application that loads a CSV file of CSS named colors using D3’s `d3.csv` utility, then displays either a message or a loading indicator. The app imports React’s `useState` and `useCallback` hooks to manage the fetched data, storing it in state once the asynchronous request resolves. The rendered output is a simple `<div>` whose text content changes based on whether the data has arrived. The visualization relies on React 16.9 and D3 5.11, with the data sourced from a remote gist URL, and is mounted to the DOM via `ReactDOM.render`.

Apr 3, 2022
Loading thumbnail…

Mouse Follower

A React and SVG visualization that tracks the mouse cursor with a single circle. The circle's position updates live as the user moves over a 960 by 500 SVG canvas, using React's `useState` and `useCallback` hooks to manage the cursor coordinates and an `onMouseMove` event handler. The circle is rendered as an SVG `<circle>` element with a fixed radius of 30 pixels, while the initial position is centered on the screen.

Apr 3, 2022
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the fundamental process of loading and parsing CSV data in a web visualization context, displaying a summary message that reports the data size, row count, and column count. The visualization loads CSS Named Colors data from a remote CSV file using D3 v5’s `d3.csv` method, which returns a promise and automatically parses the comma-separated values into an array of objects. The code then calculates the formatted data size in kilobytes via `d3.csvFormat` and reads `data.length` and `data.columns.length` to extract the row and column counts. The message-container element displays the results in a large font, showcasing the integration of D3’s CSV utilities with simple DOM manipulation.

Apr 3, 2022