Aleksandra Timofejeva

@alexattt·9 public vizzes

Stylized Line Chart

This stylized line chart visualizes weekly temperature trends in San Francisco over time. Using React and D3 v7, the chart plots temperature values against timestamps, with a teal-colored path and circular marks for each data point. The x-axis displays abbreviated weekday labels via `timeFormat` while the y-axis shows temperature values. Data is loaded asynchronously from a CSV using `d3.csv`, and scales are constructed with `scaleTime` and `scaleLinear`. The SVG rendering includes custom axis components for bottom and left orientations, with tooltips provided through SVG `<title>` elements on each circle.

Jul 12, 2021

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length against sepal width, with each point as a fixed-radius teal circle. The data is loaded from a CSV using `d3.csv`, and the chart renders as an SVG within a React app. It uses D3’s `scaleLinear` for both axes, with bottom and left axes generated by custom `AxisBottom` and `AxisLeft` components. The `Marks` component maps data points to SVG circles, and a tooltip is provided via the `<title>` element, formatted using D3’s `format` function.

Jul 12, 2021

Loading thumbnail…

Rendering Data with React and D3(Bar Chart)

This example demonstrates a horizontal bar chart that displays population data for ten countries from the UN Population 2019 dataset, using React components to render SVG marks and axes. The `Marks.js` file generates `<rect>` elements with titles for tooltips, while separate axis components handle tick rendering. The visualization leverages D3 v7's `scaleBand` and `scaleLinear` for scaling, with data loaded asynchronously via a custom `useData` hook that fetches and parses the CSV. Styling applies a teal color to bars and custom fonts, though an unused `handleMouseMove` function logs coordinates without affecting the chart.

Jul 4, 2021

Loading thumbnail…

Rendering Data with React (Colors)

This example renders a pie chart of CSS named colors using React and D3 v7. The visualization displays each color as a slice, with the fill set to the color’s RGB hex value from the CSV data source. React manages the component state and SVG rendering, while D3’s `csv` and `pie` functions load and transform the data, and the `arc` generator creates the paths. The chart updates when the data loads asynchronously.

Jul 2, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load a CSV dataset in a React application using D3 utilities, displaying the data’s size, row count, and column count in a large text block. It uses the `useState` and `useEffect` hooks from React to manage the loaded data, and `d3.csv` to fetch the CSS named colors dataset from a GitHub gist. The file size is computed with `d3.csvFormat`, and the rendering is done through SVG.

Jul 2, 2021

Loading thumbnail…

Vega-Lite API exploration

This visualization explores the Vega-Lite API by rendering an interactive scatter plot of automobile data from a CSV file, showing the relationship between miles per gallon and horsepower, colored by country of origin. The code uses the `vega-lite-api` library alongside `vega` and `vega-lite` to construct the chart declaratively, with `d3` for data loading. It renders as SVG, applies a custom configuration for axis styling, and includes tooltips via `vega-tooltip` to display car names on hover.

Jun 30, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse a CSV file from a remote URL using D3.js v7. It fetches a dataset of CSS named colors via `d3.csv`, then displays the file size in kilobytes, the number of rows, and the number of columns in a large HTML `<pre>` element. The visualization relies on `d3.csvFormat` to measure the parsed data’s length, and also includes commented-out alternatives using `fetch` with `d3.csvParse` for comparison.

Jun 27, 2021

Loading thumbnail…

Mouse Follower

A yellow SVG circle follows the cursor across a 960 by 500 canvas. The example demonstrates interactive state management in React, using a `useState` hook to track mouse coordinates and update the circle’s position on every move event. The SVG element listens for `onMouseMove`, and React DOM renders the circle’s `cx` and `cy` attributes based on the stored position. The code relies on React 16.9 and ReactDOM, with the SVG markup embedded directly in the JavaScript.

Jun 25, 2021

Loading thumbnail…

Smiley Face Part I

Five identical smiley faces overlap into a single yellow face with black outlines, using a React component structure that composes separate BackgroundCircle, Eyes, and Mouth elements. The code leverages D3 v7’s `arc` API to generate the mouth’s curved path, while all geometries are defined relative to a central point inside an SVG viewport, with each face sharing identical dimensions and styling.

Jun 25, 2021