Module 2: exercise

100%

Module 2: exercise

✓ Published0🌍 Public

Last edited Mar 24, 2015

Created on Mar 24, 2015

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.

AI-generated description

Similar vizzes

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

86% match

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

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

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

83% match

Loading thumbnail…

Exercise Module 2

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.

Aamerval

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

80% match

Loading thumbnail…

Data Visualization and Infographics with D3, Module 2, Exercise 1

This example displays a single static blue circle centered within a small 50 by 50 SVG canvas, using a gray outline and a two-pixel stroke. It serves as a minimal demonstration of primitive SVG shape construction, where the circle is positioned via explicit `cx` and `cy` attributes and sized with an `r` radius. The visualization uses the standard D3.js library, though the code relies directly on raw SVG elements rather than D3-specific data joins or scales. The rendering approach is entirely declarative, showing how a basic geometric mark can be encoded directly in an HTML file without external data sources or interactive behavior.

SSassOnTheRoad

77% match