StudentCZ

@StudentCZ·5 public vizzes

Fork of Stylized Bar Chart

This bar chart shows the top 10 most populous countries in 2020, using data from the United Nations World Population Prospects 2019. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. Population values are formatted with D3’s `format('.2s')` to display values in billions. The SVG rendering includes custom axis components and hover tooltips via native `<title>` elements, all styled with the Poppins font and teal bars.

Apr 3, 2022

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset as a stylized scatter plot, mapping petal length to the x-axis and sepal width to the y-axis. Built with React and D3 v5, it renders SVG circles with tooltips via nested `<title>` elements. The code uses `d3.csv` for data loading, `scaleLinear` for coordinate mapping, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to generate axes and data points with Poppins typography and a teal color scheme.

Apr 3, 2022

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width. Users can hover over the color legend to highlight data points belonging to a specific species, with non-matching points fading to 20% opacity. The visualization is built using React and D3 v5, with SVG rendering. It uses `d3.scaleLinear` and `d3.scaleOrdinal` for scaling, and React state to manage hover interactions.

Apr 3, 2022

Loading thumbnail…

Loading CSV Example

This example demonstrates how to load and parse a CSV file containing CSS named colors using the Fetch API. The code defines an asynchronous function that fetches the remote CSV file and logs its raw text content to the browser console. It uses async/await syntax with Promise resolution through `.then()`, and the data source is a GitHub Gist hosting the CSS Named Colors dataset. The visualization does not render any graphics—it focuses solely on the data-loading and parsing step.

Apr 1, 2022

Loading thumbnail…

I Am New

Eighteen faces appear in a grid, each with a yellow circular head, black outline, two eyes, and a d3.arc-generated mouth. The faces’ parameters—stroke width, eye offset and radius, and mouth dimensions—are randomized per instance, creating subtle variations across the group. Built with React components, the visualization uses D3 v5’s `arc` API to construct the mouth paths and `range` to generate the array of faces. Each face is rendered as an SVG group translated to its center position.

Apr 1, 2022