yuanwanttoeat

@yuanwanttoeat·4 public vizzes

Car Scatter Plot

This scatter plot visualizes the top 10 most populous countries, with population on the x-axis and country names on the y-axis, using circular marks. The data is loaded from a CSV file using D3's `csv` function. The chart uses `scaleLinear` for the population axis and `scalePoint` for the categorical country axis, with axes rendered via `axisBottom` and `axisLeft`. D3 v5 renders the visualization as SVG, with circle elements positioned by the scales and styled with CSS.

Sep 12, 2023

Loading thumbnail…

Evolution to scatter graph

This example shows the top 10 most populous countries as a horizontal bar chart. It begins with a bar chart and evolves into a scatter graph by allowing the bars to shrink and become points. The chart uses React for rendering and D3 v5 for data processing and scales, including `scaleBand` and `scaleLinear`, with SVG elements for marks and axes. The data comes from the United Nations World Population Prospects 2019 dataset.

Sep 12, 2023

Loading thumbnail…

Making a Bar Chart

This bar chart visualizes population data for the ten most populous countries, sourced from a CSV file and rendered as an SVG. Using React and D3 v6, the code applies a linear scale for population and a band scale for country names, appending rectangles to the chart. The visualization also employs a Poppins font, custom tick styling, and a teal color fill for bars.

Sep 12, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles and rectangles—using SVG elements styled directly and through CSS classes. It shows how fill colors, stroke properties, and transforms can be defined inline or via a stylesheet to control appearance. The code uses raw SVG markup within an HTML document, leveraging the `circle`, `rect`, `line`, and `path` APIs, with CSS rules in `style.css` applying stroke styling to a group of lines.

Sep 12, 2023