<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 792 612" style="enable-background:new 0 0 792 612;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF0000;}
.st1{fill:#FF9700;stroke:#FF0000;stroke-width:17;stroke-miterlimit:10;}
.st2{fill:#00FF00;stroke:#FFFFFF;stroke-miterlimit:10;}
.st3{fill:#00FFFF;stroke:#FF00FF;stroke-width:14;stroke-miterlimit:10;}
.st4{fill:none;stroke:#FF00FF;stroke-width:3;stroke-miterlimit:10;}
.st5{fill:#231F20;}
.st6{font-family:'Helvetica-Light';}
.st7{font-size:28.6968px;}
.st8{fill:none;stroke:#00C7E0;stroke-width:6;stroke-miterlimit:10;}
.st9{fill:none;stroke:#00A2FF;stroke-width:3;stroke-miterlimit:10;}
.st10{fill:none;stroke:#0000FF;stroke-width:3;stroke-miterlimit:10;}
.st11{fill:#FFFFFF;stroke:#000000;stroke-width:10;stroke-miterlimit:10;}
.st12{fill:#0000FF;}
</style>
<rect x="36.74" y="19.38" class="st0" width="111.97" height="111.97"/>
<rect x="500.62" y="354.3" class="st1" width="197.01" height="200.11"/>
<circle class="st2" cx="405.49" cy="181.17" r="55.98"/>
<polygon class="st3" points="639.68,153.43 549.95,153.43 505.08,231.14 549.95,308.85 639.68,308.85 684.54,231.14 "/>
<line class="st4" x1="192.89" y1="154.44" x2="291.78" y2="254.94"/>
<text x="512" y="70" class="st5 st6 st7">Data Visualization!</text>
<path class="st8" d="M394.85,356.38c-22.19,22.66-58.54,23.04-81.2,0.85c-18.13-17.75-18.43-46.83-0.68-64.96
c14.2-14.5,37.46-14.75,51.97-0.55c11.6,11.36,11.8,29.97,0.44,41.57c-9.09,9.28-23.98,9.44-33.26,0.35
c-7.42-7.27-7.55-19.18-0.28-26.61c5.82-5.94,15.35-6.04,21.29-0.22c4.75,4.65,4.83,12.28,0.18,17.03
c-3.72,3.8-9.82,3.87-13.62,0.14c-3.04-2.98-3.09-7.86-0.11-10.9"/>
<path class="st9" d="M105.39,380.01c0,0,40.17,64.1,76.07,19.66s90.51,6.77,111.97,35.16c68.38,90.48,129.91-14.3,113.68-41.82"/>
<polyline class="st10" points="178.78,100.53 242.64,27.03 258.03,86.85 284.99,63.78 284.99,109.93 235.81,109.93 299.05,174.03
305.89,64.63 "/>
<path class="st10" d="M434.85-66.99"/>
<ellipse class="st11" cx="155.61" cy="516.48" rx="101.95" ry="62.39"/>
<circle class="st12" cx="121.71" cy="262.82" r="93.75"/>
</svg>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 800 200">
<style type="text/css">
.boring-red{fill:#FF0000;}
.exciting-green-cyan{fill:#00FF00; stroke:#00FFFF; stroke-width:14}
.magenta-stroke{fill:none; stroke:#FF00FF; stroke-width:3}
</style>
<rect x="50" y="50" class="boring-red" width="100" height="100"/>
<line class="magenta-stroke" x1="200" y1="50" x2="400" y2="150"/>
<circle class="exciting-green-cyan" cx="525" cy="100" r="50"/>
<text x="490" y="105" class="label">Hello World!</text>
</svg>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 800 200">
<style type="text/css">
.boring-red{fill:#ff0000;}
.exciting-green-cyan{fill:#00FF00; stroke:#00FFFF; stroke-width:14}
.magenta-stroke{fill:none; stroke:#FF00FF; stroke-width:3}
.half-transparent{opacity:.5}
.label{font-family:courier; font-size:8pt}
</style>
<rect x="50" y="50" class="boring-red half-transparent" width="100" height="100"/>
<rect x="60" y="60" class="boring-red half-transparent" width="100" height="100"/>
<rect x="70" y="70" class="boring-red half-transparent" width="100" height="100"/>
<line class="magenta-stroke" x1="200" y1="50" x2="400" y2="150"/>
<circle class="exciting-green-cyan" cx="525" cy="100" r="50"/>
<text x="490" y="105" class="label">Hello World!</text>
</svg>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 800 200">
<style type="text/css">
.cyan-stroke{stroke:#00CCFF; fill:none;}
.magenta-stroke{stroke:#FF00FF; fill:none;}
.orange-stroke{stroke:#FFAA00; fill:none;}
.teal-fill{fill:#00eeee}
.thick-stroke{stroke-width:5}
.thin-stroke{stroke-width:1}
</style>
<polygon class="teal-fill" points="537.17,85.89 492.78,85.89 470.59,124.33 492.78,162.77 537.17,162.77 559.36,124.33 "/>
<polyline class="orange-stroke thick-stroke" points="76.3,100.53 140.16,27.03 155.54,86.85 182.51,63.78 182.51,109.93 133.32,109.93 196.57,174.03 203.41,64.63 "/>
<path class="magenta-stroke thin-stroke" d="M366.3,114.84c-22.19,22.66-58.54,23.04-81.2,0.85c-18.13-17.75-18.43-46.83-0.68-64.96c14.2-14.5,37.46-14.75,51.97-0.55c11.6,11.36,11.8,29.97,0.44,41.57c-9.09,9.28-23.98,9.44-33.26,0.35c-7.42-7.27-7.55-19.18-0.28-26.61c5.82-5.94,15.35-6.04,21.29-0.22c4.75,4.65,4.83,12.28,0.18,17.03c-3.72,3.8-9.82,3.87-13.62,0.14c-3.04-2.98-3.09-7.86-0.11-10.9"/>
<path class="cyan-stroke thick-stroke" d="M407.19,57.82c0,0,40.17,64.1,76.07,19.66s90.51,6.77,111.97,35.16c68.38,90.48,129.91-14.3,113.68-41.82"/>
</svg>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 800 200">
<style type="text/css">
.cyan-stroke{stroke:#00CCFF; fill:none;}
.magenta-dashed{stroke:#FF00FF; fill:none; stroke-dasharray:4 }
.orange-stroke{stroke:#FFAA00; fill:none;}
.thick-stroke{stroke-width:5}
.thin-stroke{stroke-width:1}
.label{text-anchor:left; alignment-baseline:middle}
</style>
<path class="cyan-stroke" d="M100,100 C100,150,300,150,300,100 C300,50,500,50,500,100"/>
<polyline class="magenta-dashed" points="100,100 100,150 300,150 300,100 300,50 500,50 500,100" />
<circle class="orange-stroke" cx="100" cy="100" r="3"/>
<circle class="orange-stroke" cx="100" cy="150" r="3"/>
<circle class="orange-stroke" cx="300" cy="150" r="3"/>
<circle class="orange-stroke" cx="300" cy="100" r="3"/>
<circle class="orange-stroke" cx="300" cy="50" r="3"/>
<circle class="orange-stroke" cx="500" cy="50" r="3"/>
<circle class="orange-stroke" cx="500" cy="100" r="3"/>
</svg>
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.