Published
Edited
May 20, 2021
Insert cell
Insert cell
viz = {const ct = html`<div style='display: flex'> <div>${disp.node()}</div><div><div style='padding-top: 100px; padding-left:80px'>${mslider}</div><div style='padding-top: 70px'>${chart.node()}</div></div></div></div>
`

draw(crp(N_ITERS))
return ct

}
Insert cell
chartw = 400
Insert cell
charth = 200
Insert cell
width = 2*PADDING + SIDELENGTH
Insert cell
PADDING = 100
Insert cell
SIDELENGTH = 300
Insert cell
N_ITERS = 3000
Insert cell
N_CUST = 3000
Insert cell
drag = {

function dragstarted() {
d3.select(this).attr("stroke", "black");
}

function dragged(event, d) {
if(d.index == 1) {
if(Math.abs(event.x-PADDING) < Math.abs(event.y-PADDING-SIDELENGTH)) {
d3.select(this).raise().attr("cx", d.x=PADDING).attr("cy", d.y=(event.y < (PADDING+SIDELENGTH)/2 ? Math.max(event.y,PADDING) : Math.min(event.y,PADDING+SIDELENGTH)));
d3.select('#separator').attr("x1", d.x).attr("y1",d.y);
}else{
d3.select(this).raise().attr("cx", d.x=(event.x < (PADDING+SIDELENGTH)/2 ? Math.max(event.x,PADDING) : Math.min(event.x,PADDING+SIDELENGTH))).attr("cy", d.y=PADDING+SIDELENGTH);
d3.select('#separator').attr("x1", d.x).attr("y1",d.y);
}
}else{
if(Math.abs(event.x-PADDING-SIDELENGTH) < Math.abs(event.y-PADDING)) {
d3.select(this).raise().attr("cx", d.x=PADDING+SIDELENGTH).attr("cy", d.y=(event.y < (PADDING+SIDELENGTH)/2 ? Math.max(event.y,PADDING) : Math.min(event.y,PADDING+SIDELENGTH)));
d3.select('#separator').attr("x2", d.x).attr("y2",d.y);
}else{
d3.select(this).raise().attr("cx", d.x=(event.x < (PADDING+SIDELENGTH)/2 ? Math.max(event.x,PADDING) : Math.min(event.x,PADDING+SIDELENGTH))).attr("cy", d.y=PADDING);
d3.select('#separator').attr("x2", d.x).attr("y2",d.y);
}
}
}

function dragended() {
const m = -(d3.select('#separator').attr("y2")-d3.select('#separator').attr("y1"))/(d3.select('#separator').attr("x2")-d3.select('#separator').attr("x1"))
const yint = (PADDING+SIDELENGTH-d3.select('#separator').attr("y1"))/SIDELENGTH - (m*((d3.select('#separator').attr("x1")-PADDING)/SIDELENGTH))
const newdata = sample(N_ITERS,N_CUST,m,yint)
const newbins = d3.bin().domain([0,1]).thresholds(40)(newdata)
const xfn = d3.scaleLinear()
.domain([newbins[0].x0, newbins[newbins.length - 1].x1])
.range([margin.left, chartw - margin.right]);
const yfn = d3.scaleLinear()
.domain([0, d3.max(newbins, d => d.length)]).nice()
.range([charth - margin.bottom, margin.top]);
const xaxisfn = g => g
.attr("transform", `translate(0,${charth - margin.bottom})`)
.call(d3.axisBottom(xfn).ticks(width / 80 ).tickSizeOuter(0))
.call(g => g.append("text")
.attr("x", chartw - margin.right)
.attr("y", -4)
.attr("fill", "currentColor")
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.text(newdata.x));
const yaxisfn = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yfn).ticks(charth / 40))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 4)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(newdata.y));
d3.select(this).attr("stroke", null);
d3.select("#test")
.selectAll("rect")
.data(newbins)
.join("rect")
.attr("x", d => xfn(d.x0) + 1)
.attr("width", d => Math.max(0, xfn(d.x1) - xfn(d.x0) - 1))
.attr("y", d => yfn(d.length))
.attr("height", d => yfn(0) - yfn(d.length));
d3.select('#xaxiscall').remove();
d3.select('#yaxiscall').remove();
d3.select('#test')
.append("g")
.attr('id','xaxiscall')
.call(xaxisfn);
d3.select('#test')
.append("g")
.attr('id','yaxiscall')
.call(yaxisfn);
}

