Exercise Module 5 -Scatterplot

100%

Exercise Module 5 -Scatterplot

✓ Published0🌍 Public

Last edited May 2, 2015

Created on May 2, 2015

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.

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

88% 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

87% 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

82% 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

78% 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

75% match

Loading thumbnail…

Exercise Module 5

A scatterplot shows the correlation between regional unemployment rates and the percentage of people reporting difficulty making ends meet across Spanish regions in 2014. Each circle represents a region, with the national average highlighted in darker gray. The visualization loads data from a CSV using `d3.csv`, sorts regions by unemployment rate, and animates circle radii from zero to five pixels via `transition.attr`. Axes are rendered with `d3.svg.axis`, and hover tooltips are added using SVG `title` elements. Data comes from the Spanish Statistical Office (INE).

GGloriaYL

74% match

Loading thumbnail…

Task-7 Q3

This scatter plot displays the relationship between age and income from a CSV dataset, with each point colored by gender using a categorical color scale. The visualization uses D3 v6 to load and parse the data, then renders circles on an SVG canvas with linear scales for both axes. Axis labels are styled in green, and the plot is sized to fill the browser window. The code demonstrates loading data via a remote URL and applying D3’s scaleLinear, scaleOrdinal, axisLeft, and axisBottom functions to construct the chart.

JJames Cruz

73% match

Loading thumbnail…

Scatter Plot

A scatter plot displays the relationship between age and monthly income for employees in a dataset loaded from a CSV file. Each circle represents an employee, with position determined by the `d3.scaleLinear` scales for age and income. Hovering reveals a tooltip with exact values. The visualization uses D3 v7 to append SVG circles, axes, and labels, with data parsed from a remote CSV source.

TTejasriKari@my.unt.edu

73% match