Marcin Stepniak

@stmarcin·10 public vizzes

Fork of Lesson 8: Making a bar chart

This example shows a horizontal bar chart of the top 10 countries by population for 2020, using data loaded from a CSV file. The chart is rendered as SVG elements, with each bar’s width scaled proportionally to its population value. The code combines React hooks (useState and useEffect) to manage asynchronous data loading, while d3.csv, scaleBand, and scaleLinear handle the data parsing and scales. React renders the final SVG markup, and the data originates from the UN Population 2019 dataset.

May 11, 2021

Loading thumbnail…

lesson 8: Bar chart

A bar chart displays population estimates for ten countries, from China at roughly 1.4 million to Mexico at 130 thousand, using data loaded from a CSV file. The React app uses the `useState` and `useEffect` hooks to fetch the data with `d3.csv`, converting population values to numbers. Victory’s `VictoryChart` and `VictoryBar` components render the bars, with country names on the x-axis and population on the y-axis, styled via a custom tick label font size and chart padding.

May 11, 2021

Loading thumbnail…

Lesson 7: Rendering data with React & D3

This example renders the MDN CSS named colors dataset as a pie chart, with each slice filled by its corresponding color hex value. Using React hooks, the code loads CSV data with `d3.csv` and stores it in state, while D3’s `pie` generator and `arc` function compute the slice geometry. The chart draws SVG `<path>` elements inside a `<g>` group, showing how React manages the component lifecycle and D3 handles the layout calculations.

May 11, 2021

Loading thumbnail…

Loading data with React & D3

This example uses React and D3 to display a summary of a CSS named colors dataset. It loads the data asynchronously from a remote CSV file using `d3.csv`, then renders a simple text message showing the number of rows, columns, and approximate file size in kilobytes. The React component manages the data fetching state with `useState` and `useEffect`, displaying "Loading..." until the data arrives, and formats the result with `d3.csvFormat`. The output is presented as SVG-formatted text within a `<pre>` element.

May 10, 2021

Loading thumbnail…

Lesson 6

This visualization displays the relationship between vehicle weight, horsepower, and fuel efficiency using the auto-mpg dataset. A scatter plot maps weight on the x-axis and horsepower on the y-axis, while both the size and color of the circular marks encode miles per gallon, with tooltips revealing car names. It is built with the vega-lite-api, which wraps Vega-Lite and Vega, and loads data via d3.csv. The chart fills the browser window with a fit autosize and uses custom axis and label styling from a config object.

May 10, 2021

Loading thumbnail…

Fork of Fork of D3 & react lesson 4b

This example displays basic information about a CSV dataset in large text, showing the row count, column count, and file size in kilobytes. It loads CSS named colors from a GitHub-hosted CSV file using the `d3.csv` promise API, then formats the data with `d3.csvFormat` to calculate its byte length. The result is inserted into an HTML `<pre>` element via the DOM, demonstrating a minimal data-loading and metrics-display workflow with D3 v6 in a plain React-less environment.

May 6, 2021

Loading thumbnail…

Fork of D3 & react lesson 4

This example demonstrates loading and parsing a CSV file of CSS named colors by displaying basic file statistics as large text. It shows the row count, column count, and file size in kilobytes, derived from a remote CSV dataset. The implementation uses D3 v6’s `d3.csvParse` to parse the raw text fetched via the standard `fetch` API. No visualization is rendered; instead, the parsed data's dimensions are written directly into a `<pre>` element using DOM `textContent`.

May 6, 2021

Loading thumbnail…

Mouse Follower (lesson 3)

A single yellow circle follows the mouse cursor across an SVG canvas. The example combines React state management with D3’s selection and event handling to track pointer coordinates. It uses React’s `useState` and `useCallback` hooks to update the circle’s center position on every `mousemove` event. The rendering relies on D3 v5 and React 16.9, with the circle’s `cx` and `cy` attributes bound directly to the stored mouse position. No external data source is used; the visualization demonstrates basic interactive SVG rendering with React.

May 5, 2021

Loading thumbnail…

D3 & react lesson 2

This example demonstrates how to load and parse a CSV file from a remote URL using JavaScript’s `fetch` API within a React context. The code fetches a CSV file containing CSS named colors and logs the raw text to the console, serving as a foundational lesson for integrating data loading into a React-D3 workflow. The implementation uses `fetch` and `response.text()` to retrieve the data, though it does not yet parse or visualize the CSV content.

May 5, 2021

Loading thumbnail…

Smiley face part 1

A grid of 24 smiley faces, each rendered with a yellow circular background, black-outlined stroke, two eyes, and an arc-shaped mouth. The faces are generated by mapping over an array from the `d3.range` function, with random eye radii producing slight variations. Built with React components and D3’s `arc` generator, the SVG is transformed with a 30-degree rotation in `FaceContainer`, using `d3.v6` and React 17.

May 4, 2021