Published
Edited
Nov 27, 2020
1 star
body = {
async function samp1k() {
for(let i=0;i<100;i++) {
for(let j=0;j<10;j++) {
addpoint();
updateHist();
}
updateBar();
await new Promise(r => setTimeout(r, 250));
}
}
function resetfn() {
var xl = d3.range(0,49/48,1/48);
var yl = d3.range(0,49/48,1/48);
var zl = d3.range(0,49/48,1/48);
var xk = []
var yk = []
var zk = []
var pointlist = []
var i,j,k;
for (i = 0; i < xl.length; i++) {
for (j = 0; j < yl.length; j++) {
for (k = 0; k < zl.length; k++) {
if(Math.abs((xl[i]+yl[j]+zl[k])-1.0) < 0.00001) {
xk.push(xl[i]);
yk.push(yl[j]);
zk.push(zl[k]);
}
}
}
}
const points = d3.range(xk.length).map(ind => ({
x: ((xk[ind] - zk[ind])+1.0)*(width/2),
y: height - (Math.sqrt(3)-(yk[ind] * Math.sqrt(3)))*(height / Math.sqrt(3))
}));
const d2l = data2.length;
for(let i=0;i<d2l;i++) {
data2.pop();
}
for(let i=0;i<points.length;i++) {
data2.push(points[i]);
}
updateHist();
}
const container = html`<div id="inputs" style="display: flex">
<div style="margin: 4px">${rinput}</div><div style="margin: 4px">${ginput}</div><div style="margin: 4px">${binput}</div>
<div><button id="b1" style="margin-left: 10px; margin-top: 24px">Sample 1000</button></div>
<div><button id="b3" style="margin-left: 10px; margin-top: 24px">Reset</button></div>
</div>
<br/>
<div width=${2*width2}><svg width=${width2} height=${height2} id='chart'>${chart}</svg><svg width=${width2} height=${height2}>${barchart}</svg></div>`
const but1 = container.querySelector('#b1');
const but2 = container.querySelector('#b3');
but1.onclick = samp1k;
but2.onclick = resetfn;
return container;
}
// <div><button id="b2" style="margin-left: 10px; margin-top: 24px">Sample Once</button></div>
tst= generateSample()
import {number} from "@jashkenas/inputs"
rinput = number({title: "Initial Red Balls", value: 1, min: 1})
binput = number({title: "Initial Blue Balls", value: 2, min: 1})
ginput = number({title: "Initial Green Balls", value: 4, min: 1})
redval = Generators.input(rinput)
blueval = Generators.input(binput)
greenval = Generators.input(ginput)
data2
button = html`<button type "button">Update</button>`
button2 = html`<button type "button">Update10000</button>`
initials = [redval,greenval,blueval]
initials
initsum = initials[0]+initials[1]+initials[2]
function generateSample() {
const iters = 100;
var urncount = [0,0,0];
urncount[0] = initials[0];
urncount[1] = initials[1];
urncount[2] = initials[2];
for(let i=0;i<iters;i++) {
const urnsum = urncount[0]+urncount[1]+urncount[2];
const pr1 = urncount[0] / urnsum;
const pr2 = urncount[1] / urnsum;
const pr3 = urncount[2] / urnsum;
const rnd = Math.random();
if(rnd < pr1) {
urncount[0] = urncount[0]+1;
}else if (rnd >= pr1 && rnd <= pr1+pr2) {
urncount[1] = urncount[1]+1;
}else if (rnd >= pr1 + pr2) {
urncount[2] = urncount[2]+1;
}
}
var result = []
result.push(urncount[0]/(iters+initsum));
result.push(urncount[1]/(iters+initsum));
result.push(urncount[2]/(iters+initsum));
return result;
}
width2 = 350
height2 = 350
xScale = d3.scaleBand() //Ordinal scale
.domain(d3.range(3)) //sets the input domain for the scale
.rangeRound([0, width2]) //enables rounding of the range
.paddingInner(0.05); //spacing between each bar
//yScale will help us map data to the height of bars in the barchart
yScale = d3.scaleLinear()
.domain([0, 1]) //sets the upper end of the input domain to the largest data value in dataset
.range([0, height2]);
svg = d3.create('svg').attr('width',width2).attr('height',height2)
//Create SVG element
barchart = {
svg
.selectAll("rect")
.data(rp)
.enter()
.append("rect")
.attr("x", function(d, i) { // position in x-axis
return xScale(i); // we will pass the values from the dataset
})
.attr("y", function(d) {
return height2 - yScale(d);
})
.attr("width", xScale.bandwidth()) //Asks for the bandwith of the scale
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d,i) {
switch(i) {
case 0:
return "#FF0000";
case 1:
return "#00FF00";
case 2:
return "#0000FF";
}
});
return svg.node();
}
listener2 = d3.select('#b2')
.on("click", function() {
addpoint(1000); //Changes de values of the data
updateBar(); //Updates the bar chart
updateHist();
});
// listener3 = d3.select('#b3')
// .on("click", function() {
// listener1 = d3.select('#b1')
// .on("click", async function() {
async function updateBar(){
svg.selectAll("rect")
.data(rp)
.transition() // <---- Here is the transition
.duration(250) // 2 seconds
.attr("y", function(d) {
return height2 - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
}
function updateHist(){
hsvg.select("g").remove();
var newx = d3.scaleLinear()
.domain(d3.extent(data2, d => d.x))
.rangeRound([margin.left, width - margin.right])
var newy = d3.scaleLinear()
.domain(d3.extent(data2, d => d.y))
.rangeRound([height - margin.bottom, margin.top])
var newhexbin = d3.hexbin()
.x(d => newx(d.x))
.y(d => newy(d.y))
//.radius(20 * width / (height - 1))
.radius(width / 48)
.extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])
const newbins = newhexbin(data2)
var newcolor = d3.scaleSequential(d3.interpolateViridis)
.domain([0, d3.max(newbins, d => d.length)*0.9])
hsvg.append("g")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.1)
.selectAll("path")
.data(newbins)
.join("path")
.attr("d", newhexbin.hexagon())
.attr("transform", d => `translate(${d.x},${d.y})`)
.attr("fill", d => newcolor(d.length));
}
hsvg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
chart = {
hsvg.append("g")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.1)
.selectAll("path")
.data(bins)
.join("path")
.attr("d", hexbin.hexagon())
.attr("transform", d => `translate(${d.x},${d.y})`)
.attr("fill", d => color(d.length));
return hsvg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
data = data2
rp = [.33,.33,.34]
data2 = {
var xl = d3.range(0,49/48,1/48);
var yl = d3.range(0,49/48,1/48);
var zl = d3.range(0,49/48,1/48);
var xk = []
var yk = []
var zk = []
var pointlist = []
var i,j,k;
for (i = 0; i < xl.length; i++) {
for (j = 0; j < yl.length; j++) {
for (k = 0; k < zl.length; k++) {
if(Math.abs((xl[i]+yl[j]+zl[k])-1.0) < 0.00001) {
xk.push(xl[i]);
yk.push(yl[j]);
zk.push(zl[k]);
}
}
}
}
const points = d3.range(xk.length).map(ind => ({
x: ((xk[ind] - zk[ind])+1.0)*(width/2),
y: height - (Math.sqrt(3)-(yk[ind] * Math.sqrt(3)))*(height / Math.sqrt(3))
}));
return points
}
function addpoint(n) {
var dt=[] ;
rp.pop();
rp.pop();
rp.pop();
const samp = generateSample();
rp.push(samp[0]);
rp.push(samp[1]);
rp.push(samp[2]);
var cartx = ((rp[0] - rp[2])+1.0)*(width/2);
var carty = height - (Math.sqrt(3)-(rp[1] * Math.sqrt(3)))*(height / Math.sqrt(3))
var entry = ({x: cartx, y: carty})
dt.push(entry)
data2.push(entry)
return(dt) ;
}
hexbin = d3.hexbin()
.x(d => x(d.x))
.y(d => y(d.y))
.radius(20 * width / (height - 1))
.extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])
bins = hexbin(data)
x = d3.scaleLinear()
.domain(d3.extent(data, d => d.x))
.rangeRound([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(data, d => d.y))
.rangeRound([height - margin.bottom, margin.top])
color = d3.scaleSequential(d3.interpolateViridis)
.domain([0, 10000])
height = Math.max(640, width)
margin = ({top: 20, right: 20, bottom: 30, left: 40})
d3 = require("d3@6", "d3-hexbin@0.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.
