Week2

100%

✓ Published0🌍 Public

Last edited Jan 24, 2016

Created on Jan 24, 2016

This visualization displays historical Summer Olympics data, showing the number of male and female participants for each Olympic Games from 1936 to 2012 using horizontal stacked bar charts. D3.js with SVG rendering animates the transition between different years when the user selects a new Olympic Games. The chart uses d3.scale.linear for positioning bars along the x-axis and d3.scale.ordinal for the y-axis categories, with tooltips providing details about each year's statistics. The data is embedded directly in the HTML file as a JSON array.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/N0taN3rd/'>N0taN3rd</a>'s block: <a href='http://bl.ocks.org/N0taN3rd/ade3f98f9a9c2d627d13'>Week2</a>

Similar vizzes

Loading thumbnail…

Week2

This bar chart shows the number of countries participating in the Summer Olympics from 1896 to 2012, with each bar representing one Olympic year. The visualization animates the bars and includes a tooltip displaying the host city and country when hovering over each bar. Built with D3.js v3, the chart uses d3.scale.ordinal and d3.scale.linear for positioning, d3.svg.axis for axes, and SVG rectangles to render the data from data.json.

NN0taN3rd

89% match

Loading thumbnail…

John Berlin CS725 Information Visualizatoin

This visualization presents Summer Olympic data as two interactive charts. A scatter plot maps the number of male and female participants on its axes, with circle area encoding total participants. A bar chart shows the number of countries per Olympic year, with each bar colored by the hosting country. The implementation uses D3.js version 3 to render SVG elements and axes, reading data from a JSON file derived from sports-reference.com, with tooltips and animations enhancing the display.

NN0taN3rd

84% match

Loading thumbnail…

better

A line chart displays the number of Olympic events held from 1904 to 2012, using data from a JSON file that includes details on participants, countries, and sports for each Summer Games. The visualization uses D3 v3 to create the chart, applying a time scale for the year axis and a linear scale for event counts, with a basis interpolation smoothing the line. The code sets a fixed y-domain from 43 to 303 events, and styling applies a steelblue line with axis labels, though the y-axis text is mislabeled as "Temperature (ºF)."

NN0taN3rd

77% match

Loading thumbnail…

Vizhub_start

This interactive visualization displays the proportion of female athletes and medal winners across countries in selected Olympic years, with a dropdown menu to switch between historical periods such as 1912, 1936, and 2016. It uses D3 v6 with SVG rendering and animated transitions, scaling country bands vertically to accommodate the number of participating nations. The chart features a dumbbell plot comparing athlete and medal proportions, gridlines, a 50% reference line, and legends. Data comes from a CSV file hosted on GitHub, fetched via `d3.csv`, with axes and scales updated dynamically through the `update` function.

Vvspvikram

76% match

Loading thumbnail…

Untitled

Three interactive bar charts show employment rates for female and male groups across three Olympic years. Buttons for 2008, 2012, and 2016 trigger updates that transition the bars with a 1000-millisecond animation using D3 v6’s `transition()` method. The SVG chart uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and a data join pattern with `enter`, `merge`, and `exit` selections to handle changes. The page loads D3 from a CDN inside a React wrapper.

Mmandu427

75% match

Loading thumbnail…

Bar Chart Race

An animated bar chart race tracks total Summer Olympic medals earned by each country from 1896 onward. The visualization smoothly interpolates bar positions and widths between yearly data snapshots using D3 transitions applied to SVG rectangles, with a reusable join pattern for entering, updating, and exiting elements. A ticker and axis labels update along with the bars, driven by a data-driven keyframe generator. The chart also displays country name labels and animated value counts by leveraging D3’s `transition` and text-tweening, with a replay button to restart the sequence.

AAniketShahane

75% match

Loading thumbnail…

Question 4

This bubble chart visualizes Olympic athletes from Summer Games between 2000 and 2016, plotting average weight on the x-axis and average height on the y-axis for each sport, with bubble size representing average athlete age. The code uses d3.csv to load data from the TidyTuesday Olympics dataset, then applies d3.rollup to aggregate athletes by sport and d3.mean to calculate averages. Filters exclude non-medalists, missing height/weight data, and sports with fewer than 10 medal winners. The SVG rendering includes axes via d3.axisBottom and d3.axisLeft, plus hover tooltips with opacity transitions. Only sports with complete data appear in the visualization.

MMohammed Abdul Mannan

74% 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

73% match