Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Causes of Air pollution in Geneva-1

✓ Published3🌍 Public
NNita
Last edited Jan 3, 2021
Created on Jan 3, 2021

This visualization shows a cause-and-effect network of air pollution in Geneva, mapping root factors like climate change, air traffic, and commuter traffic through a directed graph of linked nodes. Each node represents a contributing cause, with links illustrating causal relationships. The code uses the D3.js v5 library with the `d3.sankey` layout, a custom module that positions nodes and draws curved paths between them via SVG. Node rectangles and link strokes are color-coded using `d3.scaleOrdinal` and `d3.schemeCategory10`. Data is loaded from a local `data.json` file containing node names and link pairs, with drag interactions enabled through `d3.drag` to reposition nodes and recompute link paths.

AI-generated description

Air pollution data for Geneva

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Causes of Air pollution in Geneva-1

This interactive Sankey diagram visualizes the causal chains behind air pollution in Geneva, tracing connections from broad factors like climate change and local traffic down to specific contributors such as housing costs and lack of investment. The diagram uses d3.v5 and the custom `d3.sankey` layout to arrange nodes and links, with draggable node rectangles and hoverable link paths rendered as SVG. Node colors apply a categorical scale, and link thickness encodes the relative value assigned in the underlying JSON data.

DDr. Hiren Ghosh
92% match
Loading thumbnail…

Causes of Air pollution in Geneva

This visualization uses a Sankey diagram to trace the causes of air pollution in Geneva, linking broad categories like air and local traffic to specific contributing factors such as commuter traffic and polluting vehicles. The diagram emphasizes the flow of influence between nodes, with thicker links representing stronger connections. Built with D3.js v5, the code loads data from a JSON file and implements a custom sankey layout to position nodes and calculate link widths. The SVG rendering supports interactive dragging of nodes to explore the network dynamically.

NNita
87% match
Loading thumbnail…

Sankey Diagram for air pollution data in Geneva

This Sankey diagram visualizes air pollution data from Geneva, showing the flow of pollutants between different categories and locations. The code loads CSV data from a GitHub gist and transforms it into a node-link structure using custom logic in `transformData`. It renders the diagram as an SVG using the D3.js v5 library, specifically leveraging the `d3.sankey()` layout to position nodes and links. Each link’s stroke opacity increases on hover, and nodes are colored using `d3.scaleOrdinal(d3.schemeCategory10)`.

NNita
80% match
Loading thumbnail…

Ecosystem Structure

This example visualizes the flow of air pollution data in Geneva using a Sankey diagram. The diagram shows nodes and links representing relationships between different categories or pollutants, with link thickness conveying relative values. Interactive checkboxes allow users to filter the displayed data, triggering a re-render of the diagram. The visualization is built with D3 v5, using the custom `d3.sankey` layout from the included `sankey.js` file, and renders to SVG. Data is loaded from a remote CSV file, with nodes and links dynamically transformed from the raw rows.

GGiosec
76% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This heatmap shows daily mean concentrations of four air pollutants (NO2, O3, SO2, and CO) over time, with color intensity indicating pollution levels. The visualization uses D3.js v6 to read a CSV file of EPA air quality data, parse dates, and render an SVG with a color scale based on the `d3.scaleSequential` with the YlGnBu interpolator. Each cell represents a pollutant-date combination, and hovering reveals a tooltip with the exact date and value. The chart employs `d3.axisTop` and `d3.axisLeft` for labeled axes.

Hharshabandi3060@gmail.com
71% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example visualizes daily air-pollution trends for four pollutants—NO2, O3, SO2, and CO—in Phoenix using D3 v6. It renders an SVG multi-line chart, with each pollutant line colored by a categorical scale and labeled near its final data point. The code loads data from a local CSV, parses dates with `d3.timeParse`, and generates paths with `d3.line`. Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Hharshabandi3060@gmail.com
71% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Responsive Axes - New Technique - Air Quality Dataset

This example visualizes NO2 air quality levels for the top ten geographic locations, rendered as a responsive bar chart with a sequential color scale. The chart displays each location's Unique ID on the x-axis and NO2 concentration in parts per billion on the y-axis. Interactions include hover tooltips that reveal regional values, an interactive color legend that toggles between blue and green sequential scales via `d3.scaleSequential`, and bar highlighting on mouseover. The visualization uses D3.js for data binding, scales, and axes, with `ResizeObserver` for responsive sizing and SVG for rendering.

Vvigneshs1006@gmail.com
69% match
Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS

This example shows an interactive horizon chart for air pollution data, letting users compare pollutant levels across six types (SO2, NO2, O3, CO, PM10, and PM2.5) for selected years. The visualization uses D3.js (v7) with an SVG rendering approach, displaying time-series data from a GitHub-hosted CSV dataset. It employs d3.rollup to aggregate measurements and d3.scaleTime for the x-axis, while a dropdown menu switches between annual datasets. The chart updates dynamically by redrawing the SVG elements when the user changes the year selection.

Eeyxxr1260@gmail.com
69% match