Week2

100%

✓ Published0🌍 Public

Last edited Jan 27, 2016

Created on Jan 24, 2016

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.

AI-generated description

Built with blockbuilder.org

R code to accompany the week2 d3 portion

countries <- c(12, 31, 15, 21, 22, 29, 29, 45, 46, 47, 49, 59, 
               69, 67, 83, 93, 112, 121, 92, 80, 140, 159, 169, 197, 200, 201, 204, 205)
years <- c(1896, 1900, 1904, 1906, 1908, 1912, 1920, 1924, 1928, 1932, 1936, 
           1948, 1952, 1956, 1960, 1964, 1968, 1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012)

barX <- barplot(countries,xlab = "Years", beside=TRUE)
text(barX, 0, round(years,1),cex=0.8, pos=3,srt=90)

week2

Similar vizzes

Loading thumbnail…

Week2

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.

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

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

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

78% match

Loading thumbnail…

Bar chart

A horizontal bar chart displays Olympic medal counts for ten countries, sourced from data.csv. Using the React framework and D3 v5, the visualization maps medal counts to bar widths via a linear scale and country names to vertical positions via a band scale. The SVG rendering includes axes created with axisLeft and axisBottom, with bars styled as rect elements. Data is loaded and parsed asynchronously with csv, converting medalCount values to numbers for quantitative scaling.

KKams2015

76% match

Loading thumbnail…

Version three - part 1: Summer Olympics Gold Medal Count For Selected Country

A line chart displays the gold medal count for each Summer Olympics from 2000 to 2012 for a user-selected country. Five colored lines, each with circular markers per year, trace the performance of five countries simultaneously. The visualization uses React with D3 v5 APIs including `nest`, `scaleLinear`, `line`, and `axisBottom`; a dropdown menu triggers an `updateLine` function that redraws the chart with filtered data. Data originates from a Kaggle dataset hosted as a GitHub gist, with counts based on individual athletes rather than events.

RRuofan Chen

75% match

Loading thumbnail…

Version one: Summer Olympics Gold Medal Count For Selected Country

This interactive line chart displays the Summer Olympics gold medal count for a selected country between 2000 and 2012, highlighting performance trends across four Olympic games. A dropdown menu lets users choose among all countries represented in the dataset, which is sourced from Kaggle’s Olympic Games data. The visualization uses React for the dropdown interface and D3 v5 for rendering SVG paths via `d3.line` and `d3.scaleLinear`. Each line connects four data points, and a `colorLegend` component identifies the current country. The chart updates dynamically on selection change, removing and redrawing axes and lines.

RRuofan Chen

74% match

Loading thumbnail…

Vertical Bar chart

A vertical bar chart displays the top five countries by total Olympic gold medals from 1896 to 2018, sourced from Wikipedia via a CSV file. Using React and D3 v6, the visualization renders SVG rectangles with scales from `scaleBand` and `scaleLinear`. Custom axis components generate tick labels and grid lines, while the data is loaded asynchronously and sorted in `useData`.

Kkragovic

74% match