md`# Country Flags - In Detail
We all love the land we are born in. To express that love, that patriotism starts with the details. How to show this detail? Answer lies in your "Work". Thanks to [country-flags GitHub repository](https://github.com/hampusborgos/country-flags).`
flagObject = FileAttachment("flags.json").json()
The flag of ${countryNames[countries]}
svg`${flagObject[countries]}`
//Creating the Map of Flags
flags = new Map(Object.entries(await FileAttachment("flags.json").json())
.map(([country, flag]) => [country, svg`${flag}`]))
indiaFlag = flags.get(countries)
htl.html`
<h1>HAPPY IND3PENDENCE DAY</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 900 600">
<path fill="#f93" d="M0 0h900v200H0z"/>
<path fill="#fff" d="M0 200h900v200H0z"/>
<path fill="#128807" d="M0 400h900v200H0z"/>
<g transform="translate(450 300)"><circle r="92.5" fill="#008"/>
<circle r="80" fill="#fff"/>
<circle r="16" fill="#008"/>
<g id="d"><g id="c"><g id="b"><g id="a" fill="#008">
<circle r="3.5" transform="rotate(7.5 -40 610.282)"/>
<path d="m0 80 3-48-2-16.031V15h-2v.969L-3 32l3 48z"/></g>
<use xlink:href="#a" transform="rotate(15)"/></g>
<use xlink:href="#b" transform="rotate(30)"/></g>
<use xlink:href="#c" transform="rotate(60)"/></g>
<use xlink:href="#d" transform="rotate(120)"/>
<use xlink:href="#d" transform="rotate(-120)"/></g>
</svg>`
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.
