Public
Edited
Apr 10
1 fork
// Dashboard with no main headers - only visualizations
dashboardNoHeaders = html`
<div class="dashboard">
<!-- First visualization - Global Distribution of TB Mortality Rates -->
<section class="viz-section">
<iframe width="100%" height="600" frameborder="0"
src="https://observablehq.com/embed/@pranitha-presingu/plot-1-global-cholopleth-plot?cells=viewof+visualization">
</iframe>
</section>
<!-- Second visualization - Evolution of TB Mortality and Incidence by HIV Status -->
<section class="viz-section">
<iframe width="100%" height="700" frameborder="0"
src="https://observablehq.com/embed/@pranitha-presingu/plot-2-barplot?cells=combined">
</iframe>
</section>
<!-- Third visualization - Highest vs Lowest TB Burden Regions -->
<section class="viz-section">
<iframe width="100%" height="600" frameborder="0"
src="https://observablehq.com/embed/@pranitha-presingu/plot-3-parallel-plot?cells=view">
</iframe>
</section>
<footer>
<p>Created by Pranitha</p>
</footer>
<style>
.dashboard {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 1400px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
}
.viz-section {
margin-bottom: 40px;
padding: 20px;
border-radius: 8px;
background: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
iframe {
border: none;
width: 100%;
border-radius: 4px;
}
footer {
text-align: center;
margin-top: 40px;
color: #666;
font-size: 0.9em;
padding: 15px 0;
}
</style>
</div>
`
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
