Public
Edited
May 7
3 forks
6 stars
30 Days of D3 DatavizINTRO TO D3.JSINTRO TO OBSERVABLEINTRO TO JAVASCRIPTd3.select.append( )VENN DIAGRAMd3.select.data( )d3.csv( )SPOTIFY | ARTIST | SIMPLE CHARTHISTOGRAMAIRBNB BERLIN | DATADATA SOURCESd3.scale( )SIMEPLE SCALINGSCALED CIRCLES70s CAR BUBBLE CHARTTHE POWER OF SCALEd3.axis( )BARCODE PLOTSCATTER PLOT WITH AXESSPOTIFY | ARTISTS | D3.JS | Step 11. ASSIGNMENTTHREATENED SPECIES | BIRDS 2020d3.transition( )SIMPLE TRANSITIONHTML BUTTONSVISUAL ENCODING BUTTON | HTMLTHREATENED SPECIES - BIRDS 2020 ANIMATEDANIMATED COLORSPOTIFY | ARTISTS | D3.JS | Step 2ANIMATED SCATTER PLOTd3.tip( )SPOTIFY | ARTISTS | D3.js | Step 3d3.hexbinFROM SCATTER TO HEXBINSPOTIFY | GENRESSPOTIFY | YEARS ARQUERO.JSTHE UNWELCOMED ARQUERO.JSINTRO TO ARQUERO.JSGLOBAL TEMPERATURE TRENDS, 1880-2022 ARQUERO.JSGLOBAL TEMPERATURE MONTHLY, 1880-2022 D3.JSUSA GAS PRICE 2000-22SPOTIFY | ARTISTS ARQUERO.JSd3.line( )d3.area( )INTERACTIVE TIMEFRAMEGLOBAL TEMPERATURES ANOMALIESANIMATED LINE CHARTCSS PATH ANIMATIONANIMATED LINECOVID | MOBILITY DATA ON CITIESGLOBAL TEMPERATURES DAILY 1979 - 2024 | D3.JSCONSUMPTION EMISSION2. ASSIGNMENT
INTRO TO HTML, SVG & CSS
<p>When a <strong> 🌳 falls </strong> in the forest <br> there are <strong> other 🌳🌳🌳🌳 listening. </strong> </p>
<h1>HTML SECTION</h1>
<p>by <a href="https://www.sandraviz.com/">SANDRA</a></p>
<img src="https://avatars.githubusercontent.com/u/1562726?s=200&v=4" height="100">
tag | example | attributes | positioning attributes
--- | --- | ---
<code><rect></code> | ${tableSVG('<rect width=50 height=50 />')} | width, height | x, y
<code><circle></code> | ${tableSVG('<circle cx=25 cy=25 r=25 />')} | r | cx, cy
<code><path></code> | ${tableSVG('<path d="M0,0 L50,50" />')} | d |
<code><text></code> | ${tableSVG('<text x=25 y=25 text-anchor="middle" dy=".35em" stroke="none" fill="#333">hi there!</text>')} | | x, y, text-anchor, dy
<code><g></code> | ${tableSVG('<text x=25 y=25 text-anchor="middle" dy=".35em" stroke="none" fill="#333">group element</text>')} | | transform
<svg width="950" height="250">
<rect x="160" y="10" width="10" height="100" fill="#98F9AD" fill-opacity="0.6"></rect>
<rect x="170" y="10" width="10" height="100" fill="#4DF772" fill-opacity="0.6"></rect>
<rect x="120" y="10" width="10" height="100" fill="#3DC45A" fill-opacity="0.6"></rect>
<rect x="220" y="10" width="10" height="100" fill="#257837" fill-opacity="0.6"></rect>
</svg>
<svg width="950" height="200">
<polyline points="50,150 50,65 180,75 200,10 300,20" fill="none" stroke="black" />
</svg>
<h1 style="color: #98F9AD">Lisbon is my favourite city </h1>
<h2 style="color: #4DF772">But I also like Barcelona and Madrid</h2>
<h3 style="color: #3DC45A">My hometown Köln also belongs to me </h3>
<h4 style="color: #257837">Next weekend I discover a new portugues city</h4>
<h5 style="color: #497853">In a month I will visit Amsterdam</h5>
<p id="p1">When a tree falls in the forest</p>
<p id="p2">there are other trees listening.</p>
<style>
#p1 {
background-color:#98F9AD;
font-size: 20px;
font-style: italic;
text-align: left;
}
#p2 {
background-color:#4DF772;
font-size: 40px;
text-align: left;
}
</style>
<svg width="950" height="170">
<circle cx="150" cy="100" r=60 fill="#4DF772"></circle>
<circle cx="220" cy="100" r=60 fill="#3DC45A"></circle>
<circle cx="100" cy="100" r=60 fill="#98F9AD"></circle>
<circle cx="280" cy="100" r=60 fill="#257837"></circle>
</svg>
<style>
circle {
opacity:0.4;
}
</style>
<p id="h2">CSS TEXT</p>
<style>
#h2 {
font-size:30px;
color:"#662e9b";
font-family: 'Montserrat Alternates', sans-serif;
font-weight:600;
}
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;1,100;1,300&display=swap");
</style>
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.
