7q3

100%

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

Forked from 7q2

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

7q4

This area chart visualizes life expectancy across countries using the Iris Dataset. The chart employs d3.area() to create a filled region, with a band scale for categorical x-axis positioning and a linear scale for the y-axis. Data is loaded from a CSV file via fetch() and parsed with d3.csvParse(). The SVG rendering uses axis generators d3.axisBottom and d3.axisLeft, with rotated tick labels for readability. The green-filled area emphasizes trends while the fixed y-domain [60, 90] highlights variation.

Kktvgs25@gmail.com

84% match

Loading thumbnail…

No6

A horizontal bar chart displays life expectancy for each country, sorted in descending order, using a turquoise background and white SVG canvas. The bars are drawn as rectangles, with width proportional to the life expectancy value from the CSV data. Built with D3 v3, the code uses `d3.csv` to load `Countries3(OLD).csv` and `d3.descending` to sort rows before appending rects to the SVG via `selectAll` and `enter`. Each bar includes a `title` tooltip showing the country name and its life expectancy.

LLTymn

82% 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

81% 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

81% 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

81% match

Loading thumbnail…

d3 line chart (5 lines)

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.

AAndrew

80% match

Loading thumbnail…

No6

This example shows a horizontal bar chart of countries sorted by life expectancy at birth, with each bar’s length proportional to that value and a tooltip revealing the country name and exact figure. The bars are rendered as SVG rectangles arranged vertically, with the tallest at the top. Built with D3 v3, the code loads data from a CSV file, sorts it using `d3.descending`, and appends `rect` elements with `<title>` nodes for hover text. The chart uses a white SVG on a turquoise background.

LLTymn

80% match

Loading thumbnail…

No6

A horizontal bar chart displays countries’ life expectancy at birth, sorted in descending order so the longest-living nations appear at the top. Each bar’s width is proportional to the life-expectancy value, and hovering reveals a tooltip with the country name and exact figure via a `title` element. The code loads data from a CSV file, sorts it with `d3.descending`, and renders the SVG rectangles using D3 v3’s data join (`selectAll`, `enter`, `append`). The chart uses a white SVG canvas set against a turquoise page background.

LLTymn

79% match