Manuel Bauer

@Manuel-Bauer·8 public vizzes

Fork of HTML Starter

This example shows a minimal SVG rendering of a single circle, demonstrating the basic structure of an HTML page with embedded SVG content. The code uses a simple circle element with explicit `cx`, `cy`, and `r` attributes to position and size the shape. The page is built with plain HTML and CSS, with no JavaScript or external libraries. It serves as the simplest possible starting point for a visualization, derived from the HTML Starter template, and can be extended with JavaScript for interactive graphics.

Aug 1, 2023

Loading thumbnail…

Stylized Bar Chart

This example shows a horizontal bar chart comparing the populations of ten countries, with each bar labeled by country name on the left and numeric values along the bottom axis. The chart uses React state to load and store data from a CSV file, fetched with the `csv` utility from D3 v5. The `BarChart` component renders SVG rectangles using `scaleBand` for the categorical Y axis and `scaleLinear` for the numeric X axis. It reuses custom `LineTick` and `TextTick` components to draw gridlines and axis labels, with styling applied through the `.tick` class.

Aug 30, 2022

Loading thumbnail…

Bar Chart with React and D3

A horizontal bar chart displays population data for ten countries, rendered as SVG rectangles. Built with React components and D3 scales, `scaleLinear` maps population values to bar widths while `scaleBand` positions categorical country labels on the y-axis. D3's `csv` loader fetches the dataset from a GitHub-hosted CSV file. Custom `LineTick` and `TextTick` components generate the axis ticks and labels.

Aug 30, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This visualization displays the population of UN countries in 2019 as a donut chart, with each slice colored by a CSS named color from the loaded dataset. It uses React hooks (useState, useEffect) to fetch CSV data via d3.csv and manages rendering through React components, while d3.arc and d3.pie compute the geometric paths and angles for the SVG elements. The chart renders a circular layout with inner and outer radii, showing proportional slices for each country's population value.

Aug 30, 2022

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. The visualization uses a horizontal bar layout, with countries on the y-axis and population on the x-axis. The code employs D3 v5's `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes, with custom tick formatting that converts "G" to "B" for billions. The chart is rendered as SVG and includes a title and axis label.

Aug 30, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of automobile data, mapping weight to the x-axis, horsepower to the y-axis, and weight to color, with tooltips showing car names. It loads data from a CSV file of auto-mpg statistics via d3.csv, then renders the visualization with SVG. The code registers Vega and Vega-Lite via the `vl.register` method, applies a custom configuration for axis and label styling, and uses `vega-tooltip` to handle interactive hover details.

Aug 29, 2022

Loading thumbnail…

Moving the mouse around

A black circle follows the mouse as it moves across an SVG canvas. The example demonstrates how to use React state to track cursor position and update a visualization in response to user interaction. The `App` component uses React's `useState` hook to store the circle's coordinates, and the `onMouseMove` event on the `<svg>` element updates that state with `event.clientX` and `event.clientY`. The circle is rendered as an SVG `<circle>` element with its `cx` and `cy` attributes bound to the state values.

Aug 29, 2022

Loading thumbnail…

Smiley Face Part 1

This example shows a yellow smiley face with black outlined eyes and a curved mouth, rendered as an SVG. The face is centered within a 960 by 500 pixel canvas, with the head, eyes, and mouth positioned using transformations and fixed coordinates. The code uses React for the component structure and D3’s `arc` function to create the mouth path, while the rendering is done through SVG elements with specified stroke widths and fill colors.

Aug 28, 2022