Mike Bostock

Observable

Input + Chart

Connect a freeform search input to a table.

Search + Table

Shan Carter

SQL + Chart

Basic Templates

Observable’s first-party templates, collected here, are displayed on https://observablehq.com/templates

Templates

// Import D3.js library
const d3 = require("d3"); 

// Create SVG drawing area
var svg = d3.select("body")
            .append("svg")
            .attr("width", 1000)
            .attr("height", 800);

// Draw central problem
var centralProblem = svg.append("circle")
                       .attr("cx", 500)
                       .attr("cy", 400)
                       .attr("r", 100)
                       .style("fill", "red");

// Label central problem                
svg.append("text")
   .attr("x", 500)
   .attr("y", 400)
   .text("Unsafe Surgical Care in LICs (Africa)")
   .style("text-anchor", "middle");

// Draw contributing factors  
var trainingResources = svg.append("rect")
                          .attr("x", 300)
                          .attr("y", 300)
                          .attr("width", 120)
                          .attr("height", 60)
                          .style("fill", "blue");
                          
// Add label                       
trainingResources.append("text")
                .text("Inadequate Training & Resources");
                
// Draw other factors                
var standardsAdherence = svg.append("rect")
                           .attr("x", 300)
                           .attr("y", 400)
                          //...
                          
var initativesFactor = svg.append("rect")
                         .attr("x", 300)
                         .attr("y", 500)
                        // ...  
 
// Draw links              
var link1 = svg.append("line")
               .attr("x1", 420)
               .attr("y1", 340)
               .attr("x2", 500)
               .attr("y2", 400);
               
// Add arrowheads
svg.append('path')
   .attr('d', 'M 490 390 L 500 400 L 490 410')
   .attr('fill', 'black');
                   
// Draw intervention and outcomes

var intervention = svg.append("rect")
                     .attr("x", 600)
                     .attr("y", 350)
                     //...
                     
var shortTerm = svg.append("circle") 
                  .attr("cx", 800)
                  .attr("cy", 300)
                 // ...  

// Connect boxes