Parallel Coordinates Chart
Choropleth
Wrapped Facet
Parallel Coordinates Chart
Calendar
Wrapped Facet
Faceted Scatterplot

Not your typical notebook

Observable’s reactive JavaScript notebooks are uniquely suited for interactive data visualization, animation, learning, and experimentation.
Explore the docs
Power Plant Consumption
Choropleth
Candlestick

The shortest path from idea to live code

Observable Notebooks run in your browser, so you can immediately start building instead of setting up a local dev environment. Our notebooks were designed from the ground up to encourage collaboration and code reuse.

Literate programming

Weave together Markdown, JavaScript, HTML, and SQL for expressive dynamic documents, charts, and apps.

Connect to any data

Connect to any data source with ease — whether it’s a file, a database, or an API.

Built-in reactivity

Cells re-run automatically as you make changes and interact with inputs, making code easier to understand.

Multiplayer editing

Collaborate and share

Accelerate your feedback loop with real-time multiplayer, comments, automatic version history, and git-style forking & merging to freely explore new ideas.
Importing

Batteries included

Recommended open-source libraries such as D3, Observable Plot, and Observable Inputs are available by default. You can also import any library from npm or import cells from other notebooks.
flare 956,129flare/vis 432,629flare/util 165,157flare/animate 100,024flare/query 89,721flare/analytics 48,716flare/scale 31,294flare/data 30,284flare/physics 29,934flare/display 24,254flare/flex 4,116flare/vis/operator 183,967flare/vis/data 110,583flare/vis/controls 44,639flare/vis/legend 36,003flare/vis/axis 33,886flare/vis/Visualization 16,540Visualization16,540flare/vis/events 7,011flare/util/Strings 22,026Strings22,026flare/util/Shapes 19,118Shapes19,118flare/util/Maths 17,705Maths17,705flare/util/Displays 12,555Displays12,555flare/util/palette 11,946flare/util/Geometry 10,993Geometry10,993flare/util/heap 10,587flare/util/Colors 10,001Colors10,001flare/util/math 9,346flare/util/Arrays 8,258Arrays8,258flare/util/Dates 8,217Dates8,217flare/util/Sort 6,887Sort6,887flare/util/Stats 6,557Stats6,557flare/util/Property 5,559Property5,559flare/util/Filter 2,324Filter2,324flare/util/Orientation 1,486flare/util/IValueProxy 874flare/util/IPredicate 383flare/util/IEvaluable 335flare/animate/interpolate 23,081flare/animate/Transitioner 19,975Transitioner19,975flare/animate/Easing 17,010Easing17,010flare/animate/Transition 9,201Transition9,201flare/animate/Tween 6,006Tween6,006flare/animate/FunctionSequence 5,842FunctionSequence5,842flare/animate/Scheduler 5,593Scheduler5,593flare/animate/Sequence 5,534Sequence5,534flare/animate/Parallel 5,176Parallel5,176flare/animate/TransitionEvent 1,116flare/animate/ISchedulable 1,041flare/animate/Pause 449flare/query/methods 14,326flare/query/Query 13,896Query13,896flare/query/Expression 5,130Expression5,130flare/query/Comparison 5,103Comparison5,103flare/query/DateUtil 4,141DateUtil4,141flare/query/StringUtil 4,130StringUtil4,130flare/query/Arithmetic 3,891Arithmetic3,891flare/query/Match 3,748Match3,748flare/query/CompositeExpression 3,677CompositeExpression3,677flare/query/ExpressionIterator 3,617ExpressionIterator3,617flare/query/Fn 3,240Fn3,240flare/query/BinaryExpression 2,893BinaryExpression2,893flare/query/If 2,732If2,732flare/query/IsA 2,039IsA2,039flare/query/Variance 1,876Variance1,876flare/query/AggregateExpression 1,616AggregateExpression1,616flare/query/Range 1,594Range1,594flare/query/Not 1,554Not1,554flare/query/Literal 1,214flare/query/Variable 1,124flare/query/Xor 1,101flare/query/And 1,027flare/query/Or 970flare/query/Distinct 933flare/query/Average 891flare/query/Maximum 843flare/query/Minimum 843flare/query/Sum 791flare/query/Count 781flare/analytics/graph 26,435flare/analytics/cluster 15,207flare/analytics/optimization 7,074flare/scale/TimeScale 5,833TimeScale5,833flare/scale/QuantitativeScale 4,839QuantitativeScale4,839flare/scale/Scale 4,268Scale4,268flare/scale/OrdinalScale 3,770OrdinalScale3,770flare/scale/LogScale 3,151LogScale3,151flare/scale/QuantileScale 2,435QuantileScale2,435flare/scale/IScaleMap 2,105IScaleMap2,105flare/scale/ScaleType 1,821ScaleType1,821flare/scale/RootScale 1,756RootScale1,756flare/scale/LinearScale 1,316flare/data/converters 18,349flare/data/DataSource 3,331DataSource3,331flare/data/DataUtil 3,322DataUtil3,322flare/data/DataSchema 2,165DataSchema2,165flare/data/DataField 1,759DataField1,759flare/data/DataTable 772flare/data/DataSet 586flare/physics/NBodyForce 10,498NBodyForce10,498flare/physics/Simulation 9,983Simulation9,983flare/physics/Particle 2,822Particle2,822flare/physics/Spring 2,213Spring2,213flare/physics/SpringForce 1,681SpringForce1,681flare/physics/GravityForce 1,336flare/physics/DragForce 1,082flare/physics/IForce 319flare/display/TextSprite 10,066TextSprite10,066flare/display/DirtySprite 8,833DirtySprite8,833flare/display/RectSprite 3,623RectSprite3,623flare/display/LineSprite 1,732LineSprite1,732flare/flex/FlareVis 4,116FlareVis4,116flare/vis/operator/layout 108,083flare/vis/operator/label 17,057flare/vis/operator/encoder 14,897flare/vis/operator/distortion 14,219flare/vis/operator/filter 11,893flare/vis/operator/OperatorList 5,248OperatorList5,248flare/vis/operator/OperatorSequence 4,190OperatorSequence4,190flare/vis/operator/OperatorSwitch 2,581OperatorSwitch2,581flare/vis/operator/Operator 2,490Operator2,490flare/vis/operator/SortOperator 2,023SortOperator2,023flare/vis/operator/IOperator 1,286flare/vis/data/Data 20,544Data20,544flare/vis/data/DataList 19,788DataList19,788flare/vis/data/NodeSprite 19,382NodeSprite19,382flare/vis/data/ScaleBinding 11,275ScaleBinding11,275flare/vis/data/DataSprite 10,349DataSprite10,349flare/vis/data/TreeBuilder 9,930TreeBuilder9,930flare/vis/data/render 8,867flare/vis/data/Tree 7,147Tree7,147flare/vis/data/EdgeSprite 3,301EdgeSprite3,301flare/vis/controls/TooltipControl 8,435TooltipControl8,435flare/vis/controls/SelectionControl 7,862SelectionControl7,862flare/vis/controls/PanZoomControl 5,222PanZoomControl5,222flare/vis/controls/HoverControl 4,896HoverControl4,896flare/vis/controls/ControlList 4,665ControlList4,665flare/vis/controls/ClickControl 3,824ClickControl3,824flare/vis/controls/ExpandControl 2,832ExpandControl2,832flare/vis/controls/DragControl 2,649DragControl2,649flare/vis/controls/AnchorControl 2,138AnchorControl2,138flare/vis/controls/Control 1,353flare/vis/controls/IControl 763flare/vis/legend/Legend 20,859Legend20,859flare/vis/legend/LegendRange 10,530LegendRange10,530flare/vis/legend/LegendItem 4,614LegendItem4,614flare/vis/axis/Axis 24,593Axis24,593flare/vis/axis/CartesianAxes 6,703CartesianAxes6,703flare/vis/axis/Axes 1,302flare/vis/axis/AxisGridLine 652flare/vis/axis/AxisLabel 636flare/vis/events/DataEvent 2,313DataEvent2,313flare/vis/events/SelectionEvent 1,880SelectionEvent1,880flare/vis/events/TooltipEvent 1,701TooltipEvent1,701flare/vis/events/VisualizationEvent 1,117flare/util/palette/ColorPalette 6,367ColorPalette6,367flare/util/palette/SizePalette 2,291SizePalette2,291flare/util/palette/ShapePalette 2,059ShapePalette2,059flare/util/palette/Palette 1,229flare/util/heap/FibonacciHeap 9,354FibonacciHeap9,354flare/util/heap/HeapNode 1,233flare/util/math/SparseMatrix 3,366SparseMatrix3,366flare/util/math/DenseMatrix 3,165DenseMatrix3,165flare/util/math/IMatrix 2,815IMatrix2,815flare/animate/interpolate/Interpolator 8,746Interpolator8,746flare/animate/interpolate/MatrixInterpolator 2,202MatrixInterpolator2,202flare/animate/interpolate/ColorInterpolator 2,047ColorInterpolator2,047flare/animate/interpolate/RectangleInterpolator 2,042RectangleInterpolator2,042flare/animate/interpolate/ArrayInterpolator 1,983ArrayInterpolator1,983flare/animate/interpolate/PointInterpolator 1,675PointInterpolator1,675flare/animate/interpolate/ObjectInterpolator 1,629ObjectInterpolator1,629flare/animate/interpolate/NumberInterpolator 1,382flare/animate/interpolate/DateInterpolator 1,375flare/query/methods/range 772flare/query/methods/iff 748flare/query/methods/gte 625flare/query/methods/lte 619flare/query/methods/gt 603flare/query/methods/mul 603flare/query/methods/sub 600flare/query/methods/neq 599flare/query/methods/lt 597flare/query/methods/div 595flare/query/methods/eq 594flare/query/methods/add 593flare/query/methods/mod 591flare/query/methods/isa 461flare/query/methods/fn 460flare/query/methods/not 386flare/query/methods/stddev 363flare/query/methods/xor 354flare/query/methods/variance 335flare/query/methods/and 330flare/query/methods/or 323flare/query/methods/orderby 307flare/query/methods/update 307flare/query/methods/where 299flare/query/methods/select 296flare/query/methods/distinct 292flare/query/methods/average 287flare/query/methods/max 283flare/query/methods/min 283flare/query/methods/sum 280flare/query/methods/count 277flare/query/methods/_ 264flare/analytics/graph/MaxFlowMinCut 7,840MaxFlowMinCut7,840flare/analytics/graph/ShortestPaths 5,914ShortestPaths5,914flare/analytics/graph/LinkDistance 5,731LinkDistance5,731flare/analytics/graph/BetweennessCentrality 3,534BetweennessCentrality3,534flare/analytics/graph/SpanningTree 3,416SpanningTree3,416flare/analytics/cluster/HierarchicalCluster 6,714HierarchicalCluster6,714flare/analytics/cluster/AgglomerativeCluster 3,938AgglomerativeCluster3,938flare/analytics/cluster/CommunityStructure 3,812CommunityStructure3,812flare/analytics/cluster/MergeEdge 743flare/analytics/optimization/AspectRatioBanker 7,074AspectRatioBanker7,074flare/data/converters/GraphMLConverter 9,800GraphMLConverter9,800flare/data/converters/DelimitedTextConverter 4,294DelimitedTextConverter4,294flare/data/converters/JSONConverter 2,220JSONConverter2,220flare/data/converters/IDataConverter 1,314flare/data/converters/Converters 721flare/vis/operator/layout/NodeLinkTreeLayout 12,870NodeLinkTreeLayout12,870flare/vis/operator/layout/RadialTreeLayout 12,348RadialTreeLayout12,348flare/vis/operator/layout/CirclePackingLayout 12,003CirclePackingLayout12,003flare/vis/operator/layout/CircleLayout 9,317CircleLayout9,317flare/vis/operator/layout/TreeMapLayout 9,191TreeMapLayout9,191flare/vis/operator/layout/StackedAreaLayout 9,121StackedAreaLayout9,121flare/vis/operator/layout/ForceDirectedLayout 8,411ForceDirectedLayout8,411flare/vis/operator/layout/Layout 7,881Layout7,881flare/vis/operator/layout/AxisLayout 6,725AxisLayout6,725flare/vis/operator/layout/IcicleTreeLayout 4,864IcicleTreeLayout4,864flare/vis/operator/layout/DendrogramLayout 4,853DendrogramLayout4,853flare/vis/operator/layout/BundledEdgeRouter 3,727BundledEdgeRouter3,727flare/vis/operator/layout/IndentedTreeLayout 3,174IndentedTreeLayout3,174flare/vis/operator/layout/PieLayout 2,728PieLayout2,728flare/vis/operator/layout/RandomLayout 870flare/vis/operator/label/Labeler 9,956Labeler9,956flare/vis/operator/label/RadialLabeler 3,899RadialLabeler3,899flare/vis/operator/label/StackedAreaLabeler 3,202StackedAreaLabeler3,202flare/vis/operator/encoder/PropertyEncoder 4,138PropertyEncoder4,138flare/vis/operator/encoder/Encoder 4,060Encoder4,060flare/vis/operator/encoder/ColorEncoder 3,179ColorEncoder3,179flare/vis/operator/encoder/SizeEncoder 1,830SizeEncoder1,830flare/vis/operator/encoder/ShapeEncoder 1,690ShapeEncoder1,690flare/vis/operator/distortion/Distortion 6,314Distortion6,314flare/vis/operator/distortion/BifocalDistortion 4,461BifocalDistortion4,461flare/vis/operator/distortion/FisheyeDistortion 3,444FisheyeDistortion3,444flare/vis/operator/filter/FisheyeTreeFilter 5,219FisheyeTreeFilter5,219flare/vis/operator/filter/VisibilityFilter 3,509VisibilityFilter3,509flare/vis/operator/filter/GraphDistanceFilter 3,165GraphDistanceFilter3,165flare/vis/data/render/EdgeRenderer 5,569EdgeRenderer5,569flare/vis/data/render/ShapeRenderer 2,247ShapeRenderer2,247flare/vis/data/render/ArrowType 698flare/vis/data/render/IRenderer 353
import {Pack} from "@d3/pack-component"
Embedding

