The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Calendar componentTemplates: Table of InstructionsExample cohort analysis in SQLUser Retention: Cohort Grid ComponentMultidrag AxisCash FlowTable ValidatorSurvey Free Response ComponentSurvey Question SelectorSurvey Matrix CompareSurvey Pie ChartSurvey HistogramSurvey DataSurvey Component LibraryGitHub API HelpersDraggable Cash Flow Curve
Survey Visualization Suggestions
suggest(question)
serveQuestion = (question) => {
// use heuristics to suggest various visualizations
if(Array.isArray(question)) {
const [q1, q2] = question; // assume just two questions
return applyQuestions(question, suggestions[`compare_${q1.type}_${q2.type}`])
}
if(question.type == "choice" && question.domain.length <= 6) {
return applyQuestion(question, suggestions.simple_pie)
// return applyQuestion(question, suggestions.simple_histogram)
}
if(question.type == "choice" && question.domain.length > 6) {
return applyQuestion(question, suggestions.limit_histogram)
}
if(question.type == "multi") {
return applyQuestion(question, suggestions.multi_histogram)
}
if(question.type == "free") {
return applyQuestion(question, suggestions.free_response)
}
return {}
}
suggestions = ({
"simple_pie": {
label: "Pie chart",
note: "",
code: `survey.pie(❓, {
domain: 🏠
})`
},
"simple_histogram": {
label: "Histogram",
note: "Show the frequency of each choice",
code: `survey.histogram(❓, {
domain: 🏠
})`
},
"limit_histogram": {
label: "Histogram",
note: "Show the frequency of each choice",
code: `survey.histogram(❓, {
limit: 8,
})`
},
"multi_histogram": {
label: "Multi-select Histogram",
note: "Show the top answers selected",
code: `survey.histogram(❓, {
limit: 8,
multiselect: true
})`
},
"free_response": {
label: "Free Response",
note: "Show a list of responses",
code: `survey.freeResponse(❓)`
},
"compare_choice_multi": {
label: "",
note: "",
code: `survey.matrixCompare(❓, ❔)`
},
"compare_multi_choice": {
label: "",
note: "",
code: `survey.matrixCompare(❓, ❔)`
},
"compare_choice_choice": {
label: "",
note: "",
code: `survey.matrixCompare(❓, ❔)`
},
"compare_multi_multi": {
label: "",
note: "",
code: `survey.matrixCompare(❓, ❔)`
},
})
applyQuestion = (question, s, prefix = "sheet.questions.") => {
let suggest = Object.apply({}, s)
suggest.code = s.code.replaceAll("❓", prefix + question.id)
.replaceAll("🏠", JSON.stringify(question.domain))
suggest.label = s.label
return suggest
}
applyQuestions = (questions, s, prefix = "sheet.questions.") => {
let suggest = Object.apply({}, s)
suggest.code = s.code.replaceAll("❓", prefix + questions[0].id)
.replaceAll("❔", prefix + questions[1].id)
.replaceAll("🏠", JSON.stringify(questions[0].domain))
return suggest
}
render = (suggestion) => html`
<div class="copy">${Copier("Copy code", {value: suggestion.code})}</div>
<textarea class="sample" rows=${rows(suggestion.code)}>${suggestion.code}</textarea>
<style style="visibility:hidden">
textarea.sample {
font: var(--monospace-font);
font-size: 12px;
width: 100%;
padding: 5px;
padding-bottom: 1em;
border: 2px solid #3b5fc0;
background: #F6F9FF;
border-radius: 5px;
margin-bottom: 2em;
resize: none;
}
.copy form {
position: absolute;
right: -8px;
top: 4px;
width: initial;
}
`
function rows(code) {
const lines = code.trim().split("\n").length;
return Math.max(Math.min(lines, 15), 2);
}
suggest = (question) => render(serveQuestion(question))
import {sheet} from "@observablehq/survey-data"
survey = ({ histogram, pie, freeResponse: FreeResponse })
import {surveyHistogram as histogram} from "@observablehq/survey-histogram"
import {surveyPieChart as pie} from "@observablehq/survey-pie-chart"
import {FreeResponse} from "@observablehq/survey-free-response-component"
import {questionSelector} from "@observablehq/survey-question-selector"
import {Copier} from "@mbostock/pbcopy"
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.
