Skip to main content
SimilarExport ZIP
100%

Fork of Question 2

✓ Published0🌍 Public
LLakshmiPrasannaValdas@my.unt.edu
Last edited Apr 15, 2024
Created on Apr 15, 2024
Forked from Question 2

This example presents an interactive stacked bar chart visualizing passenger reviews of British Airways, with population-like values aggregated by country and religion. A color legend allows users to hover over categories, highlighting matching segments in the chart while fading others. The visualization uses D3 v7 APIs including `scaleOrdinal`, `stack`, `flatRollup`, and `scaleBand`, with `@curran/responsive-axes` for layout. Data is loaded from a local CSV file, and interactivity is managed through `setState` and `observeResize`.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Question1

This example displays a stacked bar chart of population by country, segmented by religion, with an interactive color legend that highlights corresponding chart segments on hover. It loads data from a CSV file and uses D3 v5 APIs including `scaleOrdinal`, `schemeCategory10`, and `select`, while relying on `observeResize` from `@curran/responsive-axes` for responsive sizing. The visualization is built through local ES6 modules that separate the chart, legend, and data-parsing logic, with population values converted to millions for readability.

Vvishu.valandas@gmail.com
80% match
Loading thumbnail…

Fork of Question 2(2)_Activity 6

This example shows a horizontal bar chart of population data for 20 countries in 2010, using a green fill for each bar and a blue axis. It loads data from a remote CSV file via `d3.csv` and renders the visualization with React, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The chart includes custom axis components built with SVG, tick formatting through `format('.2s')` to convert values to billions, and tooltips via SVG `<title>` elements.

Ttallavijayalakshmi0710@gmail.com
76% match
Loading thumbnail…

task 8_Q3

This stacked bar chart shows the distribution of passenger ratings across different categories (such as seat comfort, cabin staff service, and food) for various airlines. Each horizontal bar represents an airline, with colored segments showing the percentage of reviews for each rating level. The visualization uses d3.stack and d3.scaleOrdinal to create the stacked segments, with d3.axisBottom and d3.axisLeft for the axes. Hovering over a segment triggers a tooltip displaying the exact percentage for that rating category, implemented via mouseover/mousemove events. The data comes from a CSV of airline reviews, and the SVG rendering uses custom fonts from Yanone Kaffeesatz and Sofia.

LLakshmiPrasannaValdas@my.unt.edu
76% match
Loading thumbnail…

Question 2

This stacked bar chart visualizes religious demographics across the top 20 most populous countries, with population values in millions. The visualization uses D3.js version 7.8.5, employing `scaleOrdinal` and `schemeCategory10` for color encoding, `flatRollup` and `stack` for data aggregation, and `scaleLinear`/`scaleBand` for axes. A color legend provides interactive filtering—hovering a religion name highlights the corresponding segments while fading others. The data comes from the CSV file `religionByCountryTop20.csv`, with responsive layout handled by `observeResize` from `@curran/responsive-axes`.

Eeedaraajay02@gmail.com
76% match
Loading thumbnail…

Activity6_question 2

This interactive stacked bar chart visualizes the population distribution across religious affiliations for 20 countries, sourced from a CSV file. Users can hover over either the legend or the stacked bars to highlight a specific religion, with non-matching segments fading to low opacity. The visualization uses D3's `scaleOrdinal` for colors, `stack()` for creating the stacked segments, and `scaleBand` for the categorical country axis. A custom `colorLegend` module handles the interactive hover states, while `@curran/responsive-axes` manages the axes and labels.

Ssasidhharreddy@gmail.com
76% match
Loading thumbnail…

CV: Stacked Bar Chart with Interactive Color Legend

This example presents a stacked bar chart visualizing the religious composition of populations across countries, using data from the CSV. An interactive color legend allows users to hover over religions to highlight corresponding segments while dimming others, and clicking a bar selects it with a black outline. Built with React and D3.js v7, the visualization uses `d3.stack` for data processing, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for scales, and renders SVG elements with smooth opacity transitions. The chart includes custom axes and labels, leveraging D3's data join mechanism for efficient updates.

CCurran Kelleher
75% match
Loading thumbnail…

Fork of QUESTION 1 (2)

This bar chart displays the 2010 population for 20 countries, using horizontal bars to compare values on a linear scale, with the y-axis listing each country’s name. Built with React and D3 version 5, the visualization uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components that render SVG rectangles and tick lines, with a `d3.format` function converting large numbers into a readable "B" suffix for billions. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the SVG output is styled with inline CSS classes for ticks and marks.

Jjaideeptripurani12@gmail.com
74% match
Loading thumbnail…

Fork of question 2

This interactive bar chart visualizes the population of 20 countries for the year 2010, sourced from a CSV file fetched via `d3.csv`. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numerical x-axis. The SVG rendering includes custom axis components, tooltips via `<title>` elements, and a tick format that converts large numbers to billions using `d3.format`.

Aamshureddy13@gmail.com
74% match