I’m a graphic designer and data visualiser. Colours, patterns, and data get my pulse racing!
Public
Edited
Apr 24, 2023
Plot.plot({
//layout
margin: 80,
inset: 80,
width: 640,
height: 400,
//Visual Encoding (specifying which visual channels you are using and relating each visual channel to a property)
//mark configuration
marks: [
Plot.dot(data, {x: "", y: "", sort: {x: "y"}}), //if x ordinal. when visualising property-x on xScale, sort data bar hasb e property-y for sorting data
Plot.line(data, {x: "", y: "", stroke: ""}),
Plot.cell(data, {x: "", y: "", fill: ""}),
Plot.link(data, {x1: 1, x2: 2, y1: "", y2: "", strokeWidth: ""}),
Plot.vector(data, {x: "", y: "", rotate: "", length: ""})
],
//scale configurations & their label, tick, legend, ...
x: {
type: "band",
domain: [],
ticks: 5,
tickFormat: (d,i) => `Category ${i}: ${d.toLowerCase}`,
label: "xAxis",
labelAnchor: "left",
labelOffset: 10,
nice: true,
tickPadding: 20,
tickRotate: 0,
tickSize: 25,
axis: "top",
inset: 20,
line: true,
percent: true,
reverse: true,
grid: true,
legend: true,
},
y: {
type: "linear",
domain: [],
ticks: 5,
tickFormat: ",.2s", //symbol comma precision type
label: "yAxis",
labelAnchor: "top",
labelOffset: 10,
nice: true,
tickPadding: 20,
tickRotate: 0,
tickSize: 25,
axis: "left",
inset: 20,
line: true,
percent: true,
reverse: true,
grid: true,
legend: true,
},
color: {
type: "linear",
scheme: "pubugn",
legend: true
},
//Faceting & its configuration
facet: {
data: data,
x: "", //by "property" in the x direction
y: "", //by "property" in the y direction
margin: 5,
},
fx: {
inset: 25,
labelOffset: 20,
padding: 0.1,
grid: true,
label: ""
},
fy: {
inset: 25,
labelOffset: 20,
padding: 0.15
},
//caption
caption: "This is my first dataViz using Observable Plot. [12 MArch 2023]",
//CSS style
style: {
background: "smokeWhite",
fontSize: 25,
fontFamily: "Hatch",
color: "navy",
padding: "5px"
}
})
Plot.legend({
width: 320,
color: {
type: "linear",
range: ["red", "blue"],
interpolate: d3.interpolateRgb.gamma(2.2),
legend: true
}
})
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.
