Denis Zjukow

@deniszjukow·9 public vizzes

6a. Stylized Vertical Bar Chart

This example presents two stylized vertical bar charts that visualize financial data about open speculations. The first chart displays "weight" values, while the second shows "gain" (relative gain), with bars colored to distinguish positive (green) and negative (red) outcomes. Built with React and D3.v5, the charts use SVG rendering and scaleBand/scaleLinear for axes, with rotated labels and custom tick formatting enabling compact display. The data is loaded dynamically from a JSON URL using D3's `json` utility.

Sep 19, 2021

Loading thumbnail…

6. Stylized Horizontal Bar Chart

This example displays the top 10 most populous countries in 2020 as a stylized horizontal bar chart, rendered as SVG through React components. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with data loaded via `d3.csv` from a UN population dataset. Bars are colored teal with a Poppins font, and axis ticks are customized using `d3.format` to abbreviate large numbers (e.g., converting billions to “B”). Tooltips appear on hover, showing the formatted population value.

Sep 17, 2021

Loading thumbnail…

8. Line Chart

This visualization displays a line chart of temperature over time, using data from a CSV file of weekly San Francisco temperatures. The chart uses a natural cubic spline to create a smooth curve. Built with React and D3 v5, the code leverages D3's `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` for scaling and axis ticks, while the path is constructed using D3's `line` function with the `curveNatural` option. SVG rendering is handled entirely through React components.

Sep 17, 2021

Loading thumbnail…

7. Scatter Plot

A scatter plot of the classic Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and rendered as SVG, the visualization uses D3 scales and utilities, including `scaleLinear`, `extent`, and `format`, to compute the axes and tick marks. Each point is a circle with a tooltip displaying its x-value. The data is loaded asynchronously from a CSV file via D3's `csv` function.

Sep 17, 2021

Loading thumbnail…

5. Vega-Lite API Template

This visualization shows the relative gains of companies, plotting each as a circle whose size corresponds to weight and whose color indicates whether the gain is positive or negative. The chart is built with the Vega-Lite API, which registers Vega and Vega-Lite and renders an SVG view. Data is fetched as JSON from a gist and processed with D3’s `fetch` and `map` methods, while tooltips and axis styling are configured through the API. The visualization uses a dark-themed custom config to improve readability.

Sep 15, 2021

Loading thumbnail…

4. Loading Data with React and D3

This example demonstrates how to load and summarize CSV data in a React component using D3. It fetches a remote dataset of CSS named colors via `d3.csv`, stores the result in React state with the `useState` and `useEffect` hooks, and displays a text summary of the file size, row count, and column count. The rendering uses ReactDOM to mount the component, while `d3.csvFormat` calculates the data size in kilobytes. The visualization is purely textual, showing a loading message until the data arrives.

Sep 14, 2021

Loading thumbnail…

2. Loading and parsing some CSV data

This example shows how to load and parse CSV data from a remote URL, then display summary statistics about the dataset. It fetches a CSV file containing CSS named colors, parses it with the `d3.csvParse` function from the `d3-dsv` library, and reports the file size in kilobytes, row count, and column count. The parsed data is displayed as plain text inside a styled `<pre>` element. The code uses the Fetch API to retrieve the text asynchronously before processing it.

Sep 14, 2021

Loading thumbnail…

3. Mouse follower

A circle follows the mouse cursor across an SVG canvas. The visualization demonstrates interactive state management in React, where mouse movement events update the circle's position. The code uses React's `useState` and `useCallback` hooks to track cursor coordinates, and renders the result as an SVG circle element. The page loads React 17, ReactDOM, and D3 v7 from a CDN, with the application contained in a single `index.js` file. The circle starts at the center of the 960x500 viewport and moves responsively to user input.

Sep 14, 2021

Loading thumbnail…

1. Faces

A grid of eighteen cartoon faces rendered with React and SVG, each featuring a yellow circular head, black eyes, and an arc-based mouth. The faces vary slightly in stroke width, eye offset and radius, and mouth dimensions due to randomized parameters. The visualization demonstrates reusable React components, including `FaceContainer` for SVG positioning and `Mouth` using d3’s `arc` generator to create the mouth shape.

Sep 14, 2021