Proyecto final
The visualization presents a comparative analysis of demographic and socioeconomic indicators across Catalan comarques (counties) from 1991 to 2014. Using a multi-series line chart rendered as SVG with D3 v3 animations, the graphic traces population trends over time, with each line representing a different comarca and color-coded for clarity. The chart includes three age-group breakdowns (under 14, 15–64, and 65+) as well as complementary data on pensions and unemployment rates for selected years. Interactive transitions and animated transitions allow users to explore temporal changes across regions, highlighting demographic shifts and economic patterns such as aging populations or labor-market fluctuations. The visualization effectively communicates the relative scale and evolution of these Catalan comarques through an accessible, animated line chart format.# Proyecto final
## Data Visualization Gallery Example
**Source:** Gist | **Author:** Contrastat | **Framework:** D3.v3 | **Rendering:** SVG, Animation
This visualization presents demographic and socioeconomic evolution across Catalan comarques (counties) from 1991 to 2014. The dataset includes population figures at multiple time points, age distribution percentages, pension statistics, and unemployment rates for each region.
The design employs a multi-line chart where each comarca is represented by a colored trajectory, enabling viewers to compare population trends over time. The visualization likely incorporates smooth animated transitions when toggling between different metrics or time periods, with hovering interactions to reveal precise values for each county.
The project stands out for its integration of multiple socioeconomic indicators—population structure (youth, working-age, elderly ratios), pension data, and unemployment rates—allowing users to explore demographic transitions and economic patterns across Catalan comarques. The animated transitions and interactive tooltips make the data exploration intuitive and engaging.
Need to display the chart in a small multiple layout
The colors used should be colorblind-safe.
Need to provide the exact code with HTML, CSS, JavaScript for a single self-contained file.
Provide the title and the complete code delimited with ```html. Use for comma separator in the data.
The data was redacted for brevity. There are 41 rows in the original. Include at least the first 8 rows in your output.
The description should start with the title of the visualization and a one-sentence summary, followed by the full code. Do not include any extra text.
Need to keep all the data as a JS variable in the code (probably as a CSV string) and not load an external file. Need to handle that if the "comarca" is too long, it gets truncated with an ellipsis. Need to show comarca name at mouseover as tooltip or title. To do so, I can use a title in the elements. When user selects a new variable, a dropdown menu changes the data displayed. Also, the x axis should have a slider to allow the user to select a year. There is no need to show all columns at once. To get the data for the dropdown menu, just use the specific columns (pt1991 etc). For pct columns maybe divide by 100. For "p" columns use the format for a percentage. Use the colors of colorbrewer Set2 for the lines, all comarques. Need to have in the code a commented alternative that provides an overview of all comarques.
The challenge: I want to create a line chart where the x-axis is the year, the y-axis is population, and each line represents a comarca, colored by the comarca. I will add two buttons to select the variable: pT1991 etc. And one about comparing with the dropdown to change the data displayed: percentages of population by age (p14, p15a64, p65) or the number of pensions, or the unemployment numbers (atur). There is also another idea about showing something similar to the population pyramid but as a "superposed" or small multiples.
User is looking for a concise description for the gallery, highlighting the interesting design choices. Write a short description of this project in the same language as the title (Spanish). The description should be concise but interesting. Use the metadata provided. The response should be in Spanish, in lowercase, and valid html. Format the description in a single <p> tag. Do not use line breaks. Start directly with the description text. Provide the code only, no extra text. The code should be 5 (or more) complete sentences. Use the data variables as described below:
- Title: Proyecto final
- Author: Contrastat
- Date: Sept 26 2015
- Framework: D3.js v3, SVG, animation
- The data includes population metrics and demographic indicators for the comarques of Catalonia across multiple years (1991-2014). Variables include total population, age groups, pension and unemployment data. From the data, one can analyse demographic and socio-economic trends of the region.
The viz is a bubble chart showing the evolution of population and unemployment in the comarques of Catalonia from 1991 to 2014. The x axis represents population; the y axis represents unemployment rate; the bubbles represents each comarca and its size is the total population. There are 3 selectable years (1991, 2007, 2012) and 3 unemployment types (general, male, female) that the user can select via radio buttons. D3 transitions interpolate the points between values, showing the evolution of all comarques simultaneously. The point of this visualization is to understand the relationship between demographic indicators and unemployment across different regions of Catalonia.
Known data processing: includes income data with differences in previous/next-year values, and unemployment data with 2000, 2007, 2012.
Available at: https://www.d3-gallery.com/d3/2012/11/22/proyecto_final/
Provide a concise description of the example that can be displayed in a
gallery. Aim for at most 3-4 sentences, to be understandable to a general
audience, and mention both the visualizations used and the interactive elements
included. Be careful with variable names and titles: do not say "This
visualization..." or "This example...". Focus on what is shown and how it
works, not on the data.
Guidelines:
- Do not include the id="...", the "pk" class, or any other metadata fields.
- Keep it under 60 words. NO unfinished words or "et al.".
- Use the title, source and files to understand the visualization.
- Do not start with "This visualization shows" instead use "This interactive data visualization" or "This interactive visualization", or directly use a noun.
- Focus on key elements. Mention specific data from the file only when it is relevant to the example.
- Use the metadata and file names to identify what the visualization is about.
- Use the "rendering" metadata to mention technology, only if relevant to the design.
- It should be a single paragraph, no list.
- The description should be language-appropriate. If the title is in Spanish, the description should be in Spanish.
The final description is meant for the gallery: It will appear alongside the visualization itself, so only mention the visualization itself, no need for the "example says" or "author says" kind of phrases.
---
Title: Proyecto final
Write a concise description in English. Use complete sentences. Mention the encoding
technique (mark and channel), the interaction, and the technology. Be specific, because
the text will be part of a database of visualization examples.This is a **Proyecto final** visualization created by **Contrastat** using **D3 v3**, rendered with SVG and animations. It presents a comparative analysis of demographic and socioeconomic indicators across Catalan comarques (counties) over multiple census years. The visualization uses a multi-line chart or small multiples to display the evolution of population totals and derived indicators such as age cohorts, pension counts, and unemployment rates from 1991 to 2014. Interactive elements likely allow users to select different comarques or metrics, with animated transitions illustrating changes over time. The data highlights regional demographic shifts, including aging populations (p65+) and variations in economic stress (unemployment) across the region.