Communication Systems Workshop : Communicating Uncertain FuturesZach's Sol Lewitt ChallengeWeek 4 : Intro to Javascript for VisualizationZach's Hello World Map ChallengeWeek 5 : Intro to D3 and Data SynthesisLanguage Scatter PlotWeek 6 : D3 Data Binding/JoiningCoding Challenge: Butterfly ChartCreative Professions by State Butterfly ChartWeek 7 : Animation and InteractivityCoding Challenge: 2D HeatmapBirth HeatmapCity RacersBrain.js Simple Example to Predict Color LightnessCensus Migration Data ExerciseEvents ExampleCommunicating Uncertain FuturesData Journal Entry 1 · Data Detective WorkData Journal Entry 2 · Data ExplorationSimple GeoJSON Custom MapLine Chart ExampleData Journal Entry 3 · Data Time-KeepingData Journal Entry 4 · Data ArrangersData Journal Entry 5 · Summary and Wishlist
Week 3: Instructional Imagery
<!-- 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>
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.