return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
Insert cell
disp = {
const svg = d3.create('svg')
.attr('width',width)
.attr('height',SIDELENGTH+(2*PADDING))
const rect = svg.append('rect')
.attr('x', PADDING)
.attr('y', PADDING)
.attr('width', SIDELENGTH)
.attr('height', SIDELENGTH)
.attr('stroke', '#000000')
.attr('fill', '#FFFFFF')

return svg
}
Insert cell
circles = [{x: PADDING, y: PADDING + SIDELENGTH, index: 1}, {x: PADDING + SIDELENGTH, y: PADDING, index: 2}]
Insert cell
function draw(tables) {
disp.selectAll("circle")
.data(circles)
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 7)
.attr("fill", "purple")
.call(drag)
disp.selectAll('line')
.remove();
disp.append('line')
.attr("id", "separator")
.style("stroke", "black")
.style("stroke-width", 5)
.attr("x1", circles[0].x)
.attr("y1", circles[0].y)
.attr("x2", circles[1].x)
.attr("y2", circles[1].y);
var total = 0
for(var i=0;i<tables.length;i++) {
total = total + tables[i].val
}
const radiusScaleFactor = 5000 / total
for(var i=0;i<tables.length;i++) {
disp.append('circle')
.attr('cx',PADDING + SIDELENGTH - (tables[i].x * SIDELENGTH))
.attr('cy',PADDING + (tables[i].y * SIDELENGTH))
.attr('r',Math.sqrt(tables[i].val)*radiusScaleFactor)
.attr('stroke', tables[i].color)
.attr('fill', tables[i].color)
.attr('opacity',0.8)
}

return tables
}
Insert cell
alpha = Generators.input(mslider)
Insert cell
//DP base measure unif on square

function crp(iterations) {
var tables = [];
tables.push({x: Math.random(), y: Math.random(), val: 1, color:
'rgb('+Math.floor(Math.random()*256).toString()+','+Math.floor(Math.random()*256).toString()+','+ Math.floor(Math.random()*256).toString()+')'
});
var customers = 1;
for (var i=0;i<iterations-1;i++) {
var rnd = Math.random();
var offset = 0;
for (var j=0;j<tables.length;j++) {
var prob = (tables[j].val/(customers+alpha))
if(offset < rnd && rnd < offset + prob) {
tables[j].val = tables[j].val + 1;
}
offset = offset + prob;
}
if(offset < rnd && rnd < 1) {
tables.push({x: Math.random(), y: Math.random(), val: 1, color:
'rgb('+Math.floor(Math.random()*256).toString()+','+Math.floor(Math.random()*256).toString()+','+ Math.floor(Math.random()*256).toString()+')'
});
}
customers = customers + 1;
}
return tables
}
Insert cell
function sample(iters,n_customers,m,yint) {
var samples = []
for(var i=0;i<iters;i++) {
samples.push(crp(n_customers))
}
//return samples
var proportions = []
for(var i=0;i<samples.length;i++) {
var region1total = 0
var region2total = 0
for(var j=0;j<samples[i].length;j++) {
if((m*samples[i][j].x)+yint < samples[i][j].y) {
region1total = region1total + samples[i][j].val
}else{
region2total = region2total + samples[i][j].val
}
}
proportions.push(region1total / (region1total+region2total))
}
return proportions
}
Insert cell
chart = {
const svg = d3.create("svg")
.attr("width",chartw).attr("height",charth)
.attr("viewBox", [0, 0, chartw, charth]);
svg.append("g")
.attr("id","test")
.attr("fill", "steelblue")
.selectAll("rect")
.data(bins)
.join("rect")
.attr("x", d => x(d.x0) + 1)
.attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1))
.attr("y", d => y(d.length))
.attr("height", d => y(0) - y(d.length));

svg.append("g")
.attr('id','xaxiscall')
.call(xAxis);
svg.append("g")
.attr('id','yaxiscall')
.call(yAxis);
return svg;
}
Insert cell
data = sample(N_ITERS,N_CUST, 1, 0)
Insert cell
bins = d3.bin().domain([0,1]).thresholds(40)(data)
Insert cell
x = d3.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([margin.left, chartw - margin.right])
Insert cell
y = d3.scaleLinear()
.domain([0, d3.max(bins, d => d.length)]).nice()
.range([charth - margin.bottom, margin.top])
Insert cell
xAxis = g => g
.attr("transform", `translate(0,${charth - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80 ).tickSizeOuter(0))
.call(g => g.append("text")
.attr("x", chartw - margin.right)
.attr("y", -4)
.attr("fill", "currentColor")
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.text(data.x))
Insert cell
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(charth / 40))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 4)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
Insert cell
height = 500
Insert cell
margin = ({top: 20, right: 20, bottom: 30, left: 40})
Insert cell
mslider = number({title: "Concentration Parameter", value: 1, min: 0.01})
Insert cell
import {number} from "@jashkenas/inputs"
Insert cell
d3 = require('d3@6')
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