Data Visualization and Infographics with D3 :: Module 2 Exercise

100%

Data Visualization and Infographics with D3 :: Module 2 Exercise

✓ Published0🌍 Public

Last edited Mar 26, 2015

Created on Mar 23, 2015

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.

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

80% 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 3 Exercise

A horizontal bar chart displays the percentage of Portuguese companies with websites from 2003 to 2014, with bars labeled by year and the percentage value shown on each bar. The visualization uses D3.js version 3.5.5 to load CSV data via `d3.csv`, bind it to SVG `rect` and `text` elements, and scale bar widths proportionally to the data values. The SVG canvas and bar colors are styled through CSS, with hover effects on the rectangles. The data comes from the `websitesEuro18.csv` file, which contains annual percentages for multiple European countries, though only the Portugal column is visualized.

JJoaoGoncalves

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

78% match

Loading thumbnail…

Working with csv and svg with D3

This example demonstrates how to load and parse a CSV dataset and render it as an SVG visualization using D3 v7. The chart uses D3's `d3.csv` to fetch data and `d3.svg`-style path generation to draw a line or area chart. The visualization maps data attributes to spatial coordinates, with axes and scales constructed via d3-scale and d3-axis. The SVG output is generated dynamically, with paths, circles, and labels styled through D3's data-join. The result highlights the workflow of binding external tabular data to scalable vector graphics elements, showing the transition from raw CSV to an interactive, data-driven SVG visualization. The example emphasizes the utility of D3's modular approach for manipulating documents based on data, while maintaining the flexibility of SVG for custom styling and interaction. The graphic is minimal in decoration, focusing on clarity of data encoding, axes, and gridlines, with hover interactions for detailed data inspection. The code is available under an MIT license, making it suitable for reuse and learning.**Working with CSV and SVG with D3** This example demonstrates how to load data from a CSV file and bind it to SVG elements using D3.js v7. The visualization shows a chart built with SVG, where data from an external CSV source is processed and mapped to visual elements. The code highlights the seamless integration of D3's data-joining capabilities with SVG's declarative drawing model, making it a clear reference for creating data-driven graphics from tabular data. Rendered entirely in SVG, this example is a practical starting point for building custom charts and plots with D3.

Yynagurvali786@gmail.com

75% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how to draw and style SVG shapes using CSS classes and D3. It loads population data from a CSV file and outputs it to the console. The visualization uses `d3.csv` to parse the data and applies CSS rules to style SVG lines and paths with custom stroke colors, widths, and line joins, showcasing the integration of D3’s data handling with SVG’s vector graphics.

OOlavo Brito

75% match

Loading thumbnail…

Loading CSV Data with D3

The visualization demonstrates how to load and inspect CSV data using D3, displaying a decorative SVG pattern of black bars above a text label. It uses `d3.csv` to asynchronously fetch the `Data_InfantMortalityRate.csv` file, which contains infant mortality rates for EU and EFTA countries from 1960 to 2012. The loaded data is parsed into an array of JSON objects and logged to the browser console, while the static SVG shapes serve as a visual placeholder.

CCatLeal

75% match

Loading thumbnail…

Loading CSV Data with D3

This example demonstrates how to load and inspect CSV data using D3. It displays a static SVG graphic of colored circles and text that reads “More Meat,” alongside a paragraph noting the data source: OECD meat consumption per capita. The code loads the CSV file using `d3.csv`, which parses each row into a JavaScript object and logs the resulting array to the browser console. The visualization relies on D3 v3 and renders its graphic elements as SVG.

MMelvanDrunen

75% match