Skip to main content
SimilarExport ZIP
100%

Title

✓ Published0🌍 Public
Jjustinwong208
Last edited Apr 20, 2022
Created on Apr 20, 2022
Forked from HTML Starter

This chart compares international tourist arrivals for the top 10 countries between 2019 and 2020 using a Cleveland dot plot. Green dots represent 2019 values, while purple dots show 2020 figures, connected by grey lines to highlight the dramatic decline due to the pandemic. The visualization is built with React, D3 v6, and SVG, using `d3.scaleLinear` and `d3.scaleBand` for axes. Hovering over purple dots triggers a tooltip via mouse events, and a legend is generated using the `d3-legend` library. Data comes from the included CSV file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Title

This chart displays the percentage change in international tourist arrivals from 2018 to 2021 for ten countries, with each country represented as a colored line. The data, loaded from a CSV file, is visualized using SVG rendered through a React framework. The code uses D3.js v6 functions like `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for line paths, and `d3.legendColor` for the color-coded legend. A color palette distinguishes the ten countries.

Jjustinwong208
87% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top ten countries by population in 2020, with horizontal bars sorted by country name. The visualization uses D3.js scaling functions and React components to render SVG rectangles, axes, and tick labels. Data is loaded asynchronously via the `d3.csv` utility from a GitHub-hosted CSV file, and tooltips show formatted population values using `d3.format`. The chart’s aesthetic is enhanced with the Poppins font and a custom color palette applied to marks and gridlines.

Kkbrookshire420
74% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot compares visitor numbers at tourist locations between 2019 and 2021. Each dot represents a place, with its position determined by the number of visitors in each year. The visualization uses D3.js v7, loading CSV data from a remote gist URL. It renders as an SVG using `d3.select`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with circles positioned via the `x` and `y` scales.

Ssridhardubala106@gmail.com
73% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries in 2020, using a horizontal layout with labels on the left and a proportional population axis on the bottom. The visualization is built with React and D3 v5, where `d3.scaleBand` positions the country categories and `d3.scaleLinear` maps population values to bar widths. The code uses custom React components for the axes and marks, rendering as SVG rectangles with native tooltips. Data loads asynchronously from a CSV file via `d3.csv`, and the axis labels apply a customized tick formatter that converts values into billions.

CChristian Potdevin
73% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the top ten countries in 2020 using horizontal bars. The visualization uses React state to load and manage data from a UN Population CSV file, with D3 v5 utilities like `csv()`, `scaleBand()`, and `scaleLinear()` to map values. SVG rectangles render the bars, colored orange with a Poppins font, while axes include formatted tick labels using `format('.2s')`. Tooltips appear via SVG `<title>` elements, and the chart is fully responsive to its 960x500 frame.

Ccynichole
73% match
Loading thumbnail…

Fork of Fork of Simple Scatter Plot

This scatter plot compares tourist visitor numbers between 2019 and 2021 for various places. Each dot represents a location, with its horizontal position showing 2021 visitors and vertical position showing 2019 visitors, using D3.js’s `d3.scaleLinear` for axes. The data is loaded from a CSV via `d3.csv` with `d3.autoType` for parsing. The visualization renders SVG circles styled with CSS, with axis labels added using `d3.axisBottom` and `d3.axisLeft`. The chart’s title appears above the plot, and the grid is removed for a cleaner look.

Rrobertotienonyaranga@gmail.com
73% match
Loading thumbnail…

Bar chart with D3

This bar chart displays the population of the top 10 countries for 2020, using horizontal bars sorted by country name. The chart is built with React and D3 v5, rendering SVG elements. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components, using D3's `scaleBand` and `scaleLinear` for scales and `format` for tick labels. Data is loaded from a CSV URL using `d3.csv`, and population values are computed by multiplying the '2020' column by 1000.

Eekmankaur
73% match
Loading thumbnail…

Activity_7

This example shows a horizontal bar chart of the top 20 countries by 2020 population, using green bars against blue tick marks. The visualization is built with React and D3 v5, employing `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `rect` elements for the marks. Population values are loaded from a CSV via `d3.csv` and displayed with `d3.format` to abbreviate numbers (e.g., "B" for billions). The chart includes custom axis components and a tooltip using SVG `<title>`.

Ssaipaidipalli
73% match