Module 2 Exercise

100%

Module 2 Exercise

✓ Published0🌍 Public

Last edited Apr 18, 2015

Created on Apr 18, 2015

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.

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

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

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

EXERCISE 2

This example loads a CSV file of CSS named colors and displays a simple text summary of the dataset’s size, row count, and column count using d3.csv. It then renders an SVG circle that follows the mouse cursor within a React component, updating its position via React state and the onMouseMove event. The visualization uses d3.v5 for data parsing and React 16.9 for interactive UI updates, with the circle drawn using SVG elements.

Aaparnasj-sj

78% match

Loading thumbnail…

HTML Starter

This example demonstrates a basic HTML page that uses D3.js (version 5) to render a simple SVG scene. It draws a large circle in the center of a purple-background SVG, with two additional circles layered on top at the same position, though their intended roles as eyes are not visually distinct. The code uses D3's `select` and `append` APIs to create and style the SVG elements, and the page includes an HTML "Hello HTML" text. The data source is an empty `data.csv` file, and the rendering approach is SVG.

AAbhishek Kumar

78% match

Loading thumbnail…

d3 intro

A D3.js example renders an SVG scene of a large yellow circle, flanked by two smaller outlined circles, against a brown background. The visualization demonstrates basic SVG shape construction and styling through the D3 API, using methods like `append`, `attr`, and `style` to set geometry, fill, stroke, and layout properties. It reads width and height attributes from the SVG element and positions shapes relative to those dimensions. The page loads D3 from UNPKG and imports `select` and `csv` from the local script. A static CSV data file is present but not used in the displayed scene.

RRITUZZ

78% match

Loading thumbnail…

test import images

This example demonstrates a minimal D3.js visualization that combines text rendering with a basic geometric shape. It shows a simple title message alongside a small purple circle, created using two separate SVG canvases appended to the body. The first SVG displays the static text “Edit the code below to change me!” in monospace font, while the second contains a filled circle. The code uses D3 v4’s `d3.select` and `append` methods to generate SVG elements, with explicit attributes for positioning and styling. No external data is loaded; the visualization is entirely hardcoded, illustrating fundamental SVG creation and attribute manipulation within a Blockbuilder-based environment.

4456lumen

77% match

Loading thumbnail…

Some fun with SVG

A static SVG scene demonstrates primitive shapes without data binding. A blue outlined circle, a thick blue diagonal line, and a navy rectangle are positioned explicitly on a 1024x768 canvas. The page also uses the D3 v7 `select` API to insert the text "Hello D3@7" into the body. This example highlights hand-coded SVG markup rather than programmatic generation, with all geometry defined in the HTML file.

GGiuseppe

77% match