Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Country Dropdown

✓ Published0🌍 Public
SSushmaNamidi@my.unt.edu
Last edited Apr 25, 2024
Created on Apr 25, 2024

This interactive line chart displays Olympic medal counts over time, filtered by a country selected from a dropdown menu. The visualization uses D3.js (v7.8.5) with `scalePoint`, `scaleLinear`, and `scaleOrdinal` for coordinate mappings, plus `line` for path generation and `schemeSet1` for color assignment per country line. The data comes from `yearlyData` with `@akankshapawar1/0da3036dadbb4073a2b05b0b1a1957b4`, while `observeResize` from `@curran/responsive-axes` handles responsive resizing and `axes` from the same library draws axes and labels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart with Country Dropdown

This interactive line chart visualizes Olympic medal counts over time for a selected country. A dropdown menu populated with unique countries from the dataset lets users filter the view, displaying a single line for the chosen nation. The visualization uses D3.js (v7) APIs including `scalePoint`, `scaleLinear`, `scaleOrdinal`, `line`, and `flatGroup` to map years and medal totals, with `observeResize` from `@curran/responsive-axes` managing responsive dimensions. The chart renders an SVG with axes, gridlines, and a colored line, updating dynamically on selection changes.

Ccoreyfnolan@gmail.com
95% match
Loading thumbnail…

Line Chart with Country Dropdown

This line chart displays a country's total medal count each year, with a dropdown menu to switch between countries. The visualization initially draws a line for the selected country, filtering the yearly data accordingly. The chart is built using D3.js, specifically `select`, `scalePoint`, `scaleLinear`, and `line`, along with the `responsive-axes` library for layout. The SVG is rendered directly to the container, and the dropdown listens for a `change` event to trigger a redraw with a filtered dataset.

AAkanksha
86% match
Loading thumbnail…

Fork of Line chart with multiple dropdowns

This chart displays a single line for one country across one variable, with two dropdown menus to select the country and the metric (life expectancy, CPI, or tax revenue). Built with D3 v7, it renders an SVG line chart using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and a `d3.line` path generator. The dropdowns are populated from static sample data, and a change event triggers the `update` function to redraw the line and axes.

LLayaMyadam@my.unt.edu
83% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart with multiple lines visualizes yearly data across countries, using color-coded lines to show trends over time. The visualization displays the data through D3.js’s `scaleLinear`, `scaleOrdinal`, and `schemeDark2` for color mapping, with a custom `colorLegend` component. Lines are generated with the `line` function and `flatGroup` aggregates data by country. The chart includes axes via `axes` from `@curran/responsive-axes` and a semi-transparent inner rectangle background, with opacity applied to lines for readability.

AAkanksha
80% 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
78% 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
77% match
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.

MM
77% match
Loading thumbnail…

Fork of Responsive Axes

This visualization presents a horizontal bar chart ranking the top ten countries by total Olympic medals, using data from the `@akankshapawar1/olympics` package. The chart’s key feature is its responsive axes, which maintain consistent tick mark density as the window resizes. It uses a `ResizeObserver` to capture viewport dimensions and dynamically adjusts the number of ticks passed to `axisBottom` and `axisLeft` from D3, ensuring the axis labels never become overly crowded or sparse. The example highlights a reusable technique for creating axes that adapt gracefully to any screen size.

AAkanksha
77% match