Published
Edited
Sep 7, 2021
Insert cell
# Data Visualization _Week 02
## **SVG Composition Challenge**
1. Choosing Reference image from [**Artnet**](http://www.artnet.com/artists/sol-lewitt/wall-drawing-977-a-nK25S8Cwds6TvAhveb7T1w2)
1. [Sketch](https://drive.google.com/file/d/1fX7C7DOP_Lg6LgGjkWSD0MATHzKM2rRZ/view?usp=sharing)
* Setting Artboard size (900*800)
* Identifying coordinates
* Assigning colors by face
1. Writing codes
1. Pick color codes from **[htmlcolorcodes.com](https://htmlcolorcodes.com/)**

Insert cell
html`
<svg version="1.1" x="0px" y="0px" viewBox="0 0 900 800">
<Style type="text/css">
.Background {fill:#BFCAD7}
.Red {fill:#F03A0D;}
.Yellow {fill:#F0E90D}
.Blue {fill:#4A81BF}

</style>
<rect x="0" y="0" class="Background" width="900" height="800"/>
<polygon class="Red" points="450,50 50,250 250,350 450,250 650,350 850,250 450,50 "/>
<polygon class="Red" points="450,400 250,500 450,600 650,500 450,400 "/>
<polygon class="Yellow" points="50,250 50,550 450,750 450,600 250,500 250,350, 50,250 "/>
<polygon class="Yellow" points="450,250 450,400 650,500 650,350 450,250 "/>
<polygon class="Blue" points="450,250 250,350 250,500 450,400 450,250 "/>
<polygon class="Blue" points="650,350 650,500 450,600 450,750 850,550 850,250 650,350 "/>
`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more