The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Bringing the TypeScript Language Server to Observable3 ways using 'Import' expedites data science workflowsTereza Iofciu, PhD, Observable Ambassador, Head of Data Science at neuefischeHow our community builds Observable4 ways to get started with JavaScript for data analysis3 tips for data scientists to move from model to production - fastVisualizing monthly retail reports to better uncover insightsAndrew Wooldridge, Observable Ambassador, Senior Software EngineerMeet the newest members of the Observable team4 ways JavaScript makes data analysis faster and easierAmbassador Spotlight: Aaron Kyle Dennis, Social Development Specialist at Asian Development BankMeet the newest members of the Observable teamAmbassador Spotlight: Andrea Mignone, Software Engineer and Data ArchitectAmbassador Spotlight: Maxene Graze, Data Visualization Engineer at MURALAmbassador Spotlight: David Kirkby, Professor of Cosmology at UC IrvineMeet the newest members of the Observable teamJune 2022 - What's new on Observable?Create more expressive & articulate data visualizations with Plot 0.5Meet the Newest Members of the Observable TeamObservable for Excel Users: IntroductionWatch the NBA Finals Players Data Jam on ObservableMay 2022 - What's new on Observable?Meet the newest members of the Observable teamUpcoming Data Analyst Events with ObservableAnalyzing Star Wars movies + the first anniversary of Observable Plot!April 2022 - What's new on Observable?Carl Wilson joins Observable as Head of RecruitingAmanda Waite joins Observable as Engineering LeadBlack History Month ActivityPlot CheatsheetsVisualizing The New York Times’s Mini Crossword2021 Retrospective2021 Observable Community RecognitionIntroducing AuthorsObservable Ambassadors Take Up The #30DayMapChallengeFuture of Data Work: Empowering Data Practitioners in One PlaceSpreadsheet-based data collaboration gets supercharged with ObservableFuture of Data Work: Collaboration and No LimitsAverting Disaster with Collaborative Data VisualizationObservable shares its first Research Report: State of Dataviz 2021Observable: Discovering a New World#ObservableFTW contest & live events week! July 26-30Introducing Observable for Enterprise2021 Pride Month and LGBTQIA+ EqualityIntroducing Observable Templates!Database outage on May 18, 2021When What You Notice Isn’t What’s WrongIntroducing Observable Plot“Yes And”: Collaboration for software developersAnnouncing the Women’s History Month DataViz Contest WinnersAnnouncing the Black History DataViz Contest WinnersWe Don't Know Everything: A better system for feedback10 Years of Open-Source VisualizationHow D3 Moved UsPowering the D3 CommunityD3 Turns 10Building Community: Announcing Our AmbassadorsObservable Company ValuesEasier Embedding and Sharing with ObservableThe Great Adaptation
Duplicate avatars retrospective
import {blogSubscribeFooter} from "615860c65e5663a6"
import {convolveY2, Kx, Ky} with {avatarSize as width, avatarSize as height} from "@mbostock/sobel-operator"
avatarSize = Math.floor((Math.min(640, width) - (16 * 3)) / 8) * 2
function genAvatar({size = 64} = {}) {
const c = document.createElement("canvas");
c.width = size;
c.height = size;
const ctx = c.getContext("2d");
const h1 = Math.floor(Math.random() * 360);
const hDelta = Math.random() * 40 + 20;
const h2 = h1 > 300 ? h1 - hDelta : h1 + hDelta;
const s = Math.floor(Math.random() * 40) + 40;
const l1 = Math.floor(Math.random() * 30) + 30;
const l2 = Math.floor(Math.random() * 30) + 50;
const r = size / 2;
const ang = Math.random() * Math.PI * 2;
const cx = (Math.cos(ang) + 1) * r;
const cy = (Math.sin(ang) + 1) * r;
const gradCenter = [cx, cy, size * 0.1];
const gradEdge = [cx, cy, size * 1.1];
const gradient = ctx.createRadialGradient(...gradCenter, ...gradEdge);
gradient.addColorStop(0, `hsl(${h1}, ${s}%, ${l1}%`);
gradient.addColorStop(1, `hsl(${h2}, ${s}%, ${l2}%`);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, size, size);
return c;
}
demoAvatarUrls = [
{title: "Cartoon avatar", url: await FileAttachment("demo-avatar-1.jpg").url()},
{title: htl.html`<a href="https://observablehq.com/@waynsutton">@waynesutton</a>`, url: await FileAttachment("wayne-avatar.jpg").url()},
{title: "Generated avatar", url: await genAvatar({size: avatarSize}).toDataURL("image/png")},
{title: "Google avatar", url: await FileAttachment("demo-avatar-4.jpg").url()},
]
async function createContext(image) {
await new Promise((resolve) => {
if (image.naturalWidth) resolve();
function onLoad() { resolve() }
image.addEventListener('load', onLoad);
invalidation.then(image => removeEventListener('load', onLoad));
});
const context = DOM.context2d(avatarSize, avatarSize, 1);
context.canvas.style = "max-width: 100%;";
context.drawImage(image, 0, 0, avatarSize, avatarSize);
return context;
}
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.