yubeichen0826

@yubeichen0826·4 public vizzes

Cheap trick for Interaction

A simple world map displays population data for ten countries, with each country colored light green against a dark blue sphere. The visualization uses D3 v5 with a `geoNaturalEarth1` projection and `geoPath` to render country boundaries from TopoJSON data loaded via `world-atlas`. The key interaction is a cheap tooltip alternative: a bare `<title>` element appended to each country path, which shows the country name and population on hover, while a CSS `.country:hover` rule changes the fill to yellow. The data comes from a local `data.csv` file.

Aug 15, 2020

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart of population figures for the world’s most populous countries, with each bar’s length proportional to its population value. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data to pixel coordinates, while `axisLeft` and `axisBottom` render the country labels and numeric scale. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles with a fixed steel-blue fill, using the `selectAll` data-join pattern to bind and append elements.

Aug 15, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled using CSS and inline attributes within a React-based visualization. It shows circles and rectangles with varying fills, strokes, and transforms, including a group with a yellow fill and red stroke, and a path with a rounded line join. The code uses raw SVG elements such as `<circle>`, `<rect>`, and `<path>`, along with CSS classes like `.lines` to control stroke properties. No external libraries are used beyond the basic SVG rendering approach.

Aug 9, 2020

Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by price. It lists each car as a formatted string showing the year, make, model, and price for vehicles under a maximum price threshold. The React code imports car data and uses functional utilities like `filter` and `map`, along with a custom `generateReport` function that joins the formatted entries with newlines. The report is rendered into a `<pre>` element using vanilla `document.getElementById` and `textContent`.

Aug 8, 2020