Line chart with multiple dropdowns

100%

Line chart with multiple dropdowns

✓ Published4🌍 Public

Last edited Apr 23, 2024

Created on Apr 16, 2024

Forked from Line Chart with Country Dropdown

This example displays two line charts comparing Olympic medal counts over time for two countries selected from dropdown menus. The visualization uses D3’s `scalePoint` and `scaleLinear` for axes, `flatGroup` to organize data by country, and an ordinal color scale from `schemeSet2` to distinguish the lines. Dropdown menus are populated from the `yearlyData` dataset, and changes trigger redraws via the `viz` function. The chart includes a gray inner rectangle and axes rendered using the `@curran/responsive-axes` library.

AI-generated description

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Fork of Line Chart with Country Dropdown

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.

SSushmaNamidi@my.unt.edu

86% match

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

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

81% match

Loading thumbnail…

Multiple Line plot with Dropdown

A dropdown menu controls the y-axis metric of a multi-line chart tracking London air quality from January 2010 to August 2018, using particulate matter and gas concentration data from the London Datastore. The visualization displays nine color-coded time series, one per year, with a legend on the right. Built with D3 v5, it uses `d3.nest` to group data by year, `d3.line` with `curveBasis` for smoothing, and `d3.scaleTime` for the x-axis. A custom `dropdownMenu` module handles user selection, triggering a 1.5-second `transition.attrTween` animation when switching metrics.

KKCachel

77% match

Loading thumbnail…

Multiple Line plot with Dropdown

This visualization displays multiple line plots of London's monthly air quality data, allowing users to select different pollutants (like PM2.5 or PM10) from a dropdown menu. Each line represents a year from 2010 to 2018, with a color legend mapping years to distinct shades. The D3 v5 code uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `nest` to group data by year before generating paths with the `line` generator. The dropdown menu is built via a custom `dropdownMenu` component that triggers re-rendering with the newly selected column. Data originates from the Kings College London Air Quality Dataset via the London Datastore.

SShabani Muswamba

76% match

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive visualization displays a multiple line plot of air quality data, allowing users to compare trends across different pollutants via a dropdown menu. The chart plots daily values for each pollutant across time, with lines colored by category. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `nest`, and `line` to generate smooth curves, while a custom `dropdownMenu` component handles user selection. The data comes from the London Datastore, and the visualization updates dynamically with animated transitions on the SVG paths.

LLex

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

76% match