Computer Graphics & Visualization @ufrj.br
Published
Edited
Oct 3, 2019
1 star
plot = function (data) {
return vl.markLine({point:true})
.data(data)
.encode (
vl.x().fieldQ('x'),
vl.y().fieldQ('y'),
)
.render({renderer: 'svg'})
}
viewof data = dataSelector()
plot(data)
selector1 = dataSelector()
{
let divChart = html`<div></div>`;
let chart = plot(selector1.value);
divChart.append(chart);
return divChart;
}
{
let divChart = html`<div></div>`;
plot(selector1.value).then(chart => {
divChart.append(chart)
});
return divChart;
}
{
let divChart = html`<div></div>`;
let refresh = function () {
d3.select(divChart).selectAll('div').remove();
plot(selector1.value).then(chart => {
divChart.append(chart)
});
}
d3.select(selector1).on("input", refresh);
refresh();
return divChart;
}
vis = {
let div = html`<div></div>`;
let selector = dataSelector();
let selectorDiv = html`<div style="display:inline-block;vertical-align:top">${selector}</div>`;
div.append(selectorDiv);
let divChart = html`<div style="display:inline-block"></div>`;
div.append(divChart);
let refresh = function () {
d3.select(divChart).selectAll('div').remove();
plot(selector.value).then(chart => {
divChart.append(chart)
});
}
d3.select(selector).on("input", refresh);
refresh();
return div
}
function fullScreenButton(element) {
function fullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
let button = html`<button>Enter Full Screen</button>`;
button.onclick = function () { fullScreen (element) };
return button;
}
fullScreenButton (vis)
vis2 = {
let outerDiv = html`<div style="background:white;padding:10px"></div>`;
let div = html`<div></div>`;
outerDiv.append(div);
let selector = dataSelector();
let selectorDiv = html`<div style="display:inline-block;vertical-align:top">${selector}</div>`;
div.append(selectorDiv);
let divChart = html`<div style="display:inline-block"></div>`;
div.append(divChart);
let refresh = function () {
d3.select(divChart).selectAll('div').remove();
plot(selector.value).then(chart => {
divChart.append(chart)
});
}
d3.select(selector).on("input", refresh);
refresh();
function onresize () {
let fs = document.webkitFullscreenElement || document.mozFullscreenElement;
if (fs == outerDiv) {
let factor = window.innerWidth / 700;
d3.select(div)
.style('transform-origin', "0% 0%")
.style('transform', `scale(${factor})`)
} else {
d3.select(div)
.style('transform', null)
}
}
let resizeListener = window.addEventListener('resize', onresize, false);
invalidation.then(() => window.removeEventListener('resize',resizeListener));
return outerDiv;
}
fullScreenButton(vis2)
html`<style>
div.button {
width: 10em;
height: 2em;
margin: 10px;
font-family: helvetica;
text-align:center;
line-height: 2em;
border-radius: 1em;
vertical-align: middle;
background : lightgray;
box-shadow: 2px 2px 2px grey;
}
div.button.selected {
text-shadow:1px 1px 1px white;
background:darkgray;
}
</style>`
import {comment, util_style} from "@esperanc/notebook-css-utilities"
util_style
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.
