Published
Edited
Jun 7, 2021
7 stars
Loading D3 library
Loading Lodash library
Loading the Apache Arrow library
For more information see
An Apache Arrow introductionhttps://observablehq.com/@theneuralbit/introduction-to-apache-arrow
Manipulating Flat Arrays Arrow Stylehttps://observablehq.com/@lmeyerov/manipulating-flat-arrays-arrow-style
Rich data types in Apache Arrowhttps://observablehq.com/@lmeyerov/rich-data-types-in-apache-arrow-js-efficient-data-tables-wit
Loading the Danfo library
More information on the Danfo library can be found herehttps://observablehq.com/@visnup/hello-danfo-js
dfd = require('danfojs@0.0.15/dist/index.min.js').catch(() => {
window.dfd.Series.prototype.print = window.dfd.DataFrame.prototype.print = function() { return print(this) };
return window.dfd;
})
function print(df) {
const {col_types, series, columns, index, values} = df;
const table = html`
<div style="overflow: auto; max-height: 300px;">
<table class="df-table">
<thead>
<tr>
<th></th>
${series
? html`<th class="${col_types[0]}">${columns}</th>`
: columns.map((name, i) => html`<th class="${col_types[i]}">${name}</th>`)}
</tr>
</thead>
<tbody>
${values.map((row, i) => html`
<tr>
<th>${index[i]}</th>
${series
? html`<td class="${col_types[0]}">${row}</td>`
: row.map((v, j) => html`<td class="${col_types[j]}">${v}</td>`)}
</tr>
`)}
</tbody>
</table>
</div>
<style>
table.df-table { white-space: pre; }
table.df-table th, td { padding: 2px 5px; font-variant-numeric: tabular-nums; }
table.df-table .float32, .int32 { text-align: right; }
</style>
`;
table.value = df;
return table;
}
function div(fn) {
const d = html`<div>`;
fn(d);
return d;
}
df = dfd.read_csv("https://cdn.rawgit.com/vlandham/js_data/master/data/cities.csv")
df.shape
column_names = string2Array(column_names_as_string)
// Function to render a table
render_data_table = options => html`<table>
<thead>
<tr>${Object.keys(options[0]).map((d, i) => {
let label = d;
return `<th>${label}</th>`;
})}
</tr>
<thead>
<tbody>
${options.map(row => {
return html`<tr>${Object.values(row).map(col => {
return `<td>${col}</td>`;
})}</tr>`;
})}
</tbody>
</table>
`
ranks = Array.from(rows, r => r.querySelector("td:nth-child(1)").textContent.trim())
// Rank Name Industry Revenue
// (USD millions) Revenue growth Employees Headquarters
company_names = Array.from(rows, r => r.querySelector("td:nth-child(2)").textContent.trim())
industries = Array.from(rows, r => r.querySelector("td:nth-child(3)").textContent.trim())
revenues = Array.from(rows, r => +r.querySelector("td:nth-child(4)").textContent.trim().replace(/,/g, ""))
revenue_growth = Array.from(rows, r => r.querySelector("td:nth-child(5)").textContent.trim())
employees = Array.from(rows, r => +r.querySelector("td:nth-child(6)").textContent.trim().replace(/,/g, ""))
headquarters = Array.from(rows, r => r.querySelector("td:nth-child(7)").textContent.trim())
data_without_header = d3.zip(ranks, company_names, industries, revenues, revenue_growth, employees, headquarters)
data_without_header
headers = new Array()
headers[0] = column_names
final_data = _.merge(headers, data_without_header)
// Display a table showing a subset of the data
render_data_table(final_data)
brands = [
{
id: 1,
name: "SuperKitchen"
},
{
id: 2,
name: "HomeSweetHome"
}
]
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;
}
md`Because above defined function creates an index for the \`lookupTable\` (in our case \`brands\`) in the first iteration, it runs fast. Also, via a callback, it allows us to directly define which keys (or "attributes") we want to retain in the resulting, joined array (\`output\`). It is used like so:
`
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
}))
md `### Add toghether rows from different data sets
The next common operation is the concatenation or merging of datasets.
#### d3.merge
We can simply use the Promises implementation of D3 followed by the d3.merge function:`
bigData_1 = 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 = [
{
id: 1,
name: "SuperKitchen"
},
{
id: 2,
name: "HomeSweetHome"
}
]
dataset_2 = [
{
zip: 18793873,
lastname: "Logean"
},
{
zip: 2893973,
lastname: "Rion"
}
]
bigData_2 = _.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.
