Skip to main content
SimilarExport ZIP
100%

Lab 4

✓ Published1🌍 Public
XXuân Vinh
Last edited Nov 2, 2023
Created on Nov 1, 2023
Forked from Lab3

This interactive bar chart displays the GRDP of Vietnamese provinces, with bars colored on a sequential orange scale and labeled by province name. Users can dynamically add or remove provinces via buttons, triggering transitions that highlight bars in green before restoring their color. Built with D3 v7, the visualization uses `scaleLinear`, `scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render SVG elements. Data is loaded as CSV from a remote URL, and each update clears and redraws the chart to reflect the current dataset.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lab3

This scatter plot visualizes Vietnamese provinces by population on the x-axis and GRDP per capita on the y-axis, with circle size encoding land area and color representing population density. The D3.js code loads CSV data via `d3.csv`, uses `scaleLinear` for axes, `scaleSqrt` for area-proportional circles, and `scaleOrdinal` with `schemeCategory10` for discrete density colors. Axes are generated with `axisBottom` and `axisLeft`, while `opacity` reduces overplotting. The SVG rendering is fixed at 600×300 pixels with margins, and the data originates from a GitHub-hosted CSV file.

XXuân Vinh
84% match
Loading thumbnail…

barGraph Projet

This bar chart visualizes country populations in 2022, using data from a CSV file and a pre-aggregated JSON dataset. It presents a dual encoding with rectangular bars and overlaid blue circles, and includes ascending/descending sort buttons with animated transitions via `transition().duration()`. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`), axes (`axisLeft`, `axisBottom`), and mouseover tooltips to display country details. The SVG-rendered chart updates dynamically on button clicks.

Llanphuonglenguyen
73% match
Loading thumbnail…

Map of Vietnam

This map of Vietnam displays the country’s provincial boundaries as grey regions with blue outlines. Built with React and D3 v4, it uses `d3.geoMercator` for projection and `d3.geoPath` to render features filtered from the world GeoJSON dataset. The visualization loads world geography from a remote source, isolates Vietnam’s geometry, and presents the result in an SVG canvas with a simple green background.

KKevin Raj
70% match
Loading thumbnail…

barGraph

This bar chart visualizes the 2022 population of countries from a CSV dataset, with each bar's height representing population count. Blue circles overlay each bar, and users can click the Ascending or Descending buttons to re-sort the data. The visualization uses the D3 v5 library to render SVG elements with animated transitions, employing `scaleBand` and `scaleLinear` for axes, and features a tooltip on mouseover.

Llanphuonglenguyen
68% match
Loading thumbnail…

Province Data Compare

The visualization compares case numbers across Chinese provinces using a grouped bar chart, with bars representing "OurData" and "ActrualData" from a JSON dataset. It renders SVG bars that animate upward on load, while axes and legend fade in sequentially. Built with D3 v3, it uses ordinal scales for categorical positioning, linear scaling for values, and transitions to animate bar heights and element opacity. Hover interactions darken bar colors, and the chart includes rotated x-axis labels for province names.

LLex
68% match
Loading thumbnail…

D3 Bar chart

This bar chart visualizes the confirmed COVID-19 case counts across several Chinese provinces, using data from a local CSV file. It employs an SVG rendering approach with D3 v4's `scaleBand` for the categorical province axis and `scaleLinear` for the continuous case count axis. The chart displays horizontal bars whose heights are proportional to the number of cases, with axes labeled and styled using `d3.axisBottom` and `d3.axisLeft`. The file is a static, non-interactive visualization generated entirely through D3's imperative API.

Vvine-web
68% match
Loading thumbnail…

Untitled

This interactive bar chart displays GDP per capita for a selection of countries, with bars colored in blue and one highlighted in orange. Users can hover over individual bars to see details and click a checkbox to sort the values in descending order. Built with React and D3 v4, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to SVG coordinates, with `d3.axisBottom` rendering the x-axis labels. The dataset is embedded directly in the code, and CSS classes define the bar colors for normal and highlighted states.

UUtsav Vachhani
68% match
Loading thumbnail…

A6_LineChart with 4 qualitative color scale

This line chart visualizes the GDP of four Southeast Asian countries—Vietnam, Thailand, Indonesia, and Malaysia—from 2012 to 2022, using a qualitative color scale with distinct hues for each nation. The chart employs D3.js v7 to create SVG paths for each country’s trend line, with an ordinal color scale mapping countries to specific colors. A legend generated via d3-legend and an ordinal color scale is displayed horizontally. The data is loaded from a CSV file and parsed, with axes rendered using d3.axisBottom and d3.axisLeft.

DDuc Pham
68% match