CYF Active 2010 to 2016-11-09

100%

CYF Active 2010 to 2016-11-09

✓ Published0🌍 Public

Last edited Dec 3, 2016

Created on Dec 3, 2016

This visualization shows the active youth population from 2010 to November 2016, with each individual represented as a point on a timeline. It displays demographic summaries like gender and race in left panels, alongside temporal spans for involvement start and end dates, birth dates, and current age in the middle panel. The visualization uses custom panel layouts configured through a JSON file, pulling data from a Google Spreadsheet via its public API. It relies on d3.js for rendering time-based intervals and categorical summaries, with the data processed through custom JavaScript functions for filtering and age calculation.

AI-generated description

Similar vizzes

Loading thumbnail…

Yifu's World Population Dataset

This visualization shows global population growth from 1960 to 2015 using an area chart with overlaid circles for each data point. The chart displays population on the y-axis and year on the x-axis, with a steel-blue filled area and semi-transparent circles. It uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.area, d3.curveBasis, d3.axisBottom, and d3.axisLeft to render the SVG. The data comes from the Data Canvas - Sense Your City dataset. Gridlines span the plot, and axis labels clarify the variables.

YYifu Chen

64% match

Loading thumbnail…

Population and age

This visualization shows the U.S. population distribution across age groups from 2010 to 2019, using a slider to animate between years. It renders an SVG bar chart with D3 v4, where each bar’s height and color encode population size via `d3.scaleLinear` and `d3.scaleQuantile`. Transitions smoothly update bars and axes over two seconds. Data is loaded from ten CSV files using `d3.queue` and `d3.csv`. The code relies on D3’s `scaleBand`, `axisBottom`, `axisLeft`, and `transition` APIs.

Hhamzavg

63% match

Loading thumbnail…

Final exercise, about youth unemployment.

This visualization shows the evolution of youth unemployment rates across the world from 1991 to 2013, with each country represented as a thin grey line. Users can explore the data by hovering over lines to highlight them, and specific regions are emphasized with distinct colors: the EU in steelblue, Middle East in green, Latin America in indianred, Sub-Saharan Africa in purple, North America in orange, and East Asia in red. The chart uses an SVG line graph with a time scale on the x-axis and a linear scale on the y-axis, with axis labels and a legend-style highlighting system for regional focus. The data is loaded from a CSV file and restructured into per-country arrays of year/value pairs, then rendered as individual lines that brighten and thicken on hover. The visualization includes a title and brief description prompting further exploration of the causes of trends in youth unemployment over two decades.

Aalebusi

63% match

Loading thumbnail…

Population and age

An interactive bar chart displays population distribution across age groups for selected years, with a slider controlling the year from 2015 to 2019. The visualization uses D3 v4’s `scaleBand`, `scaleLinear`, and `scaleQuantile` for positioning and color encoding, with SVG rectangles animated via `transition`. Data is loaded from CSV files using `d3.queue` and `d3.csv`, while React state is not actually implemented despite the framework metadata.

Hhamzavg

63% match

Loading thumbnail…

Activity6_1.2

This chart displays the population figures for 20 countries in 2010 as a horizontal bar chart. The visualization uses React with D3 v5 to render SVG elements, with scales created via `d3.scaleLinear` and `d3.scaleBand`. Country labels appear on the y-axis, while population values are formatted using `d3.format` with a custom tick format that converts billions. Interactive tooltips reveal exact population values on hover, and the data is loaded from a remote CSV file using `d3.csv`.

FFayezuddin Mohammed Khan

62% match

Loading thumbnail…

Gist c2941bd5dea0fa130792

This chart shows the projected and historical population of school-age children (5–17) and seniors (65+) across New York City’s five boroughs from 1960 to 2040, with each age group’s share of the total population tracked over time. Using D3.js, the visualization renders multiple small-multiple line charts per borough, with the x-axis representing decades and the y-axis showing percentage of total population. The code draws paths for each series, colors the lines by age group, and adds labels and axes via SVG elements. Data comes from a comma-separated values table embedded in the gist, and the rendering relies on D3’s scales, line generators, and text utilities.

PPaperpanic

62% match

Loading thumbnail…

2015-2100 Population Data

This visualization presents global population dynamics from 2015 to 2100 using an animated population pyramid. The chart displays age structure (0-19 years) on the vertical axis and population counts on the horizontal axis, with male and female data rendered as two back-to-back horizontal bar series. The animation steps through each year, updating the bars to reflect changing age distributions over time. The design uses a muted color palette to distinguish sexes, with male and female data shown on opposite sides of the central axis. The SVG rendering in D3.v3 creates a smooth, continuously updating transition that allows viewers to observe demographic shifts across the 85-year period at a glance.

BBukenyae

61% match

Loading thumbnail…

Untitled

This animated population pyramid uses Icelandic census data from Hagstofa Íslands to display the distribution of males and females across ages for each year from 1841 to 2015. Two mirrored bar charts show the populations, with the year and age axes controlled by sliders. Built with D3 v3 and React, the visualization relies on `d3.scale.linear` for axes and `d3.svg.axis` for tick marks, while data is fetched via `d3.json` and `d3.xhr` in a custom `load_px_data` function. The animation updates the bar heights and axis ranges as the year changes.

BBTumbler

61% match