Public
Edited
Mar 12, 2023
Insert cell
Insert cell
# Search + Table

Using [Inputs.search](https://github.com/observablehq/inputs/blob/main/README.md#search) and [Inputs.table](https://github.com/observablehq/inputs/blob/main/README.md#table). Data from <a href="https://catalog.data.gov/dataset/most-popular-baby-names" target="_blank" title="California Department of Public Health">CDPH</a>.
Insert cell
data = FileAttachment("VitD.csv").csv({typed: true})
Insert cell
Insert cell
Inputs.table(search)
Insert cell
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, {filter: d => d.CountryCode=="GBR" && d.Gender=="Female", x: "Gender", y: "Mean"})
],

//scale configurations & their label, tick, legend, ...
x: {
type: "point",
// domain: [],
label: "Gender",
labelAnchor: "left",
labelOffset: 10,
nice: true,
tickPadding: 20,
// tickRotate: 0,
// tickSize: 25,
axis: "top",
// inset: 20,
line: true,
grid: true,
legend: true,
},
//caption
caption: "This is my first dataViz using Observable Plot. [12 March 2023]",

//CSS style
style: {
background: "lightGrey",
fontFamily: "helvetica",
color: "navy",
padding: "5px"
}
})
Insert cell

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.
Learn more