Published
Edited
Dec 24, 2020
md`# Retail Visualization Scatter plot `
data = {
while (uploadStuff.data == undefined) {
yield new Promise(resolve => {
setTimeout(() => {
if (uploadStuff.data == undefined) {
resolve("no data uploaded yet");
} else {
resolve(d3.csvParse(uploadStuff.data));
}
}, 1000);
});
}
}
viewof termTiles = {
let allTerms = data.reduce((acc, cur) => {
if (acc.indexOf(cur.term) == -1 && cur.term != "") {
acc.push(cur.term);
}
return acc;
}, []);
let activeTerms = [];
allTerms.sort();
let termsEle = () => {
let holder = document.createElement("div");
holder.id = "termsHolder";
for (let term of allTerms) {
let termEle = document.createElement("div");
termEle.className = "termTile";
termEle.innerHTML = term;
termEle.addEventListener("click", e => {
console.log("clicked", term);
if (activeTerms.indexOf(term) == -1) {
activeTerms.push(term);
termEle.classList.add("activeTerm");
} else {
termEle.classList.remove("activeTerm");
activeTerms.pop(term);
}
//plotPoints();
});
holder.append(termEle);
}
return holder;
};
let res = termsEle();
res.addEventListener("click", () => {
console.log("updating value", activeTerms);
if (document.querySelectorAll(".activeTerm").length == 0) {
activeTerms = [];
}
res.value = [...activeTerms];
res.dispatchEvent(new CustomEvent("input"));
});
return res;
}
termTiles
{
var vlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v4.json',
title: `Retailer use of Key Terms "${termTiles.join(", ")}" over time`,
vconcat: [
{
width: width - 200,
layer: [
{
data: {
values: data.filter(e => {
return e.term == "";
})
},
mark: {
type: 'point',
stroke: "rgb(200,200,200)"
},
encoding: {
x: {
field: "time",
type: "temporal",
scale: { domain: { selection: "brush" } }
},
y: {
field: "name"
}
}
},
{
data: {
values: data.filter(e => {
return termTiles.indexOf(e.term) != -1;
})
},
mark: {
type: 'point',
stroke: "rgb(0,0,200)",
tooltip: {
content: "data"
}
},
encoding: {
x: {
field: "time",
type: "temporal",
scale: { domain: { selection: "brush" } }
},
y: {
field: "name"
}
}
}
]
},
{
height: 60,
width: width - 200,
mark: "point",
data: {
values: Array(12)
.fill(0)
.map((e, i) => {
let start = new Date("01/01/2020");
start.setMonth(start.getMonth() + i);
return {
time: start,
value: 1
};
})
},
selection: {
brush: { type: "interval", encodings: ["x"] }
},
encoding: {
x: {
field: "time",
type: "temporal"
},
y: {
field: "value",
title: "",
axis: { ticks: 0, grid: false, labels: false }
}
}
}
]
};
// Embed the visualization in the container with id `vis`
vl('#scatterTerm', vlSpec);
}
html`<style>
#termsHolder {
display:flex;
flex-wrap:wrap;
}
.termTile {
background:rgb(230,230,230);
padding:4px;
border-radius:10%;
margin:2px;
cursor:pointer;
}
.activeTerm {
border:1px solid black;
}
</style>
`
Array(12)
.fill(0)
.map((e, i) => {
let start = new Date("01/01/2020");
start.setMonth(start.getMonth() + i);
return {
time: start,
value: 1
};
})
uploadStuff = {
let res = {};
res.upload = html`<input type="file">`;
res.upload.onchange = async e => {
console.log(e.target.files);
let text = await fetch(URL.createObjectURL(e.target.files[0])).then(res =>
res.text()
);
console.log("got text...", text.slice(0, 200));
let data = text;
console.log(data);
res.data = data;
};
return res;
}
d3 = require("d3")
require("https://cdn.jsdelivr.net/npm/vega@5.17.0")
require("https://cdn.jsdelivr.net/npm/vega-lite@4.17.0")
vl = require("https://cdn.jsdelivr.net/npm/vega-embed@6.12.2")
Time
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.
