Published
Edited
Oct 31, 2020
html`In a class of N_ALL students, each of the students likes either sports or learning English or both. N_BOTH students like both, N_A like sports and N_B like learning English. `
N_ALL = 25
N_A = 7
N_B = 12
N_BOTH = 0.5
d3 = require('d3@5')
R_MAX = 400
rA = N_A / N_ALL * R_MAX
rB = N_B / N_ALL * R_MAX
rBoth = N_BOTH / N_ALL * R_MAX
delta = (rA + rB) / 10
html`d_A_B: Distance from center of A to center of B`
kA = (N_BOTH / N_A) * Math.PI
kB = (N_BOTH / N_B) * Math.PI
function getTheta (k) {
let theta = 0;
let minDetal = 1000;
for(let i=0; i< Math.PI; i=i+0.1){
const detal = Math.abs(i - Math.sin(i) -k);
if(detal < minDetal){
minDetal = k;
theta = i;
}
}
return theta
}
theta_a = getTheta(kA)
theta_b = getTheta(kB)
d1 = Math.cos(theta_a /2 ) * rA
d2 = Math.cos(theta_b / 2) * rB
d = d1 + d2
lRect = rA + rB + d + 2 * delta
wRect = 2 * d3.max([rA, rB]) + 2 * delta
function draw_venn(){
const node = DOM.svg(lRect, wRect);
const svg = d3.select(node);
svg.attr('style', 'border: 1px solid salmon');
svg.append('circle').attr('r', rA).attr('cx', rA + delta).attr('cy', d3.max([rA, rB]) + delta).attr("fill", 'rgb(31, 119, 180)').attr("fill-opacity", 0.25).attr("stroke", 'steelblue').attr("stroke-opacity", 0.55).attr("stroke-width", 3)
svg.append('circle').attr('r', rB).attr('cx', delta + rA + d).attr('cy', d3.max([rA, rB]) + delta).attr("fill", 'rgb(255, 127, 14)').attr("fill-opacity", 0.25).attr("stroke", 'orange').attr("stroke-opacity", 0.55).attr("stroke-width", 3)
svg.append('text').text("A").attr('x', rA + delta).attr('y', d3.max([rA, rB]) + delta).attr("value", "ABC").attr("color", "white").attr("font-size", "30px")
svg.append('text').text("B").attr('x', lRect - rB - delta).attr('y', d3.max([rA, rB]) + delta).attr("value", "ABC").attr("color", "white").attr("font-size", "30px")
return svg.node();
}
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.
