Activity6_ Task 1
✓ Published1🌍 Public
This example shows a horizontal bar chart ranking population figures for the top 30 countries in 2020, using React with SVG rendering. The visualization builds scales with d3.scaleBand and d3.scaleLinear, formats tick labels with d3.format, and reads CSV data from a GitHub repository via d3.csv. Blue bars represent each country, with axis components rendering ticks and labels, while hover tooltips display formatted population values.
AI-generated description<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>D3 v6 Demonstration</title>
<style>
body {
margin: 0;
padding: 2rem;
font-family: Arial, sans-serif;
text-align: center;
background-color: #f9f9f9;
}
iframe {
max-width: 100%;
border: none;
}
</style>
</head>
<body>
<h2>A demonstration of how to start using D3 version 6</h2>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Ia_DwVMXwgk"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</body>
</html>
MIT Licensed