Family first. People before programs. Basketball too.
Published
Edited
Dec 5, 2020
lateNight = html`
<h2>Late night</h2>
<div class="example">
</div>
<style>
.example {
height: 400px;
width: ${width};
background-color: #03063d;
background-image: linear-gradient(180deg, #03063d 26%, #103852 74.7%, #092716 75%, #092716 100%);
}
</style>
`
dayTime = html`
<h2>Beautiful Day</h2>
<p>(Those of you wondering how a single, thin, grey cloud could perfectly cover the whole sky have never lived in Seattle 😟)</p>
<div class="dayTime">
</div>
<style>
.dayTime {
height: 400px;
width: ${width};
background-color: #ffffff;
background-image: linear-gradient(180deg, #4da3d6 0%, #4da3d6 2%, #dddddd 7%, #dddddd 10%, #4da3d6 15%, #63AAD4 65%, #096F24 66%, #11b33b 100%);
}
</style>`
sunset = html`
<h2>Sunset</h2>
<div class="sunset">
</div>
<style>
.sunset {
height: 400px;
width: ${width};
background-image: linear-gradient(180deg, #fa709a 0%, #fee140 65%, #506F09 66%, #88B311 100%);
}
</style>`
sunset2 = html`
<p>So first let's make our sun set in the corner of the screen.</p>
<div class="sun-corner">
</div>
<style>
.sun-corner {
height: 400px;
width: ${width};
background-image: linear-gradient(150deg, #FA8970 0%, #fa709a 60%, #fee140 95%, #fee140 100%);
}
</style>`
sunset2backgrounds = html`
<p>Now we can drop our second background, which has transparency, on top of that.</p>
<div class="sunset3" id="particles1">
</div>
<style>
.sunset3 {
height: 400px;
width: ${width};
background:
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, #506F09 66%, #88B311 100%),
linear-gradient(150deg, #FA8970 0%, #fa709a 65%, #fee140 75%, #fee140 100%)
;
}
</style>`
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.