The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Nov 1, 2022
5 forks
44 stars
db
db
viewof selectNationality = Inputs.select(nationalities.map(d => d.Nationality), {label: "Select one"})
db
Plot.plot({
marks: [
Plot.barX(artistsByNationality, {x: "num_artworks", y: "DisplayName", sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
],
marginLeft: 150
})
db
d3.group(artistsByNationalities, d => d.Nationality)
viewof selectArtistsByNationality = Inputs.select(d3.group(artistsByNationalities, d => d.Nationality), {label: "Select one"})
selectArtistsByNationality
Plot.plot({
marks: [
Plot.barX(selectArtistsByNationality, {
x: "num_artworks",
y: "DisplayName",
sort: { y: "x", reverse: true, limit: 10 }
}),
Plot.ruleX([0])
],
marginLeft: 150
})
tooltipPlugin(Plot)
Plot.plot({
marks: [
Plot.barX(selectArtistsByNationality, {
x: "num_artworks",
y: "DisplayName",
title: d => `${d.DisplayName} - ${d3.format(',')(d.num_artworks)}`,
sort: { y: "x", reverse: true, limit: 10 }
}),
Plot.ruleX([0])
],
marginLeft: 150
})
db
Plot.plot({
height: 700,
width,
marks: [
Plot.dot(
picassos,
Plot.dodgeY({
x: "DateAcquired",
r: 3,
padding: 0.1,
fill: "Classification",
href: "URL",
target: "_blank"
})
)
],
color: {
legend: true
}
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(mtaData, { x: "Date", y: "Value", stroke: "#000" }),
],
marginLeft: 60
})
nycHurricanes = [
{name: 'Tropical Storm Fay', date: '07/10/2020'},
{name: 'Tropical Storm Isaias', date: '08/04/2020'},
{name: 'Hurricane Laura', date: '08/31/2020'},
{name: 'Hurricane Delta', date: '10/12/2020'},
{name: 'Hurricane Zeta', date: '10/28/2020'},
{name: 'Hurricane Eta', date: '11/13/2020'},
{name: 'Groundhog Day noreaster', date: '02/01/2021'},
{name: 'Hurricane Elsa', date: '07/09/2021'},
{name: 'Tropical Storm Fred', date: '08/18/2021'},
{name: 'Hurricane Henri', date: '08/22/2021'},
{name: 'Hurricane Ida', date: '09/01/2021'},
{name: 'Hurricane Larry', date: '09/06/2021'},
{name: 'Tropical Storm Wanda', date: '10/26/2021'},
].map(d => ({name: d.name, date: parseDate(d.date)}))
USholidays = [
{name: 'Thanksgiving', date: '11/26/2020'},
{name: 'Thanksgiving', date: '11/25/2021'},
{name: 'Halloween', date: '10/31/2021'},
{name: 'Christmas', date: '12/25/2020'},
{name: 'Christmas Eve', date: '12/24/2020'},
{name: 'Christmas', date: '12/25/2021'},
{name: 'Christmas Eve', date: '12/24/2021'},
{name: 'Labor Day', date: '09/06/2021'},
{name: 'Labor Day', date: '09/07/2020'},
{name: 'New Years Eve', date: '12/31/2020'},
{name: 'New Years Day', date: '01/01/2021'},
{name: 'New Years Eve', date: '12/31/2021'},
{name: 'New Years Day', date: '01/01/2022'},
{name: 'MLK Day', date: '01/18/2021'},
{name: 'MLK Day', date: '02/15/2022'},
{name: 'Presidents Day', date: '02/18/2021'},
{name: 'Presidents Day', date: '02/21/2022'},
{name: 'St. Patricks Day', date: '03/17/2021'},
{name: 'St. Patricks Day', date: '03/17/2022'},
{name: 'Memorial Day', date: '05/25/2020'},
{name: 'Memorial Day', date: '05/31/2021'},
{name: 'Memorial Day', date: '05/30/2022'},
{name: 'July 4th', date: '07/04/2020'},
{name: 'July 4th', date: '07/04/2021'},
{name: 'July 4th', date: '07/04/2022'},
].map(d => ({name: d.name, date: parseDate(d.date)}))
bisect = d3.bisector(d => d.Date)
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(mtaData, { x: "Date", y: "Value", stroke: "#ccc" }),
Plot.lineY(seasonallyAdjustedMTA, {
x: "Date",
y: "seasonality",
stroke: "blue"
}),
Plot.dot(nycHurricanes, {
x: "date",
y: d => {
const bisectIndex = bisect.center(
seasonallyAdjustedMTA,
d.date
);
d = seasonallyAdjustedMTA[bisectIndex];
return d['seasonality'];
},
r: 3,
fill: "#E8C655",
stroke: '#000',
strokeWidth: .25,
title: d => `${d3.timeFormat("%Y-%m-%d")(d.date)} ${d.name}`
}),
Plot.dot(USholidays, {
x: "date",
y: d => {
const bisectIndex = bisect.center(
seasonallyAdjustedMTA,
d.date
);
d = seasonallyAdjustedMTA[bisectIndex];
return d['seasonality'];
},
r: 3,
fill: "#BC2E2E",
title: d => `${d3.timeFormat("%Y-%m-%d")(d.date)} ${d.name}`
}),
],
color: {
legend: true,
domain: ["Original Values", `Day of Week Seasonality Adjusted Values`, 'US Holidays', 'NYC Hurricanes'],
range: ["#ccc", "blue", "#BC2E2E", "#E8C655"]
},
marginLeft: 60
})
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.