K

KazSoftwareEngineer

@KazSoftwareEngineer·20 public vizzes

Loading thumbnail…

Marking a Scatter Plot

This scatter plot displays the sepal length versus sepal width measurements from the Iris Dataset, with each flower represented as a colored circle. The visualization uses React with D3 v7's scaleLinear and extent functions to map data values to SVG coordinates. The axes are rendered using custom AxisBottom and AxisLeft components that generate tick marks and labels, while the Marks component creates circles with tooltip formatting. The chart demonstrates how to build interactive scatter plots using declarative React components combined with D3's scaling utilities.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the top 10 countries by population in 2020, using UN population data loaded via `d3.csv`. The React app renders SVG bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, along with custom axis components. D3 utilities like `d3.max` and `d3.format` handle scaling and tick formatting, while tooltips appear on hover via SVG `<title>` elements.

Loading thumbnail…

Stylized Bar Chart

This visualization displays the populations of ten countries from a 2019 UN dataset using horizontal bars. React renders an SVG chart. D3 v7 utilities, including `scaleBand`, `scaleLinear`, `max`, and `csv` from the `d3` module, handle data loading, scaling, and axis generation. The bar lengths represent population values via the x-scale, while country names position rows on the y-axis.

Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart of the top ten countries by 2020 population, using D3 scales to map data to SVG positions and React to render the elements. It loads CSV data via `d3.csv`, then uses `d3.scaleBand` for country categories and `d3.scaleLinear` for population values. The chart displays axes with tick marks and labels generated from `xScale.ticks()`, and bars are drawn as SVG `rect` elements. D3’s `max` utility computes the domain, while React’s `useState` and `useEffect` manage the asynchronous data loading.

Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention by rendering a horizontal bar chart of the top ten most populous countries from United Nations 2019 data loaded via `d3.csv`. React manages the component state and renders SVG rectangles using JSX, while D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel positions. The chart applies fixed top, right, bottom, and left margins by translating a group element, ensuring the visualization area is neatly inset within the 960×500 SVG canvas. D3 v7 provides the data-loading and scaling utilities, while React 18 handles the reactive DOM updates.

Loading thumbnail…

Making a Bar Chart with React and D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using a CSV file fetched from a GitHub gist. React manages the component state and renders SVG rectangles, while D3 utilities handle data loading with `d3.csv` and scales with `scaleBand` and `scaleLinear`. The chart positions each country along the y-axis and maps population values to bar widths on the x-axis, updating after the data loads asynchronously.

Loading thumbnail…

Fork of Rendering Data with React

A radial burst chart displays every CSS named color as a wedge of a circle, with each wedge filled using its corresponding hex value from a CSV dataset loaded via D3’s `csv` function. The React component uses `useState` and `useEffect` to fetch the data, then computes the pie layout with `d3.pie` and renders SVG `<path>` elements using `d3.arc`. D3 v7 handles the data loading and geometry while React 18 manages the declarative SVG rendering.

Loading thumbnail…

Rendering Data with React

A donut chart visualizes the distribution of CSS named colors, with each color represented as a wedge in the SVG. The React app loads the data using D3’s `csv` utility, then maps each row to a path element with a fill matching the color’s hex value. D3’s `arc` generator computes the wedge shapes based on evenly divided angles, while React’s `useState` and `useEffect` handle asynchronous data fetching. The visualization demonstrates React’s declarative rendering combined with D3’s geometric utilities for scalable SVG output.

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of temperature readings over time, with a thin bar for each timestamp and a tooltip revealing the exact temperature value. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders the chart as an SVG with an interactive tooltip from vega-tooltip. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s appearance is customized through a configuration object that adjusts axis labels and title colors. The canvas size adapts to the browser window using autosize.

Loading thumbnail…

Loading Data in React & D3

This example demonstrates how to load and display a CSV dataset within a React application using D3 utilities. The page initially shows a loading message, then presents the data file’s size in kilobytes, row count, and column count as large text. The code uses React’s `useState` and `useEffect` hooks to fetch the CSV via `d3.csv` and manage the asynchronous state update. The data comes from a GitHub-hosted CSS named colors file, and the output is rendered as SVG text within a `<pre>` element.

Loading thumbnail…

D3 Parsing CSV Data

