d3 line chart (5 lines)

100%

d3 line chart (5 lines)

✓ Published1🌍 Public

Last edited Mar 16, 2024

Created on Mar 5, 2024

This line chart shows life expectancy growth from 1990 to 2010 for five North American countries, using colorbrewer’s Accent palette to distinguish each country. Built with D3 v7, the visualization draws five separate line paths using `d3.line()`, with gray circles marking individual yearly data points. The chart uses linear scales for both axes, with an ordinal color scale for the legend. The data is loaded from a CSV file via `d3.csv()` and simplified from the original global development dataset. The black background and white labels create high contrast, while the legend is added using the d3-legend plugin.

AI-generated description

A line chart with five lines, using color scale with color brewer in D3

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://corgis-edu.github.io/corgis/csv/global_development/

MIT Licensed

Similar vizzes

Loading thumbnail…

blog life expectancy

This chart shows life expectancy growth from 1890 to 2010 for five North American countries: the United States, Canada, Mexico, Guatemala, and Cuba. Each country appears as a colored line, with gray circles marking individual data points. The chart uses a black background with white axes and labels, and the color scheme comes from the ColorBrewer Accent palette. The code loads simplified data from a GitHub-hosted CSV via `d3.csv`, applies `d3.scaleLinear` for both axes, and draws lines with `d3.line`. It builds the SVG output using `d3.select` and `d3.append`, while the legend is generated with `d3.scaleOrdinal` from the d3-legend library.

NNita

83% match

Loading thumbnail…

Line Chart

This line chart shows the life expectancy of the USA from 1800 to 2016, with the years on the x-axis and expectancy values on the y-axis. The React-based visualization uses D3 v5 scales and the `d3.line` generator to create the SVG path, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file using `d3.csv` and parsed with `d3.timeParse`. Gridlines, axis labels, and a green stroke line are styled through CSS.

SSonuSriN

81% match

Loading thumbnail…

7q3

This example visualizes life expectancy across countries as a line chart, with each country plotted along the horizontal axis and life expectancy on the vertical axis, which is fixed between 60 and 90 years. The chart is rendered as an SVG using D3 v7, fetching CSV data from a GitHub gist. The code uses `d3.csvParse` to load the data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.line` to draw the path. Axis labels are rotated for readability, and the line is styled in steelblue.

Kktvgs25@gmail.com

80% match

Loading thumbnail…

A5_BubbleChart

This visualization shows life expectancy across various countries using a bar chart with a sequential color scale. The chart maps average life expectancy values to a light-to-dark green gradient, with color intensity and bar height both encoding the data. Built with D3 v7 and rendered as SVG, it uses d3.scaleSequential with d3.interpolateRgb for coloring, d3.scaleBand for the x-axis, and d3.legendColor from the d3-legend library for the legend. The data comes from a CSV file hosted on GitHub containing country-level expectancy metrics.

DDuc Pham

80% match

Loading thumbnail…

A6 Diverging Color Scale Bar Chart

This example visualizes life expectancy in 1960 for a selection of countries using a diverging color scale bar chart. The bars are colored on a green-to-red gradient via a sequential scale with an RdYlGn interpolator, where higher life expectancies appear greener and lower ones redder. The chart uses D3 v7 to load data from a CSV file, create SVG bars with band and linear scales, and render axes with tick labels. A custom legend and axis titles are added using D3’s selection and axis methods, while the underlying data is sourced from a shortened TidyTuesday dataset.

AAllen Jake Polintan

80% match

Loading thumbnail…

d3 time series small multiples

This example visualizes population growth in the top five North American countries from 1990 to 2010 using small multiples, with each of the 15 charts representing a unique country-year combination. It shows the trends and comparisons of population growth rates across these nations. The visualization uses D3 v7 with SVG rendering, employing a color scale from ColorBrewer for country distinction and a legend from Susie Lu’s d3-legend library. The data comes from the Global Development dataset, simplified for clarity. Each small multiple displays a line chart with axes, and a tooltip provides interactive details on hover.

AAndrew

79% match

Loading thumbnail…

D3 - Sequential scale bar chart

This example visualizes life expectancy across different countries using a bar chart where bar colors are mapped through D3’s `scaleSequential` with an `interpolateRgb` gradient from lightgreen to darkgreen. The chart loads CSV data via `d3.csv` from a GitHub gist, renders SVG bars with `d3.axisBottom` and `d3.axisLeft` for axes, and includes a sequential color legend generated by the `d3-legend` plugin. The code explicitly sets the color scale’s domain slightly beyond the data range and applies it to each bar’s fill, while the chart’s background, title, and axis labels are all configured inline.

CChandana Srinivas

79% match

Loading thumbnail…

Pseudo Line Chart with D3

This visualization displays the average population growth rate for each continent across five decades, from 1970 to 2010, using a pseudo line chart. Six distinct colored lines represent Asia (yellow), Africa (orange), North America (green), South America (purple), Europe (blue), and Oceania (red). Built with D3 v7, the code uses `scaleLinear` for both axes, `line()` generators to create each path, and `axisLeft` for the y-axis. The chart includes a gray inner rectangle background, axis labels for "Decades" and "Growth Rate(%)", and hardcoded data from the `index.js` file, with each line appended as an SVG path with a stroke width of 2.

11807589994@qq.com

78% match