Qbelil

@Qbelil·6 public vizzes

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.

May 5, 2015

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.

May 2, 2015

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.

May 1, 2015

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.

Apr 24, 2015

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.

Mar 30, 2015

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.

Mar 22, 2015