This example demonstrates how D3 can load and parse CSV data from a remote URL, then displays the dataset’s basic metrics—size in kilobytes, row count, and column count—as oversized text on a web page. It uses the `d3.csv` method to fetch and parse the file asynchronously, and also includes commented-out code showing alternative parsing with `d3.csvParse` on raw text. The data source is a gist-hosted file containing CSS named colors. The page’s minimal styling relies on a large `pre` element for output.

Loading thumbnail…

Mouse Follower

A circle rendered in SVG follows the mouse cursor across a 960 by 500 viewport. Built with React and ReactDOM, it tracks pointer movement via the `onMouseMove` event handler, storing the cursor's `clientX` and `clientY` coordinates in state using the `useState` hook. The `useCallback` hook optimizes the handler, and the circle's `cx` and `cy` attributes update reactively to reposition the circle at the current mouse location.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote source using the Fetch API. The program defines an asynchronous `fetchText` function that retrieves a text file from a GitHub Gist URL containing CSS named colors. After fetching, it logs the raw CSV content to the browser console. The code highlights the use of JavaScript’s `async/await` syntax for handling promises, and it comments out an alternative approach using the `.then()` method. No visual output is rendered; the focus is solely on the initial data retrieval and inspection step.

Loading thumbnail…

Smiley Face Part 6

A grid of eighteen smiley faces, each rendered as an SVG, displays randomized facial features created through React components. The faces vary in stroke width, eye offset and radius, and mouth dimensions, producing a playful assortment of expressions. The code uses React 18 with functional components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, incorporating d3.v7’s `arc` generator for the mouth shape and `range` to generate the array of faces.

Loading thumbnail…

Smiley Face Part 5

A smiling face is rendered as an SVG graphic with a yellow circular background, black outlined eyes, and a curved mouth. The face is composed of three React components: `BackgroundCircle`, `Eyes`, and `Mouth`, all positioned within a central group. The mouth uses the `d3.arc` API to generate its path, with the arc’s start and end angles creating a downward curve. The example demonstrates modular component composition in React, with fixed dimensions and offsets defined in the main `App` component.

Loading thumbnail…

Smiley Face Part 4

A React component renders a yellow SVG smiley face with black stroke, two eyes, and an arc-based mouth, centered on a 960 by 500 canvas. The example demonstrates reusable functional components and ES6 syntax within React 18, using the `d3.arc` API to generate the mouth path. D3 v7 provides the arc generator, while React manages the SVG elements. The face is built from primitive shapes: a circle for the background, two circles for eyes, and a path for the mouth, all positioned via a transform group.

Loading thumbnail…

Tweaked Smiley Face Part 3

A React-rendered SVG smiley face with a lime green circular head, black stroke, and two distinct eyes: a solid filled circle on the right and an arc-based "winky" eye on the left, drawn using D3's `arc()` generator with specified inner and outer radii and start/end angles. The mouth is also an arc, created with `arc()` using a defined radius and width. All geometry is positioned via a central `<g>` transform, with D3 v7 handling path generation while React manages the component structure and SVG attribute binding.

Loading thumbnail…

Smiley Face Part 3

This example shows a smiley face drawn with React and D3, rendered as SVG inside a single component. The smiley is centered and composed of three circles—a yellow face with a black stroke, plus two eyes—and a mouth arc. The code mixes React elements for the circles with a D3 `arc()` generator to define the mouth’s path, using fixed values for position and radius. The face is constructed without external data, and the entire graphic is produced declaratively within `ReactDOM.render`.

Loading thumbnail…

Smiley Face Part 2

A React application renders a yellow SVG smiley face on a 960 by 500 canvas. The face is constructed using three `circle` elements: a large yellow circle with a black stroke for the head, and two smaller black circles for the eyes, positioned relative to the canvas center. The code uses React and ReactDOM, with SVG attributes for geometry and styling, replacing a commented-out static SVG version with a programmatic, variable-driven approach.

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black stroke and two smaller black circles forms a smiley face on a 960 by 500 pixel SVG canvas. The example uses raw HTML and SVG elements, explicitly setting circle positions with `cx` and `cy` attributes and styling through inline CSS properties like `fill` and `stroke-width`. It demonstrates basic vector shape composition without JavaScript or external libraries.