Workshop Results

100%

Workshop Results

✓ Published0🌍 Public

Last edited Apr 19, 2020

Created on Apr 19, 2020

Four small-multiple bar charts compare population outcomes across four driving automation modes—Default, Workshop, Shared, and Autonomous—for ten countries. A dropdown menu switches the comparison between pairs of phases. The stacked bars are rendered as SVG rectangles, animated via `transition().duration()`, with axes built using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5. Data comes from World Population Prospects 2017, loaded from a remote JSON endpoint.

AI-generated description

Data from World Poupulation Prospects 2017

MIT Licensed

Similar vizzes

Loading thumbnail…

Workshop Results

This visualization compares population projections across four mobility scenarios—Default, Workshop, Shared, and Autonomous—using stacked bar charts. A dropdown menu switches between three pairwise comparisons, and each chart animates via `transition().duration()` to reflect the selected phase. The data, sourced from World Population Prospects 2017, is rendered as SVG using `d3.stack()`, `scaleLinear`, and `scaleBand`. Axes are generated with `axisBottom` and `axisLeft`, while `d3.format` customizes tick labels with abbreviations like "Mrd" for billions.

CChristoph Diefenthal

88% match

Loading thumbnail…

bar chart laboratorio 4

This horizontal bar chart displays the populations of ten countries from the UN Population 2019 dataset. The bars are rendered as SVG rectangles, with population values mapped to bar length and country names on the y-axis. The code uses D3 v6 and React, employing `scaleBand` and `scaleLinear` for scales, and a custom `Marks` component to generate the rectangles. A mouseover tooltip reveals the exact population value, formatted using D3's `format` function with a `.2s` suffix.

Llimeroc

68% match

Loading thumbnail…

Project

This interactive bar chart visualizes country-level data from a CSV file, allowing users to filter by continent and select among numerous socioeconomic metrics. The visualization updates dynamically, showing one bar per country, with bars sortable by population in ascending or descending order. Built with D3 v5, it uses `scaleBand`, `scaleLinear`, and `d3.select` for DOM manipulation, while rendering as SVG with animated transitions. Dropdown menus and buttons control the displayed subset, leveraging D3's data-binding capabilities.

Ppatricknicholas27@gmail.com

68% match

Loading thumbnail…

bar graph

A horizontal bar graph displays population counts for four countries using D3 v6. The visualization renders as SVG, with steelblue bars representing each nation's population, sorted alphabetically by country name. The chart reads population data from a CSV file, multiplies the values by 1000, and uses D3's `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Axes are generated with `axisLeft` and `axisBottom`, while the bar rectangles are appended dynamically to the SVG group.

Eevsjg

68% match

Loading thumbnail…

Making a Bar Chart

This example visualizes population data for ten countries as a bar chart, with counts adjusted by a factor of one thousand. Built with D3 v5, it uses `select`, `csv`, `scaleLinear`, `scaleBand`, `max`, `axisBottom`, `axisLeft`, and `format` to render SVG elements. The chart draws steelblue bars and labels each with its population value, while comments indicate optional axes and gridlines that are currently disabled.

JJens Grochtdreis

68% match

Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects. Built with D3 v5, it demonstrates custom axes through `scaleLinear` and `scaleBand` for positioning. However, the working code renders a single animated rectangle that shifts horizontally every two seconds via `setInterval`, while the chart's data loading and population scaling are present in the CSV parsing. The SVG rendering and steelblue fill are styled through CSS.

Iinroadings

67% match

Loading thumbnail…

EXPLORING BAR CHART v2

A sorted horizontal bar chart compares population counts for ten countries from a CSV file. Bars render in SVG with a green fill, and hovering highlights a bar while a tooltip div shows the country name and population. A click toggles bar color between green and magenta, and the chart calculates and displays a sum of all selected populations in a separate box. The visualization uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.axisBottom with dashed gridlines. Tooltip and selection logic rely on D3’s `.on('mouseover')`, `.on('mouseout')`, and `.on('click')` event handlers, with transitions animating the color changes.

GGuillamon

67% match

Loading thumbnail…

Let's make a barchart

An interactive SVG bar chart displays population figures for ten countries, using horizontal bars ordered by country name from top to bottom. The chart renders steel-blue rectangles with axes labeled on the left and bottom, sized to fit a 960 by 500 pixel canvas. The visualization uses D3 v5 APIs including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file, scale values, and draw the chart. Data originates from the World Population Prospects 2017 dataset, with population values multiplied by 1,000 during preprocessing.

CChristoph Diefenthal

67% match