Exercise Module 2

100%

Exercise Module 2

✓ Published0🌍 Public

Last edited Mar 25, 2015

Created on Mar 25, 2015

This visualization displays a static SVG composed of five semi-transparent circles arranged around a central circle, forming a flower-like pattern on a white background. The code loads a CSV dataset of top income shares across several countries from 1910 to 2010 using `d3.csv`, logging the parsed data to the console but not binding it to the visualization. The SVG shapes are hand-coded in HTML, with colors and opacity values assigned directly, while D3.js v3 is included only for data parsing, not for dynamic rendering.

AI-generated description

Similar vizzes

Loading thumbnail…

Module 2 Exercise

The visualization shows a static decorative layout of four overlapping SVG circles in yellow, red, blue, and pink, positioned across the canvas without binding to the data. The page loads a CSV of sugar consumption by country, parses it into an array of JSON objects, and logs the data to the browser console for verification. No chart is drawn from the data; the circles are purely presentational, and the visualization’s interactive or encoding potential remains unexplored in this exercise.

FFranny711

84% match

Loading thumbnail…

Module 2: exercise

This example combines a hand-coded SVG with D3’s data-loading API. It draws a yellow circle, a red rectangle, and purple text directly in the markup, then uses `d3.csv` to read the local file `marital_status_rome_2011.csv` and log its parsed array of JSON objects to the browser console. The visualization shows static shapes, while the data loading demonstrates how CSV rows are transformed into accessible JavaScript objects for later use.

Aaimbellone

82% match

Loading thumbnail…

Module 2 Exercise

This example presents a static SVG scene with two colored circles and corresponding text labels, demonstrating basic shape and text rendering within the D3.js framework. Using raw SVG elements, the code draws a purple circle labeled “It's Purple!” and a blue circle labeled “This one is blue” on a 500 by 500 canvas. Below this, the script loads the ChicagoFDIC.csv data file via the `d3.csv` function, logging the parsed array of JSON objects to the console. The visualization itself does not display the CSV data, focusing instead on foundational SVG drawing techniques with a placeholder for future data-driven graphics.

AAbechtel

81% match

Loading thumbnail…

Module 2 exercice

This example displays a static SVG composition of circles, lines, rectangles, and text, overlaid with data loaded from a CSV file. The code uses D3 v3’s `d3.csv` to parse the GreenEnergyEU dataset into an array of JSON objects, logging it to the console for verification. The SVG elements—such as the pink circle, orange and blue lines, red rectangle, and bold navy text—are drawn directly in the HTML markup, while the CSV data is not yet bound to any visual encoding. The rendering approach relies on SVG primitives, with no dynamic scales or transitions implemented.

TThomasSeymat

81% match

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

80% match

Loading thumbnail…

Module 2 exercice

This example shows a static SVG composition that features a purple background, two grey axes, a violet circle, a violet square, and a smaller violet circle, alongside the text "Take a look at this!!". The visualization loads a CSV dataset using `d3.csv` to log the data to the console, but the chart itself does not plot the data. The scene is rendered using raw SVG elements (line, circle, rect, text) defined directly in the markup, with styling applied via CSS. The D3 library is included only to fetch and parse the external CSV file.

MMelanieJulien

80% match

Loading thumbnail…

Exercise Module 2

This example compares GDP per capita and the top 1%’s share of income for five countries using two side-by-side bar charts rendered as SVG. Each bar’s width encodes the respective measure, and hovering reveals a tooltip with the country name and value. The data, loaded from a CSV file, is sorted by GDP per capita before rendering. The visualization uses D3 v3 to bind data, create rectangles with rounded corners, and append title elements for interactivity.

Aamerval

79% match

Loading thumbnail…

Module2 exercise

This example presents a static SVG graphic titled "THE LAW" with a large orange star at its center, framed by horizontal dark grey lines. The page loads a CSV file containing felony offense and arrest statistics from 2000 to 2011 using `d3.csv` in D3 v3, logging the parsed data to the browser console. The visualization itself does not render the data, instead serving as a fixed decorative composition with star polygons and text, set against a dark grey background.

PPaperpanic

77% match