The end-to-end solution for building and hosting better data apps, dashboards, and reports.
viewof color = Inputs.select(x11colors, {value: "steelblue", label: "Favorite color"})
color
html`<div style="background: ${color}; width: 25px; height: 25px;">`
viewof colors = Inputs.select(x11colors, {multiple: true, label: "Favorite colors"})
colors
html`<div style="display: flex; flex-wrap: wrap; font: 13px/1 var(--sans-serif);">${colors.map(color => html`<div style="background: ${color}; padding: 0.5em;">${color}`)}`
viewof fewerColors = Inputs.select(x11colors, {multiple: 4, label: "Favorite colors"})
viewof maybeColor = Inputs.select([null].concat(x11colors), {label: "Favorite color"})
maybeColor
teams = [
{name: "Lakers", location: "Los Angeles, California"},
{name: "Warriors", location: "San Francisco, California"},
{name: "Celtics", location: "Boston, Massachusetts"},
{name: "Nets", location: "New York City, New York"},
{name: "Raptors", location: "Toronto, Ontario"},
]
viewof favorite = Inputs.select(teams, {label: "Favorite team", format: x => x.name, value: teams.find(t => t.name === "Warriors")})
favorite
viewof size = Inputs.select(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), {value: 12, label: "Size"})
size
viewof size2 = Inputs.select(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), {value: 12, label: "Size", format: ([name, value]) => `${name} (${value} oz)`})
size2
athletes = FileAttachment("athletes.csv").csv({typed: true})
viewof sportAthletes = Inputs.select(d3.group(athletes, d => d.sport), {label: "Sport"})
sportAthletes
viewof sport = Inputs.select(athletes.map(d => d.sport), {label: "Sport", sort: true, unique: true})
sport
viewof d = Inputs.select(["A", "E", "I", "O", "U", "Y"], {label: "Vowel", disabled: true})
viewof e = Inputs.select(["A", "E", "I", "O", "U", "Y"], {label: "Vowel", disabled: ["Y"]})
x11colors = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"]
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.
