The socially conscious
data visualization firm. We turn data into
interactive visual experiences for empathy and understanding.
Public
Edited
Nov 3, 2023
Paused
4 forks
Importers
21 stars
Also listed in…
Pull in Data
response = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/penguins.json")
dataJson = (await response).json()
repoPenguins = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/penguins.json")
.then(response => response.json())
files = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/")
.then(response => response.json())
json = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/aapl.json")
.then(response => response.json())
csv = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/aapl.csv")
.then(res => res.text())
.then(text => d3.csvParse(text, d3.autoType))
db = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/chinook.db")
.then(SQLiteDatabaseClient.open)
db.describe("tracks")
arrowTable = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/flights-200k.arrow")
.then(res => res.arrayBuffer())
.then(buffer => Arrow.Table.from(new Uint8Array(buffer)))
aqArrow = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/flights-200k.arrow")
.then(res => res.arrayBuffer())
.then(buffer => Arrow.Table.from(new Uint8Array(buffer)))
.then(arrowTable => aq.fromArrow(arrowTable))
duckDb = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/flights-200k.arrow")
.then(res => res.arrayBuffer())
.then(buffer => Arrow.Table.from(new Uint8Array(buffer)))
.then(arrowTable => DuckDBClient.of({demo: aq.fromArrow(arrowTable).objects()}))
xlsx = require("xlsx@0.17.0/dist/xlsx.core.min.js")
workbook = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/Data%20Analyst%20Excel%20Meetup.xlsx")
.then(res => res.arrayBuffer())
.then(buffer => xlsx.read(new Uint8Array(buffer), { type: "array" }))
// example function to parse sheet from workbook object
// adapted from Fetch an Excel sheet by @neocarto
// - https://observablehq.com/@neocartocnrs/fetch-an-excel-sheet
function parseSheet(workbook, sheetname) {
let sheet = workbook.Sheets[sheetname];
// get the data
let range = xlsx.utils.decode_range(sheet["!ref"]);
range.s.r = 0; // skip rows
range.s.c = 0; // skip cols
sheet["!ref"] = xlsx.utils.encode_range(range);
return xlsx.utils.sheet_to_json(sheet);
}
excel = parseSheet(workbook, "StreetEasy Data")
image = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/simon-lee-KDFUR-sG2Ls-unsplash.jpeg")
.then(res => res.blob())
<img src=${URL.createObjectURL(image)}>
bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/secretPenguins.json")
.then(res => res.json())
bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/8218285f144755a96b5e08c4adc965427308f885/secretPenguins.json")
.then(res => res.json())
recentCommits = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/commits/")
.then(res => res.json())
Inputs.table(recentCommits.values, {
columns: ["date", "message", "hash"]
})
allInOne = {
let res = bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/")
return (await res).json()
}
resRefresh = { // source cell
refreshButton2
return bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/")
}
{ // wrangling cell
refreshButton1
return resRefresh.json()
}
bb("https://bitbucket.org/periscopic/bitbucket-api-demo/src/master/", {debug: true})
async function bb(
link // chosen link in bitbucket repo
, {
endpoint = "repositories", // endpoint string
username = credentials[0].username, // Bitbucket username
password = credentials[0].password, // Bitbucket App Password, see https://bitbucket.org/account/settings/app-passwords/
debug = false // if true, return API url
} = {}) {
// main url endpoint for API, see https://developer.atlassian.com/cloud/bitbucket/rest/intro/
const URL_PREFIX = 'https://api.bitbucket.org/2.0'
// parse data link: url → path
if (link == undefined) { return "Include Bitbucket Link (Docs: https://observablehq.com/@periscopic/bitbucket-api-in-observable)"}
const rawLink = String(link)
let urlLink = rawLink
if (urlLink.startsWith("https://bitbucket.org/")) { urlLink = urlLink.split('/').slice(3).join("/") }
if (!urlLink.startsWith("/") & urlLink !== "") { urlLink = '/' + urlLink }
// parse the endpoint
const rawEndpoint = String(endpoint)
let urlEndpoint = rawEndpoint
if (!urlEndpoint.startsWith("/")) { urlEndpoint = '/' + urlEndpoint }
// make full link to ping api
const fetchQuery = `${URL_PREFIX}${urlEndpoint}${urlLink}`
if (debug) { return fetchQuery }
// create header for authentication
const headers = (username !== null & password !== null)
? {Authorization: 'Basic ' + base64.encode(username + ':' + password)}
: {}
// get response, use username/password if provided
const response = await fetch(fetchQuery, {
headers: headers
})
return response
}
// pack up Observable Secrets, or return empty
credentials = {
try {
let username = Secret("BB_API_USERNAME")
let password = Secret("BB_API_PASSWORD")
return [{username, password}]
} catch (error) {
return [{username: null, password: null}]
}
}
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.