ivipaneva2002@gmail.com

@shittydaynotlife·10 public vizzes

Fork of Stylized Bar Chart

This example visualizes the Iris dataset by plotting sepal length against sepal width as a scatterplot of circles. It shows the raw data points without any grouping or encoding by species, focusing purely on the relationship between these two measurements. The visualization is built with React and D3 v5, using `scaleLinear` for both axes and rendering SVG circles via the `Marks` component. Data is loaded asynchronously from a CSV file using `csv` from D3, and axes are generated with custom `AxisBottom` and `AxisLeft` components that render ticks and labels.

Mar 1, 2024

Loading thumbnail…

Fork of Refactored Bar Chart

This bar chart visualizes the top 10 most populous countries using 2020 data from the United Nations World Population Prospects 2019, rendered as horizontal bars with SVG and React. It shows population values with formatted tick labels (e.g., "1.4B") and a tooltip on each bar. The visualization uses d3.scaleBand and d3.scaleLinear for layout, while React components handle axes and marks. The code also includes a custom axis tick formatter that converts SI units from "G" to "B".

Mar 1, 2024

Loading thumbnail…

Fork of Making a Bar Chart with Reach and D3

This example shows a horizontal bar chart of population data for ten countries in 2020, with countries labeled on the y-axis and population values on the x-axis. It demonstrates a React and D3 integration, where the `useData` hook fetches CSV data via `d3.csv` and processes it, while components like `AxisBottom`, `AxisLeft`, and `Marks` render SVG elements. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, with bars drawn as `<rect>` elements. The visualization is built with React’s declarative state management (`useState`, `useEffect`) and renders as an SVG, showing a clean separation of concerns between data loading, scales, and marks.

Mar 1, 2024

Loading thumbnail…

Stylized Bar Chart with Reach and D3

This example presents a stylized bar chart comparing the populations of the top ten countries in 2020, sourced from a UN population dataset loaded via `d3.csv`. It shows the data as horizontal bars using React components for rendering, with axes built from `scaleBand` and `scaleLinear`. The visualization uses D3 utilities for data loading and scaling, while React handles the SVG markup through custom components like `AxisBottom`, `AxisLeft`, and `Marks`, which map data to rects and axis ticks.

Mar 1, 2024

Loading thumbnail…

Making a Bar Chart with Reach and D3

This example uses React and D3 to render a horizontal bar chart of the top ten most populous countries in 2020, based on UN population data loaded via D3's CSV utility. The React component manages the data state and renders SVG elements, while D3's `scaleBand`, `scaleLinear`, and `max` functions handle scaling the country names and population values. The visualization displays labeled axes and gridlines, with bars drawn as SVG rectangles.

Dec 31, 2023

Loading thumbnail…

Visualizing Data with Reach and D3

This example visualizes CSS named colors as a radial burst, with each color represented by a wedge of equal angular size arranged around the center. The code loads the color data from a CSV file using `d3.csv`, then uses React hooks (`useState`, `useEffect`) to manage the asynchronous data loading and trigger a re-render. D3’s `pie()` and `arc()` generators compute the wedge shapes, which are rendered as SVG `<path>` elements with fill colors taken directly from the dataset’s hex values. The visualization updates dynamically once the data arrives, showing the full spectrum of named colors in a compact, circular layout.

Dec 31, 2023

Loading thumbnail…

Loading Data with Reach and D3

This example demonstrates how to load and summarize a dataset using D3 utilities within a React application. It fetches a CSV file containing CSS named colors via D3’s `csv` method, storing the parsed result in React state with the `useState` and `useEffect` hooks. The rendered output displays a text summary showing the data’s approximate size in kilobytes, row count, and column count, computed using `d3.csvFormat`. While loading, the view shows a loading message. The implementation relies on React 16.9, D3 v5, and renders plain text into an HTML `<pre>` element.

Dec 29, 2023

Loading thumbnail…

Loading and Parsing CSV data

This example displays the result of loading and parsing a CSV file from a remote URL. It fetches the raw text of the dataset, then uses `d3.csvParse` to convert it into an array of objects. The program calculates and displays the file size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The data source is a GitHub gist containing CSS named colors, and the code relies on the `fetch` API and D3 v7.

Dec 29, 2023

Loading thumbnail…

Mouse Follower

A React SVG visualization renders a single black circle that tracks the mouse cursor across a 960 by 500 pixel canvas. The circle’s position updates via React state and the `useState` and `useCallback` hooks, responding to `onMouseMove` events on the SVG element. The code uses `ReactDOM.render` to mount the app and has no external data source, simply displaying interactive mouse-following behavior.

Dec 28, 2023

Loading thumbnail…

Smiley Face Part VI

This example displays a grid of six rows of three smiley faces, each with randomly varied eye positions, eye radii, and mouth dimensions. The faces are rendered as SVG elements using React components, with the mouth arc created through the d3.arc API. The d3.range function generates the array for mapping over to produce the faces, and ReactDOM renders the entire set into the DOM.

Dec 28, 2023