Published
Edited
Jul 24, 2020
Importers
md`# D3-Utils Lib`
data =
[{x: 1, y: 2},
{x: 2, y: 3},
{x: 3, y: 4}];
d3 = require("d3", "d3-array@^2.1");
function describeData(data, options) {
let toStr = options || false;
let header = Object.keys(data[0]);
let acceptable = [];
header.forEach(head => {
if (typeof data[0][head] == "number") {
acceptable.push(head);
}
});
let names = ["count", "mean", "std", "min", "25%", "50%", "75%", "max"];
let stats = {};
names.forEach(elt => stats[elt]={});
acceptable.forEach(head => {
let count = d3.count(data, d => d[head]);
let mean = d3.mean(data, d => d[head]);
let std = d3.deviation(data, d => d[head]);
let [min, max] = d3.extent(data, d => d[head]);
let x25 = d3.quantile(data, 0.25, d => d[head]);
let x50 = d3.quantile(data, 0.5, d => d[head]);
let x75 = d3.quantile(data, 0.75, d => d[head]);
stats["count"][head]=count;
stats["mean"][head]=mean;
stats["std"][head]=std;
stats["min"][head]=min;
stats["25%"][head]=x25;
stats["50%"][head]=x50;
stats["75%"][head]=x75;
stats["max"][head]=max;
});
if (typeof toStr == "boolean" && toStr) {
let df = [];
names.forEach(name => {
let obj = {};
obj[""] = name;
df.push({...obj, ...stats[name]});
});
return z.print(df);
} else {
return stats;
}
}
describeData(data);
z = require("zebras");
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js");
class plot4 {
constructor(data, selector) {
this.data = data;
this.elt = selector;
this.colors = {
r: "#D62728",
b: "#3366CC",
g: "#109618",
y: "#F2B601",
o: "#F58518",
pl: "#990099",
lb: "#0099C6",
pk: "#FF9DA6",
lv: "#636EFA",
lo: "#EF553B",
default: "#1F77B4"
};
}
type(kind) {
this.type = kind;
}
title(t) {
this.Title = t;
}
xlabel(xl) {
this.xLabel = xl;
}
ylabel(yl) {
this. yLabel = yl;
}
ticks(bool) {
this.showTicks = bool;
}
bins(Bins) {
this.nBins = Bins;
}
show() {
if (this.type == "hist") {
let hist;
if (!this.nBins) {
hist = d3.histogram();
} else {
let scale = d3.scaleLinear()
.domain(d3.extent(this.data));
hist = d3.histogram()
.thresholds(scale.ticks(this.nBins));
}
let bins = hist(this.data);
let x = Array.from(bins, elt => elt = `${elt["x0"]}-${elt["x1"]}`);
let y = Array.from(bins, elt => elt = elt.length);
let trace0 = {
type: "bar",
x: x,
y: y,
width: Array(bins.length).fill(1)
};
let data = [trace0];
let layout = {
title: {text: this.Title || ""},
xaxis: {title: {text: this.xLabel || ""},
showticklabels: this.showTicks && true},
yaxis: {title: {text: this.yLabel || ""}}
};
Plotly.newPlot(this.elt, data, layout);
}
else if (this.type == "hist-m") {
let hist;
if (!this.nBins) {
hist = d3.histogram();
} else {
let scale = d3.scaleLinear()
.domain(d3.extent(this.data));
hist = d3.histogram()
.thresholds(scale.ticks(this.nBins));
}
let data = [];
this.data.forEach(part => {
let bins = hist(part[0]);
let x = Array.from(bins, elt => elt = `${elt["x0"]}-${elt["x1"]}`);
let y = Array.from(bins, elt => elt = elt.length);
let trace = {
type: "bar",
x: x,
y: y,
width: Array(bins.length).fill(1)
};
if(part[1]) {
trace.name = part[1];
}
if(part[2]) {
let color = this.colors[part[2]];
trace.marker = {color};
}
data.push(trace);
});
let layout = {
title: {text: this.Title || ""},
xaxis: {title: {text: this.xLabel || ""},
showticklabels: this.showTicks && true},
yaxis: {title: {text: this.yLabel || ""}}
};
Plotly.newPlot(this.elt, data, layout);
}
else if (this.type == "scatter") {
let x = this.data[0];
let y = this.data[1];
let trace0 = {
type: "scatter",
x: x,
y: y,
mode: "markers"
};
let data = [trace0];
let layout = {
title: {text: this.Title || ""},
xaxis: {title: {text: this.xLabel || ""},
showticklabels: this.showTicks && true},
yaxis: {title: {text: this.yLabel || ""}}
};
Plotly.newPlot(this.elt, data, layout);
}
else if (this.type == "scatter-m") {
let data = [];
this.data.forEach(part => {
let x = part[0];
let y = part[1];
let trace = {
type: "scatter",
x: x,
y: y,
mode: "markers"
};
if(part[2]) {
trace.name = part[2];
}
if(part[3]) {
let color = this.colors[part[3]];
trace.marker = {color};
}
data.push(trace);
});
let layout = {
title: {text: this.Title || ""},
xaxis: {title: {text: this.xLabel || ""},
showticklabels: this.showTicks && true},
yaxis: {title: {text: this.yLabel || ""}}
};
Plotly.newPlot(this.elt, data, layout);
}
}
}
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.
