I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Also listed in…
Try your data
nv = {
data; // This is to force this cell to redraw when data changes. Only for observable
const nv = navio(d3.select(div), height);
nv.y0 = 180;
nv.margin = 30;
nv.attribWidth = attribWidth;
if (pinnataMode) {
nv.defaultColorCategorical = d3.schemeCategory10
.concat(d3.schemeAccent)
.concat(d3.schemePastel1)
.concat(d3.schemeSet2)
.concat(d3.schemeSet3);
nv.maxNumDistictForCategorical = nv.defaultColorCategorical.length;
}
console.log("data");
// Add the data
nv.data(data);
// Add these attribs, based on their types
nv.addAllAttribs(selectedAttributes.map(attr => dAttribs.get(attr)));
// Set the initial visible elements, and setup a callback for when selecting new items
mutable selected = nv.getVisible();
nv.updateCallback(() => mutable selected = nv.getVisible());
return nv;
}
// {
// nv.x0 = 0; //Where to start drawing navio in x
// nv.y0 = 100; //Where to start drawing navio in y, useful if your attrib names are too long
// nv.maxNumDistictForCategorical = 10; // addAllAttribs uses this for deciding if an attribute is categorical (has less than nv.maxNumDistictForCategorical categories) or text
// nv.howManyItemsShouldSearchForNotNull = 100; // How many rows should addAllAttribs search to decide guess an attribute type
// nv.margin = 10; // Margin around navio
// nv.levelsSeparation = 40; // Separation between the levels
// nv.divisionsColor = "white"; // Border color for the divisions
// nv.nullColor = "#ffedfd"; // Color for null values
// nv.levelConnectionsColor = "rgba(205, 220, 163, 0.5)"; // Color for the conections between levels
// nv.divisionsThreshold = 4; // What's the minimum row height needed to draw divisions
// nv.fmtCounts = d3.format(",.0d"); // Format used to display the counts on the bottom
// nv.legendFont = "14px sans-serif"; // The font for the header
// nv.linkColor = "#ccc"; // Color used for network links if provided with nv.links()
// nv.nestedFilters = true; // Should navio use nested levels?
// nv.showAttribTitles = true; // Show headers?
// nv.attribWidth = 55; // Width of the columns
// nv.attribRotation = -45; // Headers rotation
// nv.attribFontSize = 13; // Headers font size
// nv.attribFontSizeSelected = 32; // Headers font size when mouse over
// nv.filterFontSize = 10; // Font size of the filters explanations on the bottom
// nv.tooltipFontSize = 12; // Font size for the tooltip
// nv.tooltipBgColor = "#b2ddf1"; // Font color for tooltip background
// nv.tooltipMargin = 50; // How much to separate the tooltip from the cursor
// nv.tooltipArrowSize = 10; // How big is the arrow on the tooltip
// nv.id("attribName"); // Shows this id on the tooltip, should be unique
// }
viewof x_attrib = select({
title: "x_attrib",
options: selectedAttributes,
value: selectedAttributes[0]
})
viewof y_attrib = select({
title: "y_attrib",
options: selectedAttributes,
value: selectedAttributes[1]
})
viewof c_attrib = select({
title: "color_attrib",
options: selectedAttributes,
value: selectedAttributes[2]
})
viewof x_type = select({
title: "x_type",
options: ["quantitative", "ordinal", "nominal"],
value: typeof(data[0][x_attrib]) === typeof(0) ? "quantitative": "nominal"
})
viewof y_type = select({
title: "y_type",
options: ["quantitative", "ordinal", "nominal", "temporal"],
value: typeof(data[0][y_attrib]) === typeof(0) ? "quantitative": "nominal"
})
viewof c_type = select({
title: "color_type",
options: ["quantitative", "ordinal", "nominal"],
value: typeof(data[0][c_attrib]) === typeof(0) ? "quantitative": "nominal"
})
onDemandVisualization = ({
data : { values: selected},
mark: "circle",
title: "Selected rows",
encoding: {
x : { field: x_attrib, type: x_type},
y : { field: y_attrib, type: y_type},
color : { field: c_attrib, type: c_type}
}
})
dAttribs = {
const dAttribs = new Map();
// Try to get the attributes from the first 100 records
const attributes = data.slice(0,100)
.reduce((res,d) =>
res.concat(checkRecursive ? navio.getAttribsFromObjectAsFn(d, recursionLevel) : Object.keys(d)), [])
.filter(a => ["__seqId", "selected", "__i"].indexOf(a)===-1);
// console.log("***attribs", attributes, data[0]);
for (let attr of attributes) {
if (typeof(attr)==="function")
dAttribs.set(attr.name, attr);
else
dAttribs.set(attr, attr);
}
return dAttribs;
}
attributes = Array.from(dAttribs.keys());
viewof selectedAttributes = searchCheckbox(attributes, {
value: attributes,
label: "Attributes"
})
viewof noneButton = {
const button = html`<button>None</button>`;
d3.select(button)
.on("click", () => {
console.log("click");
d3.select(viewof selectedAttributes).selectAll("input").property("checked", false);
(viewof selectedAttributes).dispatchEvent(new Event('change'));
});
return button;
}
viewof allButton = {
const button = html`<button>All</button>`;
d3.select(button)
.on("click", () => {
console.log("click");
d3.select(viewof selectedAttributes).selectAll("input").property("checked", true);
(viewof selectedAttributes).dispatchEvent(new Event('change'));
});
return button;
}
viewof attribWidth = slider({
min: 1,
max: 50,
value: 15,
step: 1,
title: "Attribute width"
})
viewof pinnataMode = checkbox({
title: "More categorical Colors (Piñata mode 🎉)",
options:[{value:true, label:"☢️"}]
})
viewof delimiter = select({
title: "Delimiter",
options:[
",",
";",
"¬",
{value:"\t", label:"Tab"}],
value:","
})
viewof checkRecursive = checkbox({
options:[{value:false, label:"Exand object attributes recursively"}]
})
viewof recursionLevel = slider({
value:1,
max:10,
step:1,
title: "Recursion Level"
})
viewof save = DOM.download(
new Blob([d3.csvFormat(copyOnlySelectedAttrs(selected))], {type: "text/csv"}),
"export.csv",
`Export ${selected.length} selected rows`
)
viewof saveJSON = DOM.download(
new Blob([JSON.stringify(copyOnlySelectedAttrs(selected))], {type: "text/json"}),
"export.json",
`Export ${selected.length} selected rows as JSON`
)
copyOnlySelectedAttrs = (data) => data.map((d) => {
let res = {};
for (let att in d) {
if (d.hasOwnProperty(att) && selectedAttributes.indexOf(att)!=-1)
res[att] = d[att];
}
return res;
})
// import {dataInput} from "@john-guerra/file-input-with-default-value"
import {searchCheckbox} from "@john-guerra/search-checkbox"
import {dataInput} from "@john-guerra/data-input"
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.
