Fork of Testing out dashboard stuff

100%

Fork of Testing out dashboard stuff

✓ Published0🌍 Public

Last edited Jun 6, 2024

Created on Jun 6, 2024

A dashboard displays population data for the top ten countries, combining a bar chart and a scatter plot to rank and compare current populations. Built with D3.js, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scalePoint` for the charts, styled with SVG elements. Data is drawn from the World Bank's total population per country dataset, with axis ticks formatted using `d3.format`. The bar chart and scatter plot share the same color scheme, with a color legend for reference.

AI-generated description

Simple dashboard consists of different charts showing the population of top ten countrie over the years.Data is taken from World Bank (https://data.world/worldbank/total-population-per-country/workspace/file?filename=POP_TOTAL_DS2_en_v2.csv)

MIT Licensed

Similar vizzes

Loading thumbnail…

Testing out dashboard stuff

A dashboard displays the population of the top ten most populous countries using a bar chart and a scatter plot, with data sourced from the World Bank. The bar chart uses `d3.scaleBand` and `d3.scaleLinear` to show population values, while the scatter plot employs `d3.scalePoint` for country categories. Both are rendered as SVG elements with D3 axes. A color legend is created with `d3.scaleOrdinal` and `schemeCategory10`. The visualization includes an interactive dropdown for selecting a country, though the line chart it targets is not currently rendered.

Wwmielke

91% match

Loading thumbnail…

Dashboard of World Population

This dashboard visualizes the population of the top ten countries, showing both a bar chart and a scatter plot of the most recent population figures alongside an interactive line chart that displays population trends over time. Users can select a country from a dropdown menu to focus on its historical data. Built with D3.js, it uses `scaleLinear`, `scaleBand`, and `scalePoint` to render SVG elements, with animation supported. The population data originates from the World Bank and spans from 1960 onward.

AAfnan Nazir

84% match

Loading thumbnail…

Fork of Fork of Barchart with D3.js

This visualization displays the population of the top 10 most populous countries as horizontal bars, sorted by descending value. It uses D3 v5 with SVG rendering, loading data from a CSV file and scaling populations (normalized by thousands) via `scaleLinear` and `scaleBand`. Axes are generated with `axisBottom` and `axisLeft`, with the y-axis stripped of its domain line and ticks. The code formats tick labels using D3's `format` function, converting billions to ‘B’ suffix.

Wwieswies

84% match

Loading thumbnail…

Fork of Fork of Making a Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart using SVG rendering. It loads population data from a CSV file via `d3.csv`, scales the values with `d3.scaleLinear` and `d3.scaleBand`, and formats axis ticks with `d3.format`. The chart uses `d3.axisLeft` and `d3.axisBottom` for axes, with custom labels and a steelblue fill for bars.

0057SatvikDamera

84% match

Loading thumbnail…

Fork of Let's make a bar chart with D3.js!

This horizontal bar chart displays the populations of the top ten most populous countries, using a D3.js v5 SVG rendering. Data from a CSV file is loaded and scaled linearly for the x-axis and as a banded scale for the y-axis. The code demonstrates fundamental DOM manipulation by appending rectangles and text elements, with axes and labels formatted using D3’s `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` utilities.

DDomen Hribernik

83% match

Loading thumbnail…

Fork of Tutorial 1

This is a horizontal bar chart showing the populations of the top 10 countries in the year 2000. Built with D3 v7, the visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. The bars are rendered as SVGs using `d3.axisBottom`, `d3.axisLeft`, and `d3.selectAll` to draw rectangles. Data is loaded asynchronously via `d3.csv` from a remote GitHub repository.

Pperamranji

83% match

Loading thumbnail…

Fork of Bar Chart using D3

This horizontal bar chart displays population figures for ten countries using a forked D3 example. The visualization maps country names to the y-axis with a band scale and population values to the x-axis with a linear scale. The code imports specific D3 modules like `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file and render SVG rectangles with steelblue fills. Axes are generated using D3’s axis components, with margins applied around the chart area.

Aalisha-zemoso

83% match

Loading thumbnail…

Fork of Bar chart with D3.js!

This bar chart displays the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects. The visualization uses D3.js v6 with an SVG rendering, employing `d3.csv` to load the data and `d3.scaleLinear` and `d3.scaleBand` for the x and y axes. The x-axis labels are formatted from values like 1.4G to 1.4B via a custom tick format function. A background grid is rendered using the axis tick lines.

Aannadehtiarova

83% match