function LineChartPlotVideo(data, lang){
let data_bands = [];
if (lang == "en") {
data_bands = [
{title: "", x: 2, y: -0.7},
{title: "", x: 2, y: 0},
{title: "", x:2, y: 0.7}
]
} else if (lang =="gr") {
data_bands = [
{title: "", x: 2, y: -0.7},
{title: "", x: 2, y: 0},
{title: "", x:2, y: 0.7}
]
};
return Plot.plot({
style: "overflow: visible; background: transparent; font-family: Roboto, sans-serif",
height: 450,
marginRight: 50,
padding: 0,
// grid: true,
width: 1280,
y: {
// grid: true,
label: lang == "en" ? "" : "",
domain: [-1,1]
},
x: {
// grid: true,
// label: "Speech completion (%)",
ticks: [0, 50, 100],
tickFormat: x => {
switch (x) {
case 0:
return lang == "en" ? "" : "";
case 50:
return lang == "en" ? "" : "";
case 100:
return lang == "en" ? "" : "";
default:
return "";
}
}
},
marks: [
Plot.text(data_bands, {
x: "x",
y: "y",
text: "title",
fontSize: "12px",
fontWeight: "600",
textAnchor: "start",
}),
// bg area between -1 and -0.34
Plot.area([{x:0, y1:-1, y2: -0.33},{x:100, y1:-1, y2: -0.33}], {
x1: 'x',
y1: 'y1',
x2: 'x',
y2: 'y2',
fill: "transparent",
fillOpacity: 0.2
}),
// bg area between -0.33 and 0.33
Plot.area([{x:0, y1:-0.33, y2: 0.33},{x:100, y1:-0.33, y2: 0.33}], {
x1: 'x',
y1: 'y1',
x2: 'x',
y2: 'y2',
fill: "transparent",
fillOpacity: 0.2
}),
// bg area between 0.34 and 1.0
Plot.area([{x:0, y1:0.33, y2: 1},{x:100, y1:0.33, y2: 1}], {
x1: 'x',
y1: 'y1',
x2: 'x',
y2: 'y2',
fill: "transparent",
fillOpacity: 0.2
}),
// Create a line mark
Plot.line(data[0], {
x: "perc",
y: "weight",
order: "speech",
// stroke: d => colorData[d.speech.split("_")[0]],
stroke: "#0e3354",
strokeWidth: 3,
// use linear as value alternatively in the following key
curve: "catmull-rom"
}),
Plot.line(data[1], {
x: "perc",
y: "weight",
order: "speech",
// stroke: d => colorData[d.speech.split("_")[0]],
stroke: "#75b9be",
strokeWidth: 3,
// use linear as value alternatively in the following key
curve: "catmull-rom"
}),
// Plot.text(data, Plot.selectLast({
// x: "perc",
// y: "weight",
// z: "speech",
// text: "speech",
// textAnchor: "start",
// dx: 2
// }))
]
})
}
function LineChartPlot(data, lang){
let data_bands = [];
if (lang == "en") {
data_bands = [
{title: "Negative", x: 2, y: -0.7},
{title: "Neutral", x: 2, y: 0},
{title: "Positive", x:2, y: 0.7}
]
} else if (lang =="gr") {
data_bands = [
{title: "Αρνητικό", x: 2, y: -0.7},
{title: "Ουδέτερο", x: 2, y: 0},
{title: "Θετικό", x:2, y: 0.7}
]
};
return Plot.plot({
style: "overflow: visible; background: transparent; font-family: Roboto, sans-serif",
height: 450,
marginRight: 50,
padding: 0,
// grid: true,
width: 1280,
y: {
// grid: true,
label: lang == "en" ? "↑ Sentiment" : "Συναίσθημα",
domain: [-1,1]
},
x: {
// grid: true,
// label: "Speech completion (%)",
ticks: [0, 50, 100],
tickFormat: x => {
switch (x) {
case 0:
return lang == "en" ? "Speech Start" : "Αρχή Ομιλίας";
case 50:
return lang == "en" ? "Speech Middle" : "Μέση Ομιλίας";
case 100:
return lang == "en" ? "Speech End" : "Τέλος Ομιλίας";
default:
return "";
}
}
},
marks: [
Plot.text(data_bands, {
x: "x",
y: "y",
text: "title",
fontSize: "12px",
fontWeight: "600",
textAnchor: "start",
}),
// bg area between -1 and -0.34
Plot.area([{x:0, y1:-1, y2: -0.33},{x:100, y1:-1, y2: -0.33}], {
x1: 'x',
y1: 'y1',
x2: 'x',
y2: 'y2',
fill: "#ba3a0b",
fillOpacity: 0.2
}),
// bg area between -0.33 and 0.33
Plot.area([{x:0, y1:-0.33, y2: 0.33},{x:100, y1:-0.33, y2: 0.33}], {
x1: 'x',
y1: 'y1',
x2: 'x',
y2: 'y2',
fill: "#b9c0c0",
fillOpacity: 0.2
}),
// bg area between 0.34 and 1.0
Plot.area([{x:0, y1:0.33, y2: 1},{x:100, y1:0.33, y2: 1}], {
x1: 'x',
y1: 'y1',
x2: 'x',
y2: 'y2',
fill: "#768948",
fillOpacity: 0.2
}),
// Create a line mark
Plot.line(data[0], {
x: "perc",
y: "weight",
order: "speech",
// stroke: d => colorData[d.speech.split("_")[0]],
stroke: "#0e3354",
strokeWidth: 3,
// use linear as value alternatively in the following key
curve: "catmull-rom"
}),
Plot.line(data[1], {
x: "perc",
y: "weight",
order: "speech",
// stroke: d => colorData[d.speech.split("_")[0]],
stroke: "#75b9be",
strokeWidth: 3,
// use linear as value alternatively in the following key
curve: "catmull-rom"
}),
// Plot.text(data, Plot.selectLast({
// x: "perc",
// y: "weight",
// z: "speech",
// text: "speech",
// textAnchor: "start",
// dx: 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.
