Skip to main content
SimilarExport ZIP
100%

Dataviz 2018 Assignment Graphics

✓ Published1🌍 Public
MMukund Khandelwal
Last edited Sep 11, 2018
Created on Sep 11, 2018

A grid of small blue rectangles is generated and drawn into an SVG canvas. The page loads an HTML document that defines a 5000 by 3000 pixel SVG element and uses a JavaScript loop to create each rectangle, setting its position, size, and fill color programmatically via the SVG namespace. The rectangles are arranged in rows and columns, creating a simple, repeating pattern. The visualization relies entirely on the SVG `rect` element and JavaScript DOM manipulation, with no external charting library, and includes a CSS stylesheet for general page styling.

AI-generated description

Dataviz 2018 Assignment Graphics recreated using shapes with SVG and CSS notebook.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of small blue rectangles is arranged in seven rows and three columns inside a grey rectangular frame, with one rectangle overwritten in the third row. The layout is generated programmatically using nested JavaScript loops that create SVG `rect` elements via `document.createElementNS` and append them to an SVG element with the `xmlns` namespace. Pure SVG and CSS render the shapes, with no external visualization library.

MMukund Khandelwal
94% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of small blue rectangles is arranged in repeating rows and columns across an SVG canvas, creating a simple patterned composition. The visualization is built entirely with raw JavaScript and SVG manipulation, using `document.createElementNS` logic through a loop to generate each rectangle with fixed dimensions and fill color. The code references `svgOne` as the target SVG element and applies styles from an external CSS file, though the primary rendering relies on inline attributes set via the script. The example demonstrates basic shape generation without any data binding or interaction, serving as a static graphic recreation.

MMukund Khandelwal
94% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

This example demonstrates a simple grid of blue squares rendered inside an SVG element. The visualization begins with a single static rectangle defined in the markup, then uses the D3.js `select` and `attr` APIs to programmatically append a looping series of additional rectangles, creating a dense 50-pixel grid pattern across the canvas. The underlying data is generated algorithmically rather than sourced from a dataset. The final result is an abstract, low-level exercise in shape composition, with the SVG output styled by a minimal external CSS file.

MMukund Khandelwal
93% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

MMukund Khandelwal
90% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

MMukund Khandelwal
90% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

MMukund Khandelwal
90% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A collection of geometric shapes and lines, arranged in a dense, grid-like composition, recreates the graphics of a Dataviz 2018 assignment. The example uses only SVG and CSS, with a single `<rect>` element duplicated in a loop and a `fill` color applied. A CSS class, `.lines`, defines stroke properties for paths, though no specific JavaScript libraries are referenced in the visible code. The embedded YouTube video suggests the work may be a video-based assignment, while the SVG rendering is scaled and positioned within an HTML page.

MMukund Khandelwal
84% match
Loading thumbnail…

HTML Starter

This example renders a lightweight grid visualization inside an SVG element, with horizontal and vertical lines spaced every 20 pixels across a 960-by-500 canvas. The static grid serves as a simple geometric backdrop, demonstrating basic SVG construction without any interactive or data-driven elements. The code uses the d3.select and d3.append APIs to build the grid lines, applying a gray stroke via CSS classes. The dataset is generated programmatically from the SVG’s dimensions, and the rendering relies solely on vector shapes defined in pure SVG, with no external data source or animations involved.

SScott Page USMC
74% match