Fork of Fork of Olympic Data stacked Bar Graph

100%

Fork of Fork of Olympic Data stacked Bar Graph

✓ Published0🌍 Public

Last edited Apr 10, 2024

Created on Apr 10, 2024

Forked from Fork of Olympic Data stacked Bar Graph

A stacked bar chart visualizes a subset of Olympic student performance data, plotting gender-race/ethnicity combinations against stacked score components for math, parental education level, and writing. The visualization uses D3.js v7’s `d3.stack()` with a diverging offset, `d3.scaleBand` for the categorical x-axis, and `d3.scaleLinear` for the y-axis, rendered as SVG rectangles. Data is loaded via `d3.csv` from a GitHub gist, sorted and truncated to the top 20 entries, with axes, rotated labels, and a legend created through D3’s axis and selection APIs.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Olympic Data stacked Bar Graph

This visualization displays Olympic medal data as a stacked bar chart, breaking down participation by continent (Asia, Africa, Americas, Europe) for each year. The chart uses color-coded segments to compare continental contributions, with an interactive color legend that highlights and fades specific regions on hover. The implementation uses several D3 libraries including `d3.flatRollup`, `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` for rendering. Data is fetched asynchronously from a CSV source hosted on GitHub, then parsed with `csvParse`. Custom helper modules like `colorLegend` and responsive axes from `@curran/responsive-axes` handle interactive elements and layout adjustments.

85% match

Loading thumbnail…

Fork of Olympic Data stacked Bar Graph

This example shows Olympic medal counts for countries as a horizontal stacked bar chart, with Gold, Silver, and Bronze segments colored using a d3 ordinal scale. Hovering over a legend item highlights that medal type in the bars while fading others. The visualization uses d3.stack for data transformation, d3.scaleBand and d3.scaleLinear for axes, and custom mouseenter/mouseleave handlers to update a hovered state, re-rendering the chart with adjusted opacity and stroke.

EElena Momtcheva

82% match

Loading thumbnail…

Fork of Fork of Olympic Data stacked Bar Graph

This stacked bar chart visualizes population data for U.S. states, with each bar segmented by color to show the proportional contribution of different data categories. The visualization uses a horizontal layout where bar lengths are scaled linearly against population values. Built with the d3 library, the chart employs `scaleLinear`, `scaleBand`, `stack`, and `flatRollup` to process and arrange the data. The color legend supports interactive hover effects, allowing viewers to highlight specific categories within the stacked bars. Data comes from a CSV file loaded directly from a GitHub gist.

81% match

Loading thumbnail…

Fork of D3 Starter

This bar chart visualizes the popularity scores of 120 athletes, sorted in descending order, with truncated tick labels and a sampled axis to manage the dense categorical axis. Built with D3 v7, it loads CSV data via `d3.csv` and `d3.autoType`, then uses `d3.scaleBand` and `d3.scaleLinear` to map names and scores. The SVG output is rendered using `d3.select`, `join`, and axis generators like `d3.axisBottom` and `d3.axisLeft`. Tooltips are added via SVG `<title>` elements, and the chart includes clear axis titles and a main heading.

Ssarasaketh3@gmail.com

80% match

Loading thumbnail…

Fork of Fork of Student Scores Bar Char

This horizontal bar chart displays student scores from a CSV file, with each student’s name on the y-axis and their score on the x-axis from 0 to 100. Purple rectangles represent the scores, and hovering over a bar reduces its opacity. The visualization uses D3 v5 with `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render the SVG. The chart is titled “Bar Chart of Student Scores” and includes labeled axes with a fixed margin layout.

Oolddb

79% match

Loading thumbnail…

Fork of Fork of STUDENT'S SPORTS DATA VIZ

A bar chart displays the average score for each favorite subject, derived from a CSV dataset via `d3.csv` and aggregated with `d3.rollup`. Bars animate upward from the baseline using `transition().duration(900)`, and hover interactions change fill color and show a tooltip. The visualization uses D3 v7 with SVG rendering, including axes generated by `d3.axisBottom` and `d3.axisLeft`, while subject labels are rotated for clarity. The title and axis labels are added as SVG text elements, and all data is filtered for valid subject and score entries before aggregation.

SSYAM TEJ

79% match

Loading thumbnail…

Fork of Student Scores Bar Chart

This bar chart visualizes student scores as horizontal bars, with each bar’s length representing a score value. The chart is rendered as an SVG using D3 v5, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. It loads data from a CSV file and applies an axis layout. The bars are styled purple and become semi-transparent on hover via CSS.

Ppemmasaniprudhvinadh

79% match

Loading thumbnail…

Fork of HTML Starter

This visualization summarizes student and sports data from a CSV file, displaying key statistics such as total student count, unique favorite subjects, and the top team. It presents these findings in a simple SVG bar chart that shows team counts, with axes labeled using D3's `d3.axisBottom` and `d3.axisLeft`. The data is loaded via `d3.csv` and processed using `d3.rollups` and `d3.scaleBand`, resulting in an accessible chart with a summary section and rotated x-axis labels for readability.

SSYAM TEJ

79% match