Published
Edited
Jan 24, 2022
8 forks
Importers
22 stars
Insert cell
Insert cell
Insert cell
viewof color = Inputs.select(x11colors, {value: "steelblue", label: "Favorite color"})
Insert cell
color
Insert cell
html`<div style="background: ${color}; width: 25px; height: 25px;">`
Insert cell
Insert cell
viewof colors = Inputs.select(x11colors, {multiple: true, label: "Favorite colors"})
Insert cell
colors
Insert cell
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}`)}`
Insert cell
Insert cell
viewof fewerColors = Inputs.select(x11colors, {multiple: 4, label: "Favorite colors"})
Insert cell
Insert cell
viewof maybeColor = Inputs.select([null].concat(x11colors), {label: "Favorite color"})
Insert cell
maybeColor
Insert cell
Insert cell
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"},
]
Insert cell
viewof favorite = Inputs.select(teams, {label: "Favorite team", format: x => x.name, value: teams.find(t => t.name === "Warriors")})
Insert cell
favorite
Insert cell
Insert cell
viewof size = Inputs.select(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), {value: 12, label: "Size"})
Insert cell
size
Insert cell
Insert cell
viewof size2 = Inputs.select(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), {value: 12, label: "Size", format: ([name, value]) => `${name} (${value} oz)`})
Insert cell
size2
Insert cell
Insert cell
athletes = FileAttachment("athletes.csv").csv({typed: true})
Insert cell
viewof sportAthletes = Inputs.select(d3.group(athletes, d => d.sport), {label: "Sport"})
Insert cell
sportAthletes
Insert cell
Insert cell
viewof sport = Inputs.select(athletes.map(d => d.sport), {label: "Sport", sort: true, unique: true})
Insert cell
sport
Insert cell
Insert cell
viewof d = Inputs.select(["A", "E", "I", "O", "U", "Y"], {label: "Vowel", disabled: true})
Insert cell
viewof e = Inputs.select(["A", "E", "I", "O", "U", "Y"], {label: "Vowel", disabled: ["Y"]})
Insert cell
Insert cell
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"]
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more