Skip to main content
100%

Exercise: Module 3

✓ Published0🌍 Public
Aaimbellone
Last edited Apr 1, 2015
Created on Apr 1, 2015

A bar chart shows the number of divorced people in each Rome municipality for 2011, with bars labeled by district and value. The visualization uses D3 v3 to load the CSV data and append SVG rectangles and text elements. Bar widths scale proportionally to the Divorced column, divided by 10, while labels appear in white sans-serif font above each bar. The chart also includes notes about municipality boundary changes.

AI-generated description

Similar vizzes

Loading thumbnail…

Exercise: Module 4

A bar chart shows the percentage of divorced people in each Rome district for 2011, with hover highlighting and tooltips displaying exact counts and percentages. The visualization uses d3.csv to load the dataset, d3.scale.linear for the x-axis width, d3.scale.ordinal with rangeRoundBands for the y-axis categories, and d3.svg.axis for both axes. Rectangles are rendered in SVG and colored steelblue, while the x-axis tick format is set to percentages. Data originates from the Rome Municipality and includes notes about district changes.

Aaimbellone
94% match
Loading thumbnail…

Exercise: Module 5

A scatterplot displays the percentage of single and divorced residents against the percentage of married and widowed residents across Rome’s districts in 2011, with each circle representing a district and hover tooltips revealing detailed marital-status breakdowns. The visualization uses D3 v3 with SVG rendering, employing `d3.scale.linear`, `d3.svg.axis`, and `d3.csv` to load and plot data from the Rome Municipality. Circle positions are computed from CSV columns for single, married, widowed, and divorced counts, with axes formatted as percentages and a hover effect that changes circle color to orange.

Aaimbellone
88% match
Loading thumbnail…

Exercise Module 6

A small-multiples line chart shows the percentage of single and divorced people across 19 Rome districts from 2010 to 2012, with each district represented by a steelblue line. The chart uses d3.v3 with SVG rendering, a time scale for the x-axis, and a linear scale for the percentage values, formatted with `d3.format(".0%")`. Data comes from a CSV file published by the Rome Municipality. Hovering over a line highlights it in orange via a CSS `circle:hover` rule, though the lines themselves are drawn as paths.

Aaimbellone
87% match
Loading thumbnail…

Gist b716a1dc4164ed9059c7

This visualization uses d3.forceSimulation to distribute 19 points, each labeled by Rome’s district number, across a scatterplot-like space. The underlying dataset, loaded from a gistfile1.txt, records population counts for four marital statuses—Single, Married, Widow(er), and Divorced—per district. The chart encodes each status as a separate force-directed node, with the x-position determined by district and the y-position by population value, resulting in a compact, overlapping point cloud. A simple SVG rendering with axes and district labels makes the comparative distribution across statuses and districts visible at a glance.

Aaimbellone
77% 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
75% match
Loading thumbnail…

Marital Status

A bar chart displays the marital status of adults, with bars representing counts for categories such as married, widowed, and never married. The visualization uses D3.js v4 to load CSV data, scale values with d3.scaleBand and d3.scaleLinear, and render rectangles in an SVG. Axes are added via d3.axisBottom and d3.axisLeft, with the chart’s dimensions and margins set explicitly. The data originates from a CSV file processed using d3.csv.

Aadgramigna
74% match
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
73% 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
73% match