Ready for production

Conveniently embed notebooks as iframes, or for seamless integration, import notebooks into your app as reactive JavaScript modules.
FEATURES

Imports

Reuse code from other notebooks, or import your favorite libraries from npm.

Fork & merge

Quickly duplicate a notebook, then merge changes back in.

Embeds

Take what you build to production as either an iframe or JavaScript.

Databases

Connect to BigQuery, Snowflake, DuckDB, PostgreSQL, and more.

Files

Attach data by simply dragging files onto a notebook.

Inputs

Add interactivity with drop-downs, sliders, checkboxes, and more.

Minimap

Get an instant overview of your notebook’s reactive dataflow graph.

AI Assist

Get help writing code and fixing errors.

Join the community

Over 1,000,000 notebooks have been created on Observable. Discover new ways to present data, connect with other data visualization enthusiasts, and fork public notebooks to get started more quickly. For even more examples check out trending and recent notebooks.

Observable Notebooks are ideal for prototyping, allowing us to rapidly iterate on data visualizations and explore insights without needing advanced front-end skills.

Yao Yue

Co-founder and Infrastructure Engineer, IOP Systems

Yao Yue

Pricing

Notebook Free

Free

Great for getting started with Observable Notebooks.

Notebook Pro

$22/mo/editor

Perfect for teams who want to build in notebooks. Add viewers for $10/mo.

Plan details

Free

Pro


Observable platform

Add viewers to your workspace
Not included
Included
Build data visualizations with code in notebooks
Included
Included

Notebooks

Multiplayer code editing
Not included
Included
Schedule notebook runs
Not included
Included
Remove Observable watermark on notebook embeds
Not included
Included
Create public or private notebooks
Included
Included
Use AI Assist in notebooks
Included
Included
Access databases, cloud files, and web API endpoints
Included
Included
Version control
Included
Included

Workspace management

Manage guest member access at the notebook level
Not included
Included
Control access to notebooks
Included
Included

Security

Authenticate via email, Google, GSuite, Microsoft, GitHub
Included
Included

Onboarding and support

Community support through our Forum
Included
Included

Get started today