Published unlisted
Edited
May 31, 2021
md`# Final`
data = aq
.fromCSV(await FileAttachment('wa.transform.csv').text())
data2 = aq
.fromCSV(await FileAttachment('wa.transform2@2.csv').text())
data3 = aq
.fromCSV(await FileAttachment('wa.transform3@1.csv').text())
import {vl} from '@vega/vega-lite-api-v5'
import {aq, op} from '@uwdata/arquero'
import {printTable} from '@uwdata/data-utilities'
printTable(data)
vl.layer(
vl.markLine()
.encode(
vl.x().fieldT('Date'),
vl.y().fieldQ('Number of Trips'),
vl.color().fieldO("Miles")
),
)
.data(data)
.title("Pump Price for Gasoline vs Urban Population Percentage")
.render()
plot = {
// select a point for which to provide details-on-demand
const hover = vl.selectPoint('hover')
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor
const order = [
'< 1',
'1-3',
'3-5',
'5-10',
'10-25',
'25-50',
'50-100',
'100-250',
'250-500',
'>= 500'
];
// predicate to test if a point is hover-selected
// return false if the selection is empty
const isHovered = hover.empty(false);
// define our base line chart of stock prices
const line = vl.markLine().encode(
vl.x().fieldT('Date'),
vl.y().fieldQ('Number of Trips'),
vl.color().fieldO('Miles').sort(order)
);
// shared base for new layers, filtered to hover selection
const base = line.transform(vl.filter(isHovered));
// mark properties for text label layers
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
return vl.data(data)
.layer(
line,
// add a rule mark to serve as a guide line
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('Date')),
// add circle marks for selected time points, hide unselected points
line.markCircle()
.params(hover) // use as anchor points for selection
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
// add white stroked text to provide a legible background for labels
base.markText(label, white).encode(vl.text().fieldQ('Number of Trips')),
// add text labels for stock prices
base.markText(label).encode(vl.text().fieldQ('Number of Trips'))
)
.width(700)
.height(400)
.render();
}
plot2 = {
// select a point for which to provide details-on-demand
const hover = vl.selectPoint('hover')
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor
const order = [
'< 5',
'5-25',
'25-50',
'50-100',
'>= 100'
];
// predicate to test if a point is hover-selected
// return false if the selection is empty
const isHovered = hover.empty(false);
// define our base line chart
const line = vl.markLine().encode(
vl.x().fieldT('Date'),
vl.y().fieldQ('Number of Trips'),
vl.color().fieldO('Miles').sort(order)
);
// shared base for new layers, filtered to hover selection
const base = line.transform(vl.filter(isHovered));
// mark properties for text label layers
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
return vl.data(data2)
.layer(
line,
// add a rule mark to serve as a guide line
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('Date')),
// add circle marks for selected time points, hide unselected points
line.markCircle()
.params(hover) // use as anchor points for selection
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
// add white stroked text to provide a legible background for labels
base.markText(label, white).encode(vl.text().fieldT('Date')),
// add text labels for stock prices
base.markText(label).encode(vl.text().fieldT('Date'))
)
.title('How far does people travel during COVID')
.width(700)
.height(400)
.render();
}
all = {
// select a point for which to provide details-on-demand
const hover = vl.selectPoint('hover')
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor
const order = [
'< 10',
'10-100',
'>= 100'
];
// predicate to test if a point is hover-selected
// return false if the selection is empty
const isHovered = hover.empty(false);
// define our base line chart
const line = vl.markLine().encode(
vl.x().fieldT('Date'),
vl.y().fieldQ('Number of Trips'),
vl.color().fieldN('Miles').sort(order)
);
// shared base for new layers, filtered to hover selection
const base = line.transform(vl.filter(isHovered));
// mark properties for text label layers
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
const black = {stroke: 'black', strokeWidth: 0.5};
return vl.data(data3)
.layer(
line,
// add a rule mark to serve as a guide line
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('Date')),
// add circle marks for selected time points, hide unselected points
line.markCircle()
.params(hover) // use as anchor points for selection
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
// add white stroked text to provide a legible background for labels
// add text labels for stock prices
base.markText(label, black).encode(vl.text().fieldQ('Number of Trips'))
)
.transform(vl.filter('datum["Miles"] == "< 10" || datum["Miles"] == "10-100" || datum["Miles"] == ">= 100"'))
.title('How far does people travel during COVID')
.width(700)
.height(400)
.render();
}
short = {
// select a point for which to provide details-on-demand
const hover = vl.selectPoint('hover')
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor
const order = [
'< 1',
'1-3',
'3-5',
'5-10'
];
// predicate to test if a point is hover-selected
// return false if the selection is empty
const isHovered = hover.empty(false);
// define our base line chart
const line = vl.markLine().encode(
vl.x().fieldT('Date'),
vl.y().fieldQ('Number of Trips'),
vl.color().fieldN('Miles').sort(order)
);
// shared base for new layers, filtered to hover selection
const base = line.transform(vl.filter(isHovered));
// mark properties for text label layers
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
const black = {stroke: 'black', strokeWidth: 0.5};
return vl.data(data)
.layer(
line,
// add a rule mark to serve as a guide line
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('Date')),
// add circle marks for selected time points, hide unselected points
line.markCircle()
.params(hover) // use as anchor points for selection
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
// add white stroked text to provide a legible background for labels
base.markText(label, white).encode(vl.text().fieldQ('Number of Trips')),
// add text labels for stock prices
base.markText(label, black).encode(vl.text().fieldQ('Number of Trips'))
)
.transform(vl.filter('datum["Miles"] == "< 1" || datum["Miles"] == "1-3" || datum["Miles"] == "3-5" || datum["Miles"] == "5-10"'))
.title('How often does people travel in short distance during COVID')
.width(700)
.height(400)
.render();
}
medium = {
// select a point for which to provide details-on-demand
const hover = vl.selectPoint('hover')
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor
const order = [
'10-25',
'25-50',
'50-100'
];
// predicate to test if a point is hover-selected
// return false if the selection is empty
const isHovered = hover.empty(false);
// define our base line chart
const line = vl.markLine().encode(
vl.x().fieldT('Date'),
vl.y().fieldQ('Number of Trips'),
vl.color().fieldN('Miles').sort(order)
);
// shared base for new layers, filtered to hover selection
const base = line.transform(vl.filter(isHovered));
// mark properties for text label layers
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
const black = {stroke: 'black', strokeWidth: 0.5};
return vl.data(data)
.layer(
line,
// add a rule mark to serve as a guide line
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('Date')),
// add circle marks for selected time points, hide unselected points
line.markCircle()
.params(hover) // use as anchor points for selection
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
// add white stroked text to provide a legible background for labels
base.markText(label, white).encode(vl.text().fieldQ('Number of Trips')),
// add text labels for stock prices
base.markText(label, black).encode(vl.text().fieldQ('Number of Trips'))
)
.transform(vl.filter('datum["Miles"] == "10-25" || datum["Miles"] == "25-50" || datum["Miles"] == "50-100"'))
.title('How often does people travel in medium distance during COVID')
.width(700)
.height(400)
.render();
}
long = {
// select a point for which to provide details-on-demand
const hover = vl.selectPoint('hover')
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor
const order = [
'100-250',
'250-500',
'>= 500'
];
// predicate to test if a point is hover-selected
// return false if the selection is empty
const isHovered = hover.empty(false);
// define our base line chart
const line = vl.markLine().encode(
vl.x().fieldT('Date'),
vl.y().fieldQ('Number of Trips'),
vl.color().fieldN('Miles').sort(order)
);
// shared base for new layers, filtered to hover selection
const base = line.transform(vl.filter(isHovered));
// mark properties for text label layers
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
const black = {stroke: 'black', strokeWidth: 0.5};
return vl.data(data)
.layer(
line,
// add a rule mark to serve as a guide line
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('Date')),
// add circle marks for selected time points, hide unselected points
line.markCircle()
.params(hover) // use as anchor points for selection
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
// add white stroked text to provide a legible background for labels
base.markText(label, white).encode(vl.text().fieldQ('Number of Trips')),
// add text labels for stock prices
base.markText(label, black).encode(vl.text().fieldQ('Number of Trips'))
)
.transform(vl.filter('datum["Miles"] == "100-250" || datum["Miles"] == "250-500" || datum["Miles"] == ">= 500"'))
.title('How often does people travel in long distance during COVID')
.width(700)
.height(400)
.render();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.