Semyon

@Stuthemp·6 public vizzes

Fork of Rendering Data with React & D3

This example displays a horizontal bar chart of the top 10 countries by population for 2020, using React to render SVG elements and D3 for data loading and scales. The chart shows population values as bars with labeled axes, including a formatted bottom axis using `format(".2s")`. Data is loaded via `d3.csv` from a UN population dataset, with country names on the y-axis using `scaleBand` and population on the x-axis using `scaleLinear`. React components such as `AxisBottom`, `AxisLeft`, and `Marks` manage the visualization structure.

Jul 9, 2021

Loading thumbnail…

Rendering data with React

A donut chart displays the full spectrum of CSS named colors, each slice colored by its corresponding hex value. The visualization loads color data from a CSV file using `d3.csv` and manages the asynchronous data fetching with React's `useState` and `useEffect` hooks. React renders SVG paths calculated by D3's `pie` and `arc` generators, with the chart centered and sized to fit the viewport.

Jul 4, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, mapping fuel efficiency against horsepower, with color by origin and point size by weight. It uses the Vega-Lite API to declaratively define the visualization, with D3.js loading the CSV data. The example demonstrates integrating Vega-Lite's high-level grammar with a custom configuration for improved readability, including styled axes and labels, and fits the chart responsively to the full viewport while enabling tooltips through Vega Tooltip.

Jul 4, 2021

Loading thumbnail…

Loading data w react and d3

This example shows a minimalist data-loading status display. The React component initially renders "Loading..." and, once fetched, presents a three-line summary of the loaded CSV data, including its size in kilobytes, row count, and column count. The data is loaded from a remote GitHub source using D3’s `csv` function, with the summary computed by the `message` function in `message.js`. A large `<pre>` element displays the resulting text, with the visualization’s size set to the full browser window. The code integrates React with D3 v7 via the `useEffect` hook and state management, rendering all output through standard SVG elements.

Jul 2, 2021

Loading thumbnail…

parsing csv

This example demonstrates the parsing of a CSV file from a remote URL. It loads the data using the D3.js `d3.csv` function, then displays a summary message with the file size, row count, and column count. The data is sourced from a GitHub gist containing a CSS colors table. The output is rendered inside an HTML `<pre>` element with a large font, using basic JavaScript and D3’s `csvFormat` method to calculate the size.

Jul 2, 2021

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen smiling faces is generated as SVG elements using React components. Each face is composed of reusable parts, including a yellow background circle, eyes, eyebrows, a nose, and a d3.arc-generated mouth. The code imports React, ReactDOM, and the d3 range function, while the Mouth component uses d3.arc to create the path. Random eye radius values introduce slight variation, though the faces remain static and identical in layout.

Jun 28, 2021