Elvira Nassirova

@bjolko·15 public vizzes

Making a bar chart with React & D3

This example demonstrates how to build a bar chart using React to render SVG elements and D3 to load and parse data. The visualization fetches population data from a CSV file via `d3.csv` and displays it as a series of rectangles, with React’s `useState` and `useEffect` managing the asynchronous data loading. D3 v6 and React 17 are used together, with the chart showing a loading message until the dataset is ready. The SVG-based chart currently renders blank rectangles without positional or size encodings, highlighting the integration of React’s declarative component model with D3’s data utilities.

Jun 13, 2021

Loading thumbnail…

Visualizing data with React & D3

This example shows a color wheel of all CSS named colors, with each color represented as a slice of a pie chart. The visualization loads data from a CSV file of named colors and their RGB hex values using `d3.csv`, then renders each slice as an SVG path with `d3.arc` and `d3.pie`. React manages the data-fetching lifecycle with `useState` and `useEffect`, while ReactDOM renders the interactive SVG output.

Jun 13, 2021

Loading thumbnail…

Iterating fast with Vega-Lite API

This example demonstrates an interactive scatter plot of automotive data, showing how weight, horsepower, and origin relate to fuel efficiency (mpg). The visualization uses the Vega-Lite API to declaratively specify the chart, with circle marks encoding horsepower on the y-axis and weight on the x-axis, while origin determines color and mpg controls size. The code loads data from a CSV via D3’s `csv` function, registers Vega and Vega-Lite with the API, and renders the result as SVG. Custom axis and label styling from a configuration object improves readability.

Jun 10, 2021

Loading thumbnail…

Vega-Lite API Template

This gallery example demonstrates relationships among vehicle attributes in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot displays miles per gallon on the x-axis and horsepower on the y-axis, with circles colored by country of origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, and renders to SVG. Data loading uses d3.csv, while the vega-tooltip Handler enables interactive hover details showing the car model name.

Jun 10, 2021

Loading thumbnail…

Load the data React + D3

This example demonstrates how to load a CSV file asynchronously in a React application and display summary statistics about the dataset. The interface shows a large text block reporting the file size in kilobytes, the number of rows, and the number of columns. The code uses React hooks (`useState`, `useEffect`, `useCallback`) to manage state and fetch the data, while `d3.csv` loads the remote CSV from a GitHub gist. `d3.csvFormat` calculates the data size, and the ReactDOM renderer updates the display once loading completes.

Jun 10, 2021

Loading thumbnail…

Parsing CSV data with D3

This example demonstrates how to load and parse a CSV file from a remote URL using D3 v6. It displays the file size, row count, and column count on the page. The code uses `d3.csv` to fetch and parse the data asynchronously, then accesses the resulting array and its `columns` property, while `d3.csvFormat` is used to measure the raw text length. The data comes from a GitHub gist containing CSS named colors.

Jun 8, 2021

Loading thumbnail…

Interaction with React: Mouse follower

A circle follows the mouse cursor within an SVG canvas. The example uses React's `useState` and `useCallback` to track the cursor's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes on every `onMouseMove` event. The SVG and circle are rendered directly through ReactDOM, with no D3 visualization logic, though the D3 library is loaded in the page. The interaction is purely event-driven, with the initial circle position centered at width/2, height/2.

Jun 8, 2021

Loading thumbnail…

Loading & Parsing CSV data

This example demonstrates the initial step of working with external data in JavaScript: fetching raw CSV text from a remote URL and logging it to the browser console. It shows the asynchronous fetch and text extraction process using the native `fetch` API and `response.text()`, wrapped in a custom `fetchText` helper function. The data source is a GitHub Gist containing named CSS colors in CSV format. The page relies solely on vanilla JavaScript with no external libraries, and the commented-out code highlights an alternative promise-chain approach to the same task.

Jun 8, 2021

Loading thumbnail…

Smiley Face Part V (ES6 modules)

A smiling face composed of SVG shapes is rendered in a React application, with a yellow background circle, two eyes, and an arc-based mouth. The code uses React components for each facial feature and D3's `arc()` API to generate the mouth path. Eye and mouth positions are controlled by props, and all shapes are grouped and translated to the center of a 960×500 SVG canvas. D3 v6 and React 17 are loaded via CDN, with ES6 module imports structuring the components.

Jun 8, 2021

Loading thumbnail…

Smiley Face Part VI (Compartmentalizing Complexity)

Six random smiley faces are arranged in a grid to demonstrate code reuse through React components. Each face’s eyes, mouth, and stroke vary randomly, showcasing how modular components can be composed with different props. The visualization uses React 17 and D3 v6, relying on `arc()` for the mouth, `range()` for the grid, and SVG via JSX. Rendering occurs through `ReactDOM.render`, with all geometry parameterized inside reusable components.

Jun 8, 2021

Loading thumbnail…

Fork of Smiley Face Part IV (React Components & ES6)

This example shows a yellow smiley face composed of a background circle, two eyes, and a mouth, rendered as scalable vector graphics within a web page. The visualization is built using React components, with each facial feature defined as a JSX element, and relies on D3’s `arc` generator to produce the curved mouth path. The drawing coordinates are calculated from the SVG’s fixed width and height, and the face is positioned at the center using a transformation group. The code demonstrates mixing React’s declarative UI with D3’s geometry utilities to create a static, geometric illustration.

May 24, 2021

Loading thumbnail…

Smiley Face Assignment (D3)

This example uses React 17 and D3 v6 to draw a smiley face in an SVG. The face is constructed from a yellow circle for the head, two eye arcs created with `d3.arc`, a mouth arc, and a horizontal line for the teeth, all positioned around the center of the 960x500 viewport. The code defines each shape with D3’s `arc` API, using inner and outer radii and start/end angles, then renders them as SVG paths within a transformed group. The data is hardcoded in the JavaScript, with styling applied via SVG attributes.

May 20, 2021

Loading thumbnail…

Smiley Face Part III (D3)

This example shows a classic yellow smiley face drawn with D3’s `arc` generator. A circle forms the face, two smaller circles make the eyes, and a curved path creates the mouth. Built with React and D3 v6, the SVG is constructed declaratively, using D3’s `arc` API to compute the mouth path and React’s `render` method to mount it. The face is centered at 960 by 500 pixels.

May 16, 2021

Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered as an SVG using React and ReactDOM. The code draws three circles: a large outlined face and two smaller eyes, with dimensions computed from the viewport width and height. React 17’s `ReactDOM.render` mounts the component to a root element, while inline JSX defines the SVG attributes like `cx`, `cy`, `r`, and `stroke-width`. The face lacks a mouth, making it a partial construction.

May 16, 2021

Loading thumbnail…

Smiley Face Part I

A static SVG smiley face rendered without React, despite the gallery’s framework metadata. The code uses raw SVG `<circle>` elements inside an inline `<svg>` tag, with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes to draw a yellow head and two black eyes on a 960×500 canvas. No interactive behavior or data binding is present; the visualization is purely declarative markup, as shown in the included `index.html` file.

May 16, 2021