My Line Chart with dropdown menu

100%

My Line Chart with dropdown menu

✓ Published0🌍 Public

Last edited Sep 30, 2021

Created on Sep 30, 2021

This interactive line chart visualizes daily PM10 emissions for various Italian municipalities during 2020. A dropdown menu allows users to switch between the different locations, and the line path animates smoothly to the new data when a selection is made. The chart is built using D3.js v6, which handles the SVG rendering, time-based x-axis scaling, linear y-axis scaling, and the dropdown's change event listener. The data is loaded from a CSV file fetched via `d3.csv`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive line chart visualizes monthly average PM2.5 and PM10 particulate levels across London from January 2010 to August 2018, using a dropdown menu to compare different air quality measurements. Built with D3 v5, the visualization renders smooth time-series lines using `d3.line()` and `d3.curveBasis`, with axes scaled via `d3.scaleTime()` and `d3.scaleLinear()`. The dropdown, implemented through a custom menu component, triggers smooth transitions (1500ms) as the Y-axis data changes. Color-coded by year, the chart includes a D3 ordinal color legend, while the dataset originates from the Kings College London Air Quality Dataset in the London Datastore.

YYash G

79% match

Loading thumbnail…

Multiple Line plot with Dropdown

This visualization displays monthly air quality measurements for PM2.5 and PM10 particulates in London from 2010 to 2018, using a dropdown menu to switch between different pollutant metrics. Multiple colored lines represent individual years, with a color legend distinguishing each annual series. The SVG chart uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to render the paths, while d3-transition animates updates. Data comes from the Kings College London Air Quality Dataset via the London Datastore, loaded as CSV using d3.csv.

LLex

77% match

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive visualization displays monthly air quality levels for PM2.5 and PM10 particulates in London from 2010 to 2018, with each year represented by a colored line. A dropdown menu allows users to switch between different pollutant measurements, updating the y-axis and line chart accordingly. Built with D3 v5, the SVG rendering uses `scaleTime` and `scaleLinear` for axes, `nest` to group data by year, and `line` with `curveBasis` for smooth paths. Data comes from the Kings College London Air Quality Dataset via the London Datastore.

Lluavabo

77% match

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive visualization displays monthly air quality measurements from the London Datastore, plotting pollutant concentrations over time with a dropdown menu to switch between different pollutants. The chart renders smooth multi-line paths for each year using d3.line and curveBasis, while a dynamic y-scale and axis labels update to reflect the selected measurement. The dropdown menu, built with d3.select and .on('change'), triggers a render function that recomputes the line chart with the newly chosen column. Color-coded lines distinguish annual trends, with a legend explaining the color scale.

KKeerthiKandadai

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…

My Bar Chart

This bar chart displays average PM10 emissions during 2020 across municipalities in the Friuli Venezia Giulia region, sorted from highest to lowest values. The visualization includes a red dashed line marking the annual limit of 40 units, with a tooltip that appears on hover to show exact values for each location. Built with D3 v7, the chart uses `d3.csv` for data loading, `scaleLinear` and `scaleBand` for axes, and `d3.axisBottom` and `d3.axisLeft` for rendering. The SVG rendering includes animated transitions for tooltip opacity changes on mouse events.

DDanilo De Rosa

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

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