Learn JS DataGetting Started (Learn JS Data)Reading in Data (Learn JS Data)Summarizing Data (Learn JS Data)Iterating Over and Reducing Data (Learn JS Data)Grouping Data (Learn JS Data)Working with Strings (Learn JS Data)Regular Expressions (Learn JS Data)Working with Time (Learn JS Data)Checking Data Assumptions (Learn JS Data)
Combining Data (Learn JS Data)
articles = [
{
id: 1,
name: "vacuum cleaner",
weight: 9.9,
price: 89.9,
brand_id: 2
},
{
id: 2,
name: "washing machine",
weight: 540,
price: 230,
brand_id: 1
},
{
id: 3,
name: "hair dryer",
weight: 1.2,
price: 24.99,
brand_id: 2
},
{
id: 4,
name: "super fast laptop",
weight: 400,
price: 899.9,
brand_id: 3
}
]
brands = [
{
id: 1,
name: "SuperKitchen"
},
{
id: 2,
name: "HomeSweetHome"
}
]
{
let joinedArticles = articles.map(d => ({ ...d })); // clone articles, otherwise observable will reuse the variable
for (let article of joinedArticles) {
const brandFound = brands.filter(brand => brand.id === article.brand_id)[0];
//filter returns an array, we take the first element
delete article.brand_id;
article.brand = brandFound !== undefined ? brandFound.name : null;
}
return joinedArticles;
}
function join(lookupTable, mainTable, lookupKey, mainKey, select) {
const l = lookupTable.length,
m = mainTable.length,
output = [],
// create an index for lookup table
lookupIndex = new Map(lookupTable.map(d => [d[lookupKey], d]));
return mainTable.map(d => select(d, lookupIndex.get(d[mainKey])));
return output;
}
join(brands, articles, "id", "brand_id", (article, brand) => ({
id: article.id,
name: article.name,
weight: article.weight,
price: article.price,
brand: brand !== undefined ? brand.name : null
}))
Promise.all([
d3.csv("https://cdn.rawgit.com/vlandham/js_data/master/data/big_data_1.csv"),
d3.csv("https://cdn.rawgit.com/vlandham/js_data/master/data/big_data_2.csv"),
d3.csv("https://cdn.rawgit.com/vlandham/js_data/master/data/big_data_3.csv")
]).then(big_datas => d3.merge(big_datas))
dataset_1 = [
{
type: 'boat',
model: 'Ocean Queen 2000'
},
{
type: 'car',
model: 'Ferrari'
}
]
dataset_2 = [
{
price: 23202020,
weight: 5656.9
},
{
price: 59988,
weight: 1.9
}
]
dataset_1.map((d, i) => ({ ...d, ...dataset_2[i] }))
// somewhat equivalent to loadash _.merge(dataset_1, dataset_2)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
