this_obs_url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRKr_1kDne212LSVpRLgMAvQQtqItsktEXn-dgBDvCnjXCcoK_Uv4uHlIoZQ-5H_Wl9g-YBKO8cAhTO/pubhtml?gid=1310204758&single=true";
my_published_url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTKaJhOOz3s68GLrFVY0bVmszwSvVsgIZ_EB0QkZN4s37FQyJAJ9FEi4heoha6Hz8pppAJ9KL-iEx9e/pubhtml?gid=618962527&single=true";
my_publishedtsv_url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTKaJhOOz3s68GLrFVY0bVmszwSvVsgIZ_EB0QkZN4s37FQyJAJ9FEi4heoha6Hz8pppAJ9KL-iEx9e/pub?gid=618962527&single=true&output=tsv"
md`---
## Step 3: test the publish link
If the right-hand dropdown menu doesn't already read "Web page", change it to that and then copy the link and open it in a new tab. **Check to make sure you're not exposing any private data to the web.** If you are, you can always unpublish. Better to do this before you've exposed the data to anyone else though!
[Here's a link](https://docs.google.com/spreadsheets/d/e/2PACX-1vRKr_1kDne212LSVpRLgMAvQQtqItsktEXn-dgBDvCnjXCcoK_Uv4uHlIoZQ-5H_Wl9g-YBKO8cAhTO/pubhtml?gid=1310204758&single=true) to the example spreadsheet I've been showing, and here it is embedded using the "Embed" code:
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTKaJhOOz3s68GLrFVY0bVmszwSvVsgIZ_EB0QkZN4s37FQyJAJ9FEi4heoha6Hz8pppAJ9KL-iEx9e/pubhtml?gid=618962527&single=true" width=350 height=250></iframe>
None of the secret columns appear, whew!
`
google_sheet_url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRKr_1kDne212LSVpRLgMAvQQtqItsktEXn-dgBDvCnjXCcoK_Uv4uHlIoZQ-5H_Wl9g-YBKO8cAhTO/pub?gid=1310204758&single=true&output=tsv'
url = google_sheet_url
names = { // this is a JS Array of Objects; the key-value pairs consist of the column headers and the cell data
let names =[];
const spreadsheet = await d3.tsv(url).then(data => data.forEach(d => names.push(d))); // d3.tsv returns a Promise
return names;
}
countries = { // this is a JS Array of Objects; the key-value pairs consist of the column headers and the cell data
let names =[];
const spreadsheet = await d3.tsv(my_publishedtsv_url ).then(data => data.forEach(d => names.push(d))); // d3.tsv returns a Promise
return names;
}
{
const randomMember = () => names[Math.floor(Math.random()*names.length)]['First name'];
const theTime = () => new Date().toLocaleString().replace(",","").replace(/:.. /," ");
const output = () => md`${randomMember()} is the member of the minute! (${theTime()})`;
yield output();
while (true) yield Promises.delay(60000, output());
}
{
function toDate (str) {
const s = str.split('/');
return new Date(s[2] /* year */, s[0]-1 /* month */, s[1]-1 /* day */);
}
const tosort = Array.from(names);
tosort.sort((a,b) => {
const datea = toDate(a['Join date']);
const dateb = toDate(b['Join date']);
let comparison = 0;
if (!isNaN(datea) && !isNaN(dateb)) comparison = dateb - datea;
else if (isNaN(datea)) comparison = -1;
else if (isNaN(dateb)) comparison = 1;
return comparison;
} );
return md`Here's a list of our club members from newest to oldest: <br><br>${tosort.map(
d => `${d['First name']} from ${d['State']} (joined ${d['Join date']})`).join(',<br>')}`;
}
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.