Module 2 exercice

100%

Module 2 exercice

✓ Published0🌍 Public

Last edited Mar 31, 2015

Created on Mar 31, 2015

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.

AI-generated description

Similar vizzes

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

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

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

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

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

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

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

78% match

Loading thumbnail…

Task10

This example displays a static SVG composition of geometric shapes over a dark background, with luminous ellipses, a blue path, and a green curved line. It also loads a CSV file of country data from a GitHub gist using `d3.csv`, then calculates and displays the file size in kilobytes, row count, and column count in a message container. The page references D3 v5 via UNPKG and uses the `select`, `csv`, and `csvFormat` APIs from the D3 module.

HHarshithaAmbilpur

77% match