Public
Edited
Sep 25, 2023
Fork of Scatterplot
Insert cell
story_dashboard = html`
<div>
<h1>Storyboard</h1>
<div style="display: flex">
${getTestHTML()}
<div>${[chart2]}</div>
</div>
</div>`
Insert cell
function getTestHTML() {
return html`<div>${[chartTest, chart3]}</div>`
}
Insert cell
Insert cell
chartTest = {
return Plot.dot(data_author, {
x: "tsne_x",
y: "tsne_y",
fill: "role",
title: (d) =>
`${d.entity}` // \n makes a new line
}).plot()
}
Insert cell
chart2 = {return Plot.dot(data_author, {
x: "tsne_x",
y: "tsne_y",
fill: "role",
title: (d) =>
`${d.entity}` // \n makes a new line
}).plot()}
Insert cell
addTooltips(
Plot.dot(data_author, {
x: "tsne_x",
y: "tsne_y",
fill: "role",
title: (d) =>
`${d.entity}` // \n makes a new line
}).plot()
)
Insert cell
addTooltips(
Plot.dot(data_dbpedia, {
x:"tsne_x",
y:"tsne_y",
title: (d)=>
`${d.entity}`
}).plot()
)
Insert cell
addTooltips(
Plot.dot(data_technique, {
x:"tsne_x",
y:"tsne_y",
title: (d)=>
`${d.entity}`
}).plot()
)
Insert cell
function plotChart3(div) {var trace1 = {
x: data_paper_nohighlight.map(d=>d.tsne_x),
y: data_paper_nohighlight.map(d=>d.tsne_y),
name: 'Non-Target',
type: 'scatter',
mode: 'markers',
hovertemplate: data_paper_nohighlight.map(d=>d.entity)

};

var trace2 = {
x: data_paper_highlight.map(d=>d.tsne_x),
y: data_paper_highlight.map(d=>d.tsne_y),
name: 'Target',
type: 'scatter',
mode: 'markers',
hovertemplate: data_paper_highlight.map(d=>d.entity)
};


var data = [trace1, trace2];

var layout = {
scattermode: 'group',
title: 'TVCG Papers',
xaxis: {title: 'tsne-x'},
yaxis: {title: 'tsne-y'},
scattergap: 0.7
};
Plotly.newPlot(div, data, layout);
}


Insert cell
chart3 = {var trace1 = {
x: data_paper_nohighlight.map(d=>d.tsne_x),
y: data_paper_nohighlight.map(d=>d.tsne_y),
name: 'Non-Target',
type: 'scatter',
mode: 'markers',
hovertemplate: data_paper_nohighlight.map(d=>d.entity)

};

var trace2 = {
x: data_paper_highlight.map(d=>d.tsne_x),
y: data_paper_highlight.map(d=>d.tsne_y),
name: 'Target',
type: 'scatter',
mode: 'markers',
hovertemplate: data_paper_highlight.map(d=>d.entity)
};


var data = [trace1, trace2];

var layout = {
scattermode: 'group',
title: 'TVCG Papers',
xaxis: {title: 'tsne-x'},
yaxis: {title: 'tsne-y'},
scattergap: 0.7
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div
}


Insert cell
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
Insert cell
survey_papers = [50201, 51075, 57188, 55467, 66065, 55680, 62984, 67802, 72084,
65324, 60138, 55727, 61436, 59295]
Insert cell
import {addTooltips} from "@mkfreeman/plot-tooltip"

Insert cell
data_dbpedia = node_embedding_version4_transe_ae.filter(function(d){
return d.entity_type=="DBPedia"
})
Insert cell
data_technique = node_embedding_version4_transe_ae.filter(function(d){
return d.entity_type_high=="input"
})
Insert cell
data_paper = node_embedding_version4_transe_ae.filter(function(d){
return d.entity_type=="Paper"
})
Insert cell
data_paper_highlight = node_embedding_version4_transe_ae.filter(function(d){
return d.entity_type=="Paper" & survey_papers.includes(d.id)
})
Insert cell
data_paper_nohighlight = node_embedding_version4_transe_ae.filter(function(d){
return d.entity_type=="Paper" & survey_papers.includes(d.id)==false
})
Insert cell
Insert cell
Insert cell

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.
Learn more