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 Visualization SuggestionsSurvey Question SelectorSurvey Matrix CompareSurvey Pie ChartSurvey HistogramSurvey DataSurvey Component LibraryGitHub API HelpersDraggable Cash Flow Curve
Survey Free Response Component
question = sheet.questions.what_one_change_would_make_the_data_visualization_aspect_of_your_job_better_
FreeResponse(question)
viewof filter = surveyHistogram(sheet.questions.my_skills_hold_me_back_much_more_than_my_tools_do_, {
domain: [5,4,3,2,1,null]
})
viewof selected = FreeResponse(question, {
subset: filter.selected
})
selected
viewof searched = Inputs.search(question.data, {
columns: [question.question]
})
FreeResponse(question, {
subset: searched
})
surveyHistogram(sheet.questions.my_skills_hold_me_back_much_more_than_my_tools_do_, {
domain: [5,4,3,2,1,null],
subset: searched
})
FreeResponse = (question, {
id,
subset
} = {}) => {
let data = question.data
if(subset && subset.length) {
data = subset
}
let responses = data
.filter(d => !!d[question.question])
let columns = [question.question]
if(id) columns = [id].concat(columns)
let format = {}
// format[question.question] = (r) => html`✍️ <span style="margin-left:10px;"> ${r} </span>`
let tableNode = Inputs.table(responses, { columns, format })
let node = html`<div>${tableNode}</div>`
node.value = data;
tableNode.addEventListener("input", e => {
console.log(e)
node.value = e.currentTarget.value
});
return node
}
rowStyle = ({
marginTop:"10px",
borderBottom: "1px solid rgba(20,20,20,0.1)"
})
headlineStyle = ({
fontStyle: "italic",
lineHeight: "1.3em",
borderTop: "solid 1px rgba(0, 0, 0, 0.1)",
paddingTop: "16px",
paddingBottom: "8px"
})
import {surveyHistogram} from "@observablehq/survey-histogram"
sheet
import {sheet} from "@observablehq/survey-data"
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.
