The avatar for @arkoblog
Arogya Koirala
Tech + Innovation | @KathmanduLivingLabs
Published
Edited
May 5, 2021
1 star
1
Insert cell
Insert cell
// Final chart
Insert cell
Insert cell
Insert cell
// Change raw data here
Insert cell
Insert cell
// Change parameters here
Insert cell
questionLabel = "QUESTION"
Insert cell
title="Once tourism is revived, how long will it take for your employment status to return to normal?"

Insert cell
nWords=10
Insert cell
sort = true
Insert cell
subtitle=""
Insert cell
footerText = "n="+sum+"; Kathmandu Living Labs/C2M2 Kathmandu - Tourism Workforce Survey, April 2021"
Insert cell
labelVar = "label_en"
Insert cell
selectedFont="Roboto";

Insert cell
selectedColor="#A30B37"
Insert cell
textColor="rgba(20,20,20,0.8)"
Insert cell
barHeight = 120


Insert cell
margin = ({top: 15, right: 15, bottom: 15, left: 15})
Insert cell
showPercentages = true
Insert cell
appendCountsToPercentages = false
Insert cell
decimalPoints = 0

Insert cell
dimensionLabel="Gender="
Insert cell
// Add notes here
Insert cell
md`Some todos for the future:
- Support the logic for multiselect responses
- Switch between percentages and counts
- ~~Sort data automatically~~
- ~~Use counts as input~~
- Auto generate percentages`
Insert cell
// Don't touch anything below, unless you mean to play with the code.
Insert cell
// Objects
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
// Functions
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// data3 = Object.assign(d3.csvParse(await FileAttachment("alphabet.csv").text(), ({letter, frequency}) => ({name: letter, value: +frequency})).sort((a, b) => d3.descending(a.value, b.value)), {format: "%"})
Insert cell
// Imports
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Styles
Insert cell
style = html`
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${selectedFont}:ital@0;1&display=swap;wght:400,700">

<style>
body, svg {
font-family: '${selectedFont}', serif;
// background-color:#f4f6f8;
/* font-size: 48px; */
}
</style>
`
Insert cell

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