Module 2 Exercise

100%

Module 2 Exercise

✓ Published0🌍 Public

Last edited Mar 29, 2015

Created on Mar 29, 2015

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.

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

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

79% match

Loading thumbnail…

Circles Test

Three colored circles sit on a blank canvas, each representing a fruit: a yellow banana, a blue grape, and a red apple, with positions and radii set from an inline array. Built with D3 v4, the visualization appends an SVG element and uses `d3.select`, `selectAll`, and chained `.attr` and `.style` calls to map each data object’s x, y, r, and color properties directly to circle attributes. The rendering relies entirely on SVG shapes, with no axes, labels, or interaction.

JJn1532

75% match

Loading thumbnail…

data Visualization start

This example shows a simple yellow circle with a black outline, accompanied by two smaller circles positioned inside it, rendered on a static SVG canvas. The code uses plain HTML, CSS, and JavaScript within an `index.html` file, with all shapes drawn directly using SVG `circle` elements. No external libraries or data sources are involved; the visualization relies solely on hardcoded coordinates and inline styling to achieve its minimal geometric composition. The setup demonstrates basic SVG rendering in a web browser without any interactive or dynamic behavior.

AArlindo

73% match

Loading thumbnail…

Fork of Circles with D3

This example shows a playful array of six semi-transparent, brightly colored circles scattered across a pale green background. The visualization uses D3.js (version 7) to bind static data points—each specifying x and y coordinates, a radius, and a fill color—to SVG circle elements. The code leverages the `select` and `join` pattern to create the circles, setting their attributes directly from the bound data. The rendered result is a simple, colorful scatter-plot-like composition, demonstrating basic data binding and SVG manipulation with D3 in a Svelte environment.

Mmuslih_k_diy

73% match

Loading thumbnail…

Franny's Module 4 Exercise

This example visualizes sugar consumption per capita in 1961 across countries as a horizontal bar chart rendered in SVG using D3 v3. The data is loaded from a CSV file, then sorted in descending order by the 1961 value. A linear scale maps sugar amounts to bar widths, while an ordinal scale positions countries along the vertical axis. Bars are colored green and include hover effects that turn them orange, with tooltips showing the exact country and consumption value. Axis lines are styled, with the y-axis labels hidden for a cleaner look. The chart highlights a single year of data from a larger longitudinal dataset, with countries sorted to make comparisons easy. Source: FAOSTAT.

FFranny711

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

73% match

Loading thumbnail…

SVG Exercise

This example demonstrates basic SVG shape drawing and styling within a static, hard-coded visualization. It shows three concentric circles centered at the same coordinate, with each circle filled in yellow, red, and green respectively to create a layered target-like effect. A large rectangular shape with a navy stroke is positioned beside the circles, while a diagonal line and a path with a squared segment extend across the canvas. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—with attributes for positioning, fill, stroke, and width, all defined directly in the markup without any JavaScript library or data binding.

AAbdishakur Hassan

73% match