Export Image
Export Code

make_something_dataviz

Daniel Ribaudo

Last edited Sep 28, 2021
Created on Aug 27, 2021
Forked from SVG Fundamentals

A sandbox-esque submission for the Data Visualization course at WPI.

I was going to originally make a sun-like figure, but I wanted to be more abstract and take from a different color palette.

Gradient use: The circle in the center uses a radial gradient, and the triangles coming out from it use a linear gradient.

Animation use: The squares at the end of the triangles are animated to swap between the colors used within the visual.

Shapes: The list of shapes is as follows: circle, triangle (polygon), rectangle (rect) and quadratic curve (using path).

Scripting: The set [Triangle, Path, Rect] is only specified once within the HTML file. On load, this set of shapes (contained within a <g> element) gets duplicated by the circleCopy function. This function takes the id of the element to copy, the element to rotate around, and the number of subdivisions to use. This number must be greater than 1. I did this to practice manipulating SVG elements via Javascript.

Forked from: https://vizhub.com/curran/df49fdfb56bf430b81cccc33a7e3a3bb

Authored by: Daniel Ribaudo

MIT Licensed