This article will demonstrate the data ingestion & exploration and visualization for dataset AirQuality [NYC AQ] provided by NYC OpenData.

1. Data Source

Data for

1. nyc opendata airquality [Link]

2. Ingest Data

csvdata = (async () => {
  const response = await fetch(
    "https://data.cityofnewyork.us/resource/c3uy-2p5r.csv"
  );
  return await response.text();
})()

to parse

airquality = d3.csvParse(csvdata)

3. Data Visualizations

Plot.plot({
  marks: [
    Plot.barY(
      airquality,
      Plot.groupX(
        {
          y: "mean",
          title: (d) =>
            `Mean air quality: ${(
              d.reduce((acc, curr) => acc + curr.data_value, 0) / d.length
            ).toFixed(0)} \n Air particle: ${d[0].name}`
        },
        {
          x: "name",
          y: "data_value"
        }
      )
    ),
    Plot.ruleY([0])
  ]
})

Conclusion

Learning Objectives,

1. Observable Plot

2. Data Ingestion

3. Data Visualization

Source: NYC OpenData [Link], Observablehq NoteBook [Link]

Author: Dheeraj. Yss

Connect with me:

• My Twitter

• My LinkedIn

• My GitHub

• My Hashnode