Skip to main content
SimilarExport ZIP
100%

Exercise Module 4

✓ Published0🌍 Public
QQbelil
Last edited May 1, 2015
Created on May 1, 2015

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.

AI-generated description

Similar vizzes

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
93% 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
88% match
Loading thumbnail…

Multiple Lines - BCN Family Income Index

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.

QQbelil
84% 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
83% match
Loading thumbnail…

Loading CSV Data with D3

This example loads demographic data for Barcelona neighborhoods from a CSV file using D3’s `d3.csv` method and logs the parsed array of objects to the browser console. The page also displays a static SVG graphic combining text and shapes to present a simplified logo for “BCN Family Income,” though no data-driven visualization is rendered from the CSV content. The code uses D3 v3 and inline SVG elements, while the CSV includes columns for year, district, neighborhood name, age-group counts, and a relative family income index.

QQbelil
78% match
Loading thumbnail…

Exercise Module 3

A horizontal bar chart displays the 2014 unemployment rate for each Spanish region, sorted from highest to lowest with grey bars sized proportionally to the rate. The visualization highlights that southern regions have higher unemployment while northern ones are lower, with hover tooltips revealing exact percentages. The code uses d3.csv to load region data and d3.selectAll with data joins to append SVG rect elements, scaling bar widths by multiplying the rate by eight.

GGloriaYL
77% match
Loading thumbnail…

Exercise Module 3

This example shows the unemployment rate in 2014 for Spanish regions, ordered from highest to lowest, with bar lengths proportional to the rate and tooltips revealing the exact value per region. The chart uses d3.csv to load the data, d3.descending for sorting, and d3.select to append SVG rectangles with title elements for interactivity. The data is sourced from a CSV file containing regional unemployment statistics, and the visualization is rendered as a simple SVG bar chart.

GGloriaYL
77% match
Loading thumbnail…

Bar Chart, Framed

Animated horizontal bar chart of hydro-vulnerability rates across Barcelona metro municipalities, sorted descending, with hover labels showing exact percentages. The visualization then transitions to a scatterplot comparing these rates against registered unemployment, framed within white panels on a gray background. Built with D3.js (version 3.5.6), it uses ordinal scales, SVG transitions, and axis components to render the data from the supplied CSV.

CContrastat
76% match