Public
Edited
Apr 14, 2023
Insert cell
Insert cell
Insert cell
file.name
Insert cell
Plot.plot({
width: 1000,
height: 2000,
marginLeft: 300,
opacity: {
legend: true,
label: 'CPA ($)'
},
marks: [
Plot.barX(clean.objects(), {
x: 'spend',
y: 'Campaign',
sort: {y: 'x', reverse: true},
fill: d => d.craigslist == true ? 'purple' : 'currentColor',
opacity: d => d.cpa,
//fx: 'craigslist'
}),
Plot.axisX({anchor: 'top'}),
Plot.axisY({facet: true})
]
})
Insert cell
clean.get('cpa', 1)
Insert cell
Insert cell
Insert cell
Insert cell
viewof clean = aq.from(raw_data)
.derive({
spend: d => +op.replace(d.Actual, ',',''),
craigslist: d => op.includes(d.lower(d.Campaign), 'craigs') === true ? true : false
})
.derive({
cpa: d => d.spend / d.Activations
})
.view()
Insert cell
raw_data = file.csv({typed: true})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// this is a really cool way of displaying tables. Much more aesthetically pleasing than the defaults of arquero and input.table

import { formatTable } from "@saneef/pretty-tables"
Insert cell
Insert cell
import {toc} from "@nebrius/indented-toc"
Insert cell
Insert cell
date_parser = d3.utcParse('%m/%d/%Y')
Insert cell
Insert cell
Insert cell
Plot.cell(appcast_color_palette, {x: d => d, fill: d => d}).plot()
Insert cell
Insert cell
// sample of how to place html blocks in a grid

// html `<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 0px; row-gap: 5px;">
// ${viewof spend}
// ${viewof cpl}
// ${viewof cpc}
// </div>`
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