icons = ({
China: {
"Military Budget (US$ bn)": 230,
"Active Duty Forces": 2035000,
Submarines: 71,
"Principal Surface Combantants": 139,
"Fighter Jets": 1900,
"Bomber/Attack Aircraft": 450,
"Artillery Pieces": 9800
},
Taiwan: {
"Military Budget (US$ bn)": 19,
"Active Duty Forces": 170000,
Submarines: 2,
"Principal Surface Combantants": 57,
"Fighter Jets": 300,
"Bomber/Attack Aircraft": 0,
"Artillery Pieces": 1200
}
})
import { listInput } from "@harrislapiroff/list-input"
cfrColors[6]
new Grid({
symbol: await personPath.text(),
graphicHeight: 200,
format: d3.format(","),
graphicWidth: 200,
graphicTitle: "",
graphicSubtitle: "",
symbolWidth: 35,
symbolHeight: 30,
totalValue: icons.China["Active Duty Forces"],
symbolperLine: 5,
symbolRatio: 170000 / 2,
fillColor: cfrColors[5],
backgroundColor: "white",
borderColor: "white",
legendShow: true
}).render
new Grid({
symbol: await bomber.text(),
graphicHeight: 200,
format: d3.format(","),
graphicWidth: 250,
graphicTitle: "",
graphicSubtitle: "",
symbolWidth: 50,
symbolHeight: 50,
totalValue: 57,
symbolperLine: 5,
symbolRatio: 10,
fillColor: "red",
backgroundColor: "white",
borderColor: "white",
legendShow: true
}).render
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
personPath = FileAttachment("person-01.svg")
bomber = FileAttachment("bomber2a@4.svg")
bomber.image()
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.
