Module 2 exercice

100%

Module 2 exercice

✓ Published0🌍 Public

Last edited Apr 3, 2015

Created on Apr 3, 2015

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.

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

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

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

78% match

Loading thumbnail…

d3js Exercice 3 - svg

This example demonstrates a minimal SVG composition built with D3.js v4, combining geometric shapes without data binding. It shows a blue rectangle and a yellow circle positioned inside an SVG canvas of fixed dimensions, highlighting how basic shapes render and layer in a web document. The code explicitly uses D3’s selection and styling methods, though the main styling is applied directly via SVG attributes such as `width`, `height`, `fill`, and `cx`/`cy` for positioning. The visualization serves as an introductory exercise, with commented-out instructions suggesting color manipulation and transforms like `translate` and `rotate`. No dynamic data is involved; the focus is purely on static SVG rendering and potential interactive styling adjustments.

AAlainRo

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

74% match

Loading thumbnail…

D3 charte test

This example displays a blank red SVG canvas and loads a small CSV dataset containing titles and numeric values. The page establishes an SVG element with fixed dimensions and applies a background color via the `style` attribute. Using D3 v5, the code selects the SVG element with `d3.select`, reads the CSV file with `d3.csv`, and logs the parsed data to the browser console. The visualization itself does not render any marks or charts; it only demonstrates the initial setup for data loading and SVG manipulation.

RRicardFabien

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

74% match

Loading thumbnail…

Loading CSV Data with D3

This example shows a static SVG composition of colored rectangles and circles on a grid of axes, built with D3.js v3. The code loads park data from a CSV file using `d3.csv`, which converts the rows into an array of JSON objects, then logs the result to the console. The rendering uses raw SVG elements defined directly in the HTML, not generated by D3. The data source is the external `Map_Parks.csv` file, and the visualization itself is a fixed geometric layout rather than a data-driven chart.

11pixelzz

73% match