Fork of Lab 1: Line Chart

100%

Fork of Lab 1: Line Chart

✓ Published0🌍 Public

Last edited Feb 22, 2021

Created on Feb 22, 2021

This interactive D3.js line chart visualizes annual CO2 emissions for selected countries from 1990 to 2014, sourced from UN Data. The visualization uses a multi-line chart with an ordinal color scale and includes axes with formatted tick labels. Built with D3 4.7.4, the code uses `d3.select`, `d3.nest()`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render SVG elements. The chart allows data filtering by adjusting the `selectedCountries` array, demonstrating animated transitions between different country selections.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Lab 1: Line Chart

This line chart shows how carbon dioxide emissions have changed from 1990 to 2014 for three selected countries: the United States, Canada, and Spain. Each country is represented by a colored line, with an ordinal color scale distinguishing them, and the data is sourced from the UN Data service. The visualization is built using D3.js with an SVG rendering, incorporating interactive elements like a dropdown menu for selecting countries and a hover tooltip that displays detailed values. The chart dynamically updates its axes and scales based on the selected data, and the lines are animated when the selection changes.

0007ebey

88% match

Loading thumbnail…

Lab 1: Line Chart

A line chart visualizes annual CO2 emissions from 1990 to 2014 for selected countries using UN Data, with interactive country selection via dropdown and tooltips. Built with React and D3 v4, it uses d3.nest for data grouping, d3.scaleLinear and d3.axisBottom/Left for scales, and d3.line for path generation. Animated transitions update lines when the selection changes, with colors from d3.scaleOrdinal(d3.schemeCategory10).

DDenise Mauldin

87% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays per-capita CO2 emissions from 1987 to 2017 for ten countries, with each colored line representing a nation and a legend on the right. The data is loaded from `annualco2.csv` and rendered as SVG paths using D3 v5’s `line` generator with `curveBasis` smoothing. Axes are drawn with `axisBottom` and `axisLeft`, while `scaleTime` and `scaleLinear` map years and emission values. A custom `colorLegend` component and `scaleOrdinal` with `schemeCategory10` assign distinct colors to each country.

Ssafdarawan

79% match

Loading thumbnail…

D3 - Multi-Line Chart

This multi-line chart displays carbon dioxide emissions per country from 1970 to 1979, using four distinct colored lines with circular data points. The visualization loads CSV data from a GitHub gist and renders an SVG with a light gray background panel, axis labels, and a title. It uses d3.csv for data loading, d3.line to construct the paths, and d3.axisBottom and d3.axisLeft for the axes. Interactive tooltips appear on mouseover, showing the emission value for the hovered point, with circles enlarging to indicate selection. The chart also incorporates colorbrewer colors and the d3-legend library.

CChandana Srinivas

78% match

Loading thumbnail…

D3 - Small Multiples Line Chart

This example shows a series of small multiples line charts, each depicting CO2 emissions over time for a specific country. The D3.js code (version 7) loads data from a CSV file and uses `d3.scaleLinear` for axes, `d3.line` for the line paths, and `d3.legendColor` for a legend. It renders as SVG, with interactive hover tooltips revealing emission values per year.

CChandana Srinivas

78% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows the annual CO2 emissions per capita for the top ten countries from 1987 to 2017, with each country represented by a distinct colored line and a corresponding legend. The visualization uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, and `curveBasis` to render smooth paths in SVG. Data is loaded from a CSV file, and the chart includes axes, grid lines, and a title.

Bbeca8675

77% match

Loading thumbnail…

Fork of CO2 Emissions Over Time

This fork of a stacked area chart visualizes global CO2 emissions from 1790 onward, breaking down fossil fuel sources into solids, liquids, gas, cement production, and gas flaring. The chart uses D3 v4 with SVG rendering, employing `d3.stack` and `d3.area` for the stacked layout and `d3-area-label` for positioning white labels within each area. The `d3-scale-chromatic` library supplies the color scheme, and data is loaded from a CSV containing yearly emissions in gigatons. Interactive hover effects darken each area, while axes display time and emission values.

Ssuketua

77% match

Loading thumbnail…

Line Chart with Multiple Lines

This example displays CO2 emissions by country, plotting profit against sub-category over time, with each region represented by a distinct colored line. The visualization uses D3 v5 within a Vue framework, rendering to SVG. It employs `d3.line` with `curveBasis`, `d3.nest` to group data by region, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. Axis labels and legends are added via `d3.axisLeft`, `d3.axisBottom`, and a custom `colorLegend` function, based on sample data from annualco2.csv.

Pprincit

77% match