Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<p>Hello World!</p>
Notice also that in Observable (the notebook editing tool that you're reading this in) the result of the cell appears ABOVE the code that generates it. (see the code cell below this text display). That's different from Jupyter Notebooks, for those familiar with that, and will take a little getting used to.
If the cell is Pinned (see blue pin icon when you float the mouse over the cell), then the code is visible along with the result. If the cell is unpinned (gray pin icon, not selected to pin), then the code hides and you only see the results. This is simply a convention in this Observable interface. You can Pin and Unpin as you need.
<p>Hello World!</p> <!-- the paragraph has a forced margin space below it -->
<h1>Hello World!</h1> <!-- heading 1 is a large heading, with some margin also -->
<h2>Hello World!</h2> <!-- heading 2 is a little smaller (there's also h3, h4, h5, etc.) -->
<div>Hello World!</div> <!-- and the div has no specific margin or font-size, and just contains -->
<div>
this is just some text in a div<br />
but it can also include a <a href="https://arch.virginia.edu">link to the UVA Architecture website</a><br />
and it can also include an image <img src="https://www.arch.virginia.edu/shared-gallery/img/h52/A-Mark-SchoolofArchitecture-k.png" height="50"/><br />
or a different image <img src="http://thefirestarter.co.uk/wp-content/uploads/2015/12/anything-for-money.jpg" width="300"/>
</div>
<p>the quick brown fox jumped over the lazy dog.</p>
<p id="fox">the quick <span style="color:brown">brown</span> fox <i>jumped</i> over the lazy dog.</p>
<style>
p#fox {background-color: chocolate; font-size: 24px;}
i {color: blue;}
</style>
<svg width="300" height="300">
<rect x="100" y="100" width="180" height="120" style="fill:blue; stroke: red; stroke-width: 3" />
<circle cx="55" cy="55" r="50" />
<line x1="50" y1="250" x2="280" y2="50" />
<style>
circle {fill: yellow; stroke: gray;}
line {stroke: black; stroke-width: 2;}
</style>
</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.
