Making a Bar Chart

100%

Making a Bar Chart

✓ Published0🌍 Public

Last edited Jun 11, 2020

Created on Jun 11, 2020

Forked from Loading and Parsing CSV Data

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.

AI-generated description

A program that loads and parses some CSV data: CSS Named Colors.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

NYC Air Quality Area Chart

This area chart tracks NYC PM2.5 air pollution levels from February to May 2020, showing a decline in particulate matter during the early COVID-19 period. The visualization uses D3 v5 with an SVG rendering, employing `scaleTime` and `scaleLinear` for axes, an `area()` generator with `curveBasis` for the smoothed fill, and `axisLeft`/`axisBottom` for ticks. Data is loaded from a local CSV file via `d3.csv` and mapped to the weekly measurements.

AAnnie Liao

83% match

Loading thumbnail…

Making a Bar Chart for air quality data

This example displays a horizontal bar chart of air quality index values for nine Indian cities, from Delhi with the highest reading down to Chandrapur. The visualization shows each city’s AirQuality value as a gray bar extending from the left axis. The code uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft` and `axisBottom` to render the tick marks. Data is loaded from a local CSV file via `d3.csv`, which is then scaled and drawn as SVG rectangles.

NNita

82% match

Loading thumbnail…

NYC Air Quality Line Chart

A line chart tracks NYC’s weekly PM2.5 air pollution levels from February to May 2020, revealing a declining trend during the early COVID-19 period. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generator, rendered as an SVG on a blue background with a lavender stroke. Data comes from the NYC government website, loaded via `csv()`. The chart includes labeled axes for time and PM2.5 concentration, with gridlines, but no data points or smoothing curves.

AAnnie Liao

82% match

Loading thumbnail…

Fork of Making a Bar Chart

This visualization displays the daily Air Quality Index (AQI) values for two pollutants, NO2 and Ozone, as horizontal bars. It shows how AQI levels fluctuate over time for each pollutant type, with the x-axis representing AQI values and the y-axis listing pollutant categories. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG, with data loaded from a local CSV file. Custom axis label formatting is applied using D3's `format` function, and the chart includes a title and axis label for the AQI value.

CChase Hall

81% match

Loading thumbnail…

backup bar chart

This example visualizes air quality index values for various pollutants in Maine using a horizontal bar chart. The chart displays pollutants along the y-axis and their corresponding AQI measurements along the x-axis. It loads the CSV data using D3's `csv` utility and renders the SVG bars and axes with React, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The code also includes tick marks and labels generated from the scales.

CChase Hall

81% match

Loading thumbnail…

Making a Scatter Plot

A scatter plot displays weekly PM2.5 air quality levels in midtown Manhattan from February to May 2020, sourced from the NYC government website. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scalePoint` for the y-axis dates. Circles are positioned with `cx` and `cy` attributes, while `axisLeft` and `axisBottom` generate gridlines. The chart highlights declining air pollution during the early COVID-19 outbreak period.

AAnnie Liao

80% match

Loading thumbnail…

Air Quality in NYC Boroughs

This visualization displays air quality measurements for New York City boroughs, showing bar charts for PM2.5, NO2, and O3 levels. Users switch between pollutants via buttons, which update the chart title and redraw the bars. The D3 v7 code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` for axes. Hovering over a bar reveals the value differences between that borough and all others, using D3 transitions and appended text labels.

XXinyu Huang

79% match