The avatar for @rlluo1
rlluo1
Published
Class_materials_11.454
Edited
Mar 13, 2019
Class_materials_11.454
Bio Data AnalysisWeek 12 - Interaction and Animation: D3 Transitions, Behaviors, and BrushingWeek 11 - Intro to D3.js: Mapping Data with D3Week 10b - Intro to D3.js: Making a ChartWeek 10 - Intro to D3.js: Making a ChartParsing API Responses
Week 5a - Web APIs
Week 3a - Data ManagementWeek 3 - Data Management with ZebrasWeek 2b - Advanced JavascriptWeek 2a - Introduction to Javascript Part2Week 1b - Introduction to JavascriptWeek 1a - Introduction to HTML and Javascript - Rachel's notes
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
resolveAfter2Seconds = function(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x)
}, 2000)
})
}
Insert cell
f1 = async function(number) {
var x = await resolveAfter2Seconds(number);
console.log(x)
return x
}
Insert cell
f1(5)
Insert cell
Insert cell
Insert cell
Insert cell
vegalite = require("@observablehq/vega-lite@0.1")
Insert cell
z = require('https://bundle.run/zebras@0.0.11')
Insert cell
Insert cell
// Load a file locally
viewof text = html`<input type=file * ">`
Insert cell
tweetsStrings = Files.text(text)
Insert cell
tweetsDF = Object.values(JSON.parse(tweetsStrings))
Insert cell
Insert cell
count = {
let countArray = []
let groupedLocations = z.groupBy(x => x.location, tweetsDF)
for (const key of Object.keys(groupedLocations)) {
countArray.push({location: key, count: groupedLocations[key].length})
}
return countArray
}
Insert cell
Insert cell
countSorted = z.sortByCol('count', 'des', count)
Insert cell
vegalite({
data: {values: countSorted.slice(0,40)},
mark: "bar",
encoding: {
x: {field: "location", type: "nominal", sort:'*'},
y: {field: "count", type: "quantitative"},
color: {"field": "location", "type": "nominal"}
}
})
Insert cell
Insert cell
notNull = z.filter(r => r.lat != null, tweetsDF)
Insert cell
vegalite({
data: {values: notNull},
mark: "point",
encoding: {
x: {field: "lon", type: "quantitative"},
y: {field: "lat", type: "quantitative"}
}
})
Insert cell
Insert cell
// Loop through all the locations, and see if they are similar to Boston, then create a new column
newTweets = {
let newLocations = []
let locations = z.getCol("location", tweetsDF)
for (let id in locations) {
if (locations[id].toLowerCase().includes('boston')){
newLocations.push('Boston, MA')
} else {
newLocations.push(locations[id])
}
}
return z.addCol("cleanLocations", newLocations, tweetsDF)
}
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