Data Visualization and Infographics with D3 :: Module 3 Exercise

100%

Data Visualization and Infographics with D3 :: Module 3 Exercise

✓ Published0🌍 Public

Last edited Mar 31, 2015

Created on Mar 31, 2015

A horizontal bar chart displays the percentage of Portuguese companies with websites from 2003 to 2014, with bars labeled by year and the percentage value shown on each bar. The visualization uses D3.js version 3.5.5 to load CSV data via `d3.csv`, bind it to SVG `rect` and `text` elements, and scale bar widths proportionally to the data values. The SVG canvas and bar colors are styled through CSS, with hover effects on the rectangles. The data comes from the `websitesEuro18.csv` file, which contains annual percentages for multiple European countries, though only the Portugal column is visualized.

AI-generated description

Similar vizzes

Loading thumbnail…

Data Visualization and Infographics with D3 :: Module 2 Exercise

This example demonstrates how to combine static inline SVG shapes with a D3-driven data load to illustrate the contrast between hand-coded graphics and dynamic data binding. It shows a fixed composition of a circle, rectangle, polygon, and text element, while the script uses D3’s `d3.csv` to fetch `websitesEuro18.csv` and log the parsed array of JSON objects to the console. The SVG is rendered directly in the HTML with CSS styling for fills, strokes, and fonts, while the CSV data remains unused in the visualization, serving only to verify loading. The libraries used are D3 3.5.5 and standard SVG DOM APIs.

JJoaoGoncalves

78% match

Loading thumbnail…

Portugal banking

A vertical bar chart displays the population of Portuguese regions, with each region listed along the y-axis and a horizontal bar showing its number of people. The chart loads data from a CSV file and animates both the bars and their labels over two seconds. Using d3.v3, the code employs a linear scale for bar widths, an ordinal scale for region positions, and `transition.attr` for width changes, while `transition.tween` with `d3.interpolate` animates the text labels. The rendering uses SVG elements with a light blue fill for the bars.

GGeorgeMcIntire

76% match

Loading thumbnail…

Portugal banking

A horizontal bar chart displays the number of people across Portugal's banking regions, with labels such as Lisboa and Norte shown on the y-axis. Bars animate from zero to their final width over two seconds, while text labels count up from zero to the correct values using a text tween. The visualization uses D3 v3 with SVG, including `d3.scale.linear`, `d3.scale.ordinal`, and `transition.tween` for smooth updates. Data comes from a local CSV file read via `d3.csv`.

MMatteoTomassetti

75% match

Loading thumbnail…

Portugal banking

A horizontal bar chart shows the population of Portuguese regions, sorted by region name, with blue bars animating from zero to their final lengths. The chart uses animated text tweens to count up to each region's population value during the transition. Built with D3.js v3, the visualization loads data from a CSV file and uses d3.transition with ease curves and d3.interpolate for the numeric text animation, while ordinal scales position the region labels.

GGeorgeMcIntire

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

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

73% match

Loading thumbnail…

making a bar chart

This visualization displays a bar chart of digital skill levels across European Union country groupings for 2015, with each bar representing a different country category and its length corresponding to the percentage of individuals with specific skills. The chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG rectangles. Data is loaded from a CSV file with `d3.csv`, and values are parsed as numbers before being mapped to bar widths. The code relies on `d3.select`, `max`, and `scaleBand` to structure the visualization.

Ddistortedlights

71% match

Loading thumbnail…

Exercise Module 3

This visualization displays unemployment rates across Spanish regions in 2014, with a horizontally sorted bar chart ordering regions from highest to lowest rate. The chart uses D3 v3’s `d3.scale.linear` for the x-axis and `d3.scale.ordinal` with `rangeRoundBands` for the y-axis, rendering SVG rectangles. Hovering reveals tooltips via `append("title")`, while the total Spain value appears darker. Data comes from the Spanish Statistical Office (INE), and the axes use `d3.svg.axis`.

GGloriaYL

70% match