Published
Edited
Sep 28, 2020
Importers
vScale=[vMin,vMax] //
import {chart as histogram} from "@d3/histogram"
import {viewof gl, render} with {view as view, vScale as vScale, glWidth as width} from "dcb83891d6e2ddad"
view=Object({xMin:-1.2,xMax:1.2,yMin:-1.3,yMax:1.1})
function addBar(id, domain, bar) {
let box = d3.select(document.getElementById(id));
let canvas = box.select("canvas");
let canvasWidth = parseInt(canvas.style("width"),10);
let canvasHeight = parseInt(canvas.style("height"),10);
let x=d3.scaleLinear()
.domain([domain.xMin, domain.xMax])
.range([0,canvasWidth]);
let y=d3.scaleLinear()
.domain([domain.yMin, domain.yMax])
.range([canvasHeight,0]);
let svg = box.select(".svg-overlay");
if (svg.empty()) {
svg = box.append("svg")
.attr("class","svg-overlay")
.style("position","absolute")
.style("z-index",2)
.style("top","0px")
.style("left","0px")
.attr("width", canvasWidth)
.attr("height",canvasHeight);
}
let barCoords = [[x(bar[0][0]),y(bar[0][1])],[x(bar[1][0]),y(bar[1][1])]];
let barPath = svg.select(".bar");
if (barPath.empty()) {
svg.append("path")
.attr("class","bar")
.attr("fill", "none")
.attr("stroke", "Gray")
.attr("stroke-width", 4)
.style("opacity",0.5)
//.style("cursor","move")
.attr("d",d3.line()(barCoords));
} else {
barPath.attr("d",d3.line()(barCoords))
}
}
function addColorBar(id, vScale, label){
let box = d3.select("#"+id);
let canvas = box.select("canvas");
let canvasWidth = parseInt(canvas.style("width"),10);
let canvasHeight = parseInt(canvas.style("height"),10);
let svg = box.select(".svg-overlay");
if (svg.empty()) {
svg = box.append("svg")
.attr("class","svg-overlay")
.style("position","absolute")
.style("z-index",2)
.style("top","0px")
.style("left","0px")
.attr("width", canvasWidth)
.attr("height",canvasHeight);
}
svg.select(".color-bar").remove();
svg.append("g")
.attr("class","color-bar")
.attr("transform", `translate(${canvasWidth/2-100},${canvasHeight-50})`)
.append(() => legend({color: d3.scaleSequential(vScale, d3.interpolateSpectral), title: label, width: 200 }));
}
glWidth=width/2
drawGL=render
d3.select(grid).select("#box1")
grid
draw={
addNode("box1",viewof gl);
addNode("box2",histogram);
}
drawBars={
addBar("box1",view,[[-0.5,yBar],[0.5,yBar]]);
addColorBar("box1",vScale,"Yp");
}
//addBar("box1",view,[[-0.5,yBar],[0.5,yBar]])
//addColorBar("box1",vScale,"Yp")
function addNode(id,node) {
let el = document.getElementById(id);
let children=el.childNodes;
if (children.length > 0) {el.removeChild(children[0]);}
el.appendChild(node);
}
layout = [ {id:"box1", title:"WebGL Contours", cols:6},{id:"box2", title:"Histogram", cols:6}]
style=html`<code>css</code> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">`
import {slider} from "@jashkenas/inputs"
import {legend} from "@d3/color-legend"
d3=require("d3")
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.
