Multiple Lines - BCN Family Income Index

100%

Multiple Lines - BCN Family Income Index

✓ Published0🌍 Public

Last edited May 5, 2015

Created on May 5, 2015

A multi-line chart tracks the Barcelona Family Income Index across 73 neighborhoods from 2008 to 2013, using data from OpenDataBCN. It highlights growing economic disparity, showing affluent areas like Pedralbes rising while poorer ones decline. The visualization uses d3.v3 with SVG rendering, employing d3.svg.line and d3.time.scale to plot yearly values. Users can hover over lines to highlight specific districts, and clicking reloads to switch between district views.

AI-generated description

Similar vizzes

Loading thumbnail…

Exercise Module 4

This horizontal bar chart displays the 2013 family income index for Barcelona neighborhoods, sorted by district, with each bar labeled with its value. The visualization uses D3.js (v3) to load the CSV data, map the income values to a linear scale for bar width, and the neighborhood names to an ordinal scale for vertical positioning. SVG rectangles and text elements render the bars and labels, with an interactive tooltip showing details. The data source is OpenDataBCN, and the chart also includes top and bottom axes to frame the quantitative scale.

QQbelil

84% match

Loading thumbnail…

Exercise Module 5 -Scatterplot

This scatterplot shows the relationship between family income and the percentage of the population aged 25–64 across Barcelona neighborhoods in 2013. Each circle represents a neighborhood, with hover tooltips revealing its name, district, and exact values. The visualization uses D3.js v3 with SVG rendering, employing `d3.svg.axis` for axes, `transition()` for animated circle appearance, and data from OpenDataBCN.

QQbelil

78% match

Loading thumbnail…

Gist cb853c154b8bb2343561

This visualization maps Barcelona’s neighborhood demographics across multiple years, contrasting population age brackets with a family income index (where the city average equals 100). It renders each district as a choropleth, using color intensity to represent income disparities, and likely employs discrete legends for each year. The code uses D3.js for geospatial paths and data binding, with an interactive year selector to toggle between 2008 and 2009 datasets. The data originates from a CSV file, parsed and joined to the geographic boundaries for display.

QQbelil

78% match

Loading thumbnail…

Exercise Module 3

The visualization displays a vertical bar chart of Barcelona neighborhoods' family income for 2008, using raw SVG rectangles sized by household income relative to the city average. The code uses d3.csv to load data from a local CSV file, then sorts rows by district order with d3.ascending. Each rectangle's width reflects the Renda_familiar value, and a title element appended via D3's selection methods shows hover tooltips with year, neighborhood, district, and income percentage. The d3.v3 library structures the data-bound SVG elements.

QQbelil

77% match

Loading thumbnail…

Line Chart with Multiple Lines

This example uses a multi-line chart to track unemployment rates across Catalan comarques (counties) from 1999 to 2014. The SVG visualization, built with D3 v3, plots each county’s unemployment rate over time as a separate gray line, with Catalonia overall highlighted in red. Data is loaded from a CSV file and restructured into per-county series. Hovering over a line displays the county name via a built-in title tooltip. The chart includes axes with formatted year labels and a legend-free design intended for quick comparison of regional trends. The source is the Catalan statistics institute (Idescat, 2015).

CContrastat

72% match

Loading thumbnail…

Line Chart with Multiple Lines

The visualization presents unemployment trends across Spanish regions from 2007 to 2014, with a supplementary bar chart detailing 2014 rates by region. It uses D3.js v3 to render SVG elements, including animated line paths that traverse the time series for each region, allowing hover highlighting to emphasize individual trends. The data is loaded from CSV files containing yearly unemployment percentages, with axes and scales built using d3.svg.axis and d3.time.scale.

GGloriaYL

71% match

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays the evolution of unemployment rates across Spanish regions from 2007 to 2014, with the national average highlighted in a darker gray. Each region appears as a separate line, and hovering over any path highlights it in red. The chart uses D3.js v3 with SVG rendering, utilizing `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to map yearly data loaded from a CSV file. Data originates from Spain’s Economically Active Population Survey (INE).

GGloriaYL

70% match

Loading thumbnail…

Line Chart with Multiple Lines

This visualization shows the evolution of unemployment rates across Spanish regions from 2007 to 2014, highlighting the national total in a darker stroke and individual regions as hoverable lines. It combines an SVG line chart with a static map image, using d3.csv to load regional data, d3.time.scale and d3.svg.line for the axes and paths, and CSS `:hover` interactions to emphasize selected lines. Data comes from Spain’s Economically Active Population Survey (INE).

GGloriaYL

70% match