fresh block

100%

✓ Published0🌍 Public

Last edited Dec 3, 2016

Created on Dec 3, 2016

This example visualizes the population distribution of Israel by age group, combining a D3 pie chart with a CanvasJS column chart. The pie chart displays age ranges (0-14 through 65+) as colored arcs with labels, using d3.csv, d3.arc, and d3.pie. The column chart shows the same data as vertical bars with population values as index labels. Both charts pull from the populationAge.csv file, while the static HTML table provides summary totals and percentages, and the page also incorporates the Bootstrap CSS framework.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example presents a donut chart displaying the age distribution of a population, with each slice colored and labeled by age group. The chart is created using D3 v4, employing the `d3.pie` function to compute arc segments and the `d3.arc` API for rendering both the chart's path and label positioning. Data is loaded from a CSV file with columns for age and population, and the ordinal color scale assigns distinct colors to each category. The visualization renders as an SVG element, with white text labels placed at the centroid of each arc for clarity.

JJennKempCodes

85% match

Loading thumbnail…

fresh block

This visualization shows the changing age distribution of the U.S. population over time, using a sliding time window controlled by arrow keys. The chart displays population counts for each birth year as horizontal bars, with the current year prominently labeled. Built with D3.js version 3, it loads data from a CSV file and uses scales, axes, and nested data structures. Rectangular bars and text labels are rendered as SVG elements, with smooth transitions animating the bars as the displayed year updates.

CCharisma9

79% match

Loading thumbnail…

fresh block

This chart visualizes global population data with a circular bubble layout, where each circle's size corresponds to a country’s population value from POP.csv. The visualization uses d3.pack to compute the hierarchical circle packing, with colors assigned via d3.scaleOrdinal and d3.schemeCategory20c. Circle labels are clipped using SVG clipPath elements, while d3.csv loads the data and d3.hierarchy structures it. Each bubble includes a tooltip showing the country name and its formatted population figure.

CCaptainCondescending

77% match

Loading thumbnail…

Canvas Pie

This example shows a minimal pie chart of U.S. population by age group, with each slice labeled directly on the canvas. The data comes from a TSV file, loaded via `d3.requestTsv`. It renders using the Canvas 2D API, with `d3.arc` and `d3.pie` from d3-shape to compute the arcs and angles. Slices are filled with distinct colors, outlined in white, and age labels are placed using the arc centroid method.

Mmbostock

77% match

Loading thumbnail…

fresh block

This example animates the classic Gapminder bubble chart, mapping fertility, life expectancy, and population over time. It uses D3 v5 to render SVG circles, with x position encoding GDP per capita, y position encoding life expectancy, and circle size encoding population, while color distinguishes world regions. The chart plays through decades of country-level data, showing how nations move across the socioeconomic landscape as development indicators shift.

AAitorCCE

77% match

Loading thumbnail…

fresh block

This example, built with D3 v5 and SVG, visualizes a Gapminder-style dataset using a bubble chart. The x-axis represents GDP per capita, the y-axis shows life expectancy, circle size encodes population, and color maps to geographic region. The chart animates through years 1964 to 2013, showing how countries' development indicators evolve over time. A play button and time slider allow users to scrub through the years, with circles transitioning smoothly between states. The visualization highlights global trends in health and wealth, with tooltips providing country-specific data on mouseover.

AAitorCCE

75% match

Loading thumbnail…

fresh block

This scatterplot visualizes Gapminder data from 1970, plotting fertility against life expectancy for various countries. Each circle’s size encodes population, while its color distinguishes geographic regions. The visualization uses d3.csv to load the data, d3.scaleLinear for the axes, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with schemeCategory10 for region colors. SVG elements are drawn via d3 selections, with axes generated using d3.axisBottom and d3.axisLeft, and a legend included.

AAitorCCE

75% match

Loading thumbnail…

Untitled

This example shows a donut-style pie chart of population by age groups, with colored arcs labeled directly on the chart and a legend listing each age range alongside its population count. The chart uses d3.csv to load age-pop.csv from a remote URL, d3.layout.pie to compute arc angles from the population field, and d3.svg.arc to render the segments. Colors come from d3.scale.category20(), while the legend and arc labels are added as SVG text and rect elements appended to the same svg container.

MManoj Kolluri

75% match