Public
Edited
Feb 11, 2024
43 forks
FHV_data = {
const scsv = d3.dsvFormat(",") // Important to define the separator of your CSV file
return scsv.parse(await FileAttachment("FHV_Base_Aggregate_Report_20240205.csv").text())
}
top5_companies = //TO DO
top5_company_dispatches = //TO DO
margin = //TO DO
visWidth = //TO DO
visHeight = //TO DO
//TO DO Scale 1
//TO DO Scale 2
//TO DO Scale 3
{
//TO DO
//create SVG, add any axes, draw any marks, etc
return svg.node();
}
margin2 = //TO DO
width2 = //TO DO
height2 = //TO DO
margin3 = //TO DO
width3 = //TO DO
height3 = //TO DO
//TO DO Scale 1
//TO DO Scale 2
//TO DO Scale 3
function leftVisualization() {
// the value for when there is no brush
const initialValue = //TO DO
//create SVG, add any axes, draw any marks, etc
//create brush
//handle brush events
return svg.node();
}
function rightVisualization() {
//create SVG, add any axes, draw any marks, etc for initial view
//update view based on leftVisualiztion selection
function update(data) {
}
return Object.assign(svg.node(), { update });;
}
{
const vis_left = leftVisualization();
const vis_right = rightVisualization();
// update the visualization on the right when the visualization on the left
// selection changes
d3.select(vis_left).on('input', () => {
vis_right.update(vis_left.value);
});
// intial state of visualization on the right
vis_right.update(vis_left.value);
// use HTML to place the two charts next to each other
return html`<div style="display: flex">${vis_left}${vis_right}</div>`;
}
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.
