My Bar Chart

100%

✓ Published1🌍 Public

Last edited Sep 30, 2021

Created on Sep 30, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

My Line Chart with dropdown menu

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`.

DDanilo De Rosa

76% match

Loading thumbnail…

My Scatterplot

This scatterplot visualizes daily PM10 emissions in Sacile, Italy, throughout 2020, with each circle representing a day’s measured average. Points are colored red when values meet or exceed the daily limit of 50, marked by a dashed red line, while gray indicates lower readings. The chart uses D3 v7 with SVG rendering, including a time-scaled x-axis, linear y-axis, and a hover tooltip that displays the exact date and value. Data is loaded asynchronously from a CSV file via `d3.csv`, and axes are generated using `d3.axisBottom` and `d3.axisLeft`.

DDanilo De Rosa

75% match

Loading thumbnail…

PM Emissions in the Metropolitan City of Cagliari, multilanguage

A multi-line chart displays daily average PM2.5 and PM10 emissions from monitoring stations in the Metropolitan City of Cagliari, alongside a dashed WHO threshold line. The visualization supports English, Italian, and Sardinian text. Built with React and D3, it uses `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and a Voronoi overlay for interactive tooltips on hover, highlighting values above the threshold.

AAndrea Picciau

72% match

Loading thumbnail…

PM Emissions in the Metropolitan City of Cagliari

This visualization displays daily average PM 2.5 and PM 10 emissions across multiple monitoring stations in the Metropolitan City of Cagliari. The chart shows time series lines with a dashed World Health Organization threshold line, using a Voronoi overlay via `d3.Delaunay` for hover detection. React manages state for pollutant selection and tooltips, while D3’s `scaleTime`, `scaleLinear`, and `line` handle scaling and path generation. Data comes from a CSV of daily emissions, rendered with SVG.

AAndrea Picciau

71% match

Loading thumbnail…

Making a Bar Chart

This example visualizes NYC Air Quality during COVID-19 using a horizontal bar chart, where each bar represents a region’s PM2.5 level, with longer bars indicating higher pollution. The chart loads CSV data with d3.csv, parses the airquality values as numbers, and renders SVG rectangles scaled by d3.scaleLinear and d3.scaleBand. It uses d3.axisLeft and d3.axisBottom to display region labels and a numeric axis, with gridlines and a custom axis title. The bars are styled in lavender with a cornflowerblue background.

Wwaqaschughtai

69% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays weekly PM2.5 air quality levels in midtown Manhattan from February to May 2020, showing a general decline during the early COVID-19 outbreak, with data sourced from the NYC government website. Rendered as an SVG using D3 v5, the visualization employs `csv` to load data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis dates, and `axisLeft`/`axisBottom` for axes. Bars are drawn with `rect` elements, while a light-blue background and lavender fills enhance readability.

AAnnie Liao

69% match

Loading thumbnail…

SVG chart

This example shows two parallel bar charts from the v3 dataset, each plotting PM2.5 concentration (Raw.Conc.) over time, with one chart treating dates as ordinal strings and the other as parsed date objects. The visualization uses D3 v5’s SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis, plus `axisLeft` and `axisBottom` for tick marks. Data is loaded from the 2018.csv file, and each chart’s rect elements are colored steelblue via CSS, while axis labels and titles are styled with D3 text elements.

JJunyanL

68% match

Loading thumbnail…

Median PM2.5 daily concentration

This line chart visualizes median PM2.5 daily concentration across months, with a smooth curve connecting data points. The y-axis measures concentration levels, while the x-axis represents months from January through December. Built with D3 v5, the code uses `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to generate the SVG path. Data is loaded from a CSV file hosted on GitHub Gist, and the chart includes styled grid lines and axis labels. The rendering approach uses an SVG element with margins defining the plotting area.

Llibramanju

68% match