plotter = {
let data = JSON.parse(alpha.f) // swerved swirl
viewof dataset.value = data;
const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom))
.style("border", "1px solid #000");
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
const rect = g.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "#fff");
const clear = g.append("g")
.attr("transform",`translate(${width - 100}, 0)`)
clear.append("rect")
.attr("width", 100)
.attr("height", 30)
.style("fill", "lightgray")
.style("stroke", "#000")
clear.append("ellipse")
.attr("cx", -width/2)
.attr("cy", 200)
.attr("rx", 200)
.attr("ry", 200)
.style("fill", "lightgray")
.style("stroke-width", "0")
clear.append("ellipse")
.attr("cx", -width/2)
.attr("cy", 200)
.attr("rx", 180)
.attr("ry", 180)
.style("fill", "white")
.style("stroke-width", "0")
clear.append("text")
.style("fill", "#000")
.text("Clear Points")
.attr("dy", 19)
.attr("dx", 50)
.style("text-anchor", "middle")
.style("font", "14px sans-serif")
.style("pointer-events", "none")
const linePath = g.append("path")
.style("stroke", '#000')
.style("stroke-opacity", '0.5')
.style("stroke-width", 20)
.style("stroke-linejoin", "round")
.style("stroke-linecap", "round")
.style("fill", "none")
.datum(data)
.attr("d", line);
const circles = g.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 5)
.on("mouseenter", mouseenter)
.on("mouseleave", mouseleave)
.call(d3.drag()
.on("drag", dragged));
rect.on("click",function() {
const container = d3.mouse(this)
data.push({x: container[0], y: container[1]});
viewof dataset.value = data;
g.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 5)
.on("mouseenter", mouseenter)
.on("mouseleave", mouseleave)
.call(d3.drag()
.on("drag", dragged));
linePath.datum(data)
.attr("d", line);
})
clear.select("rect").on("click",function() {
data = [];
viewof dataset.value = data
svg.selectAll("circle").remove()
linePath.datum(data)
.attr("d", "none");
})
function mouseenter() {
d3.select(this).style("fill", "red")
}
function mouseleave() {
d3.select(this).style("fill", "#000")
}
function dragged() {
const thisDatum = data.filter(d => d.x == d3.select(this).attr("cx")
& d.y == d3.select(this).attr("cy"));
thisDatum[0].x = d3.event.x;
thisDatum[0].y = d3.event.y;
d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);
linePath.datum(data)
.attr("d", line);
viewof dataset.value = data;
}
return svg.node()
}
phrase = "..varvara."
{
const svg = d3.select(createSVG(width, height))
const g = svg.append("g")
.attr("transform",`translate(${margin.left}, ${margin.top})`)
let lenp = phrase.length
for (let i = 0; i< lenp; i++) {
let scale = lenp/(3*i+lenp)
console.log(scale)
g.append("path")
.datum(JSON.parse(alpha[phrase[i]]))
.attr("transform",`scale(${scale})translate(${i*80}, ${i*60})`) // translate(${i*350}, ${i*200})
.attr("d", line)
.style("stroke-linejoin", "round")
.style("stroke-linecap", "round")
.style("stroke", '#000')
.style("stroke-width", 1.3*(lenp-i))
.style("stroke-opacity", 0.5)
.style("fill", "none")
}
return svg.node()
}
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, width])
.style("font", "10px sans-serif");
const pt = svg.append("path").node()
var arc = d3.arc();
let ar = arc({
innerRadius: 10,
outerRadius: 100,
startAngle: 0,
endAngle: Math.PI / 2,
x: 100,
y: 100
});
let path = pt.setAttribute("d", ar.toString())
return svg.node()
}
alpha = ({})
alpha.a = `[{"x":161.99977111816406,"y":142.99998092651367},{"x":156.9998321533203,"y":158.00006866455078},{"x":152.9996337890625,"y":177.0002155303955},{"x":150.99961853027344,"y":198.0002555847168},{"x":149.99960327148438,"y":214.0002317428589},{"x":151.99961853027344,"y":235.00013732910156},{"x":157.0005340576172,"y":251.0001983642578},{"x":163.00064086914062,"y":270.00025177001953},{"x":170.00059509277344,"y":287.00031566619873}]`
alpha["."] = `[{"x":337.0003967285156,"y":10.999531745910645},{"x":215.99998474121094,"y":56.999752044677734},{"x":151.9996795654297,"y":189.00025177001953},{"x":209.99981689453125,"y":338.00074005126953},{"x":347.0002746582031,"y":388.0008239746094},{"x":480.000732421875,"y":332.00054931640625},{"x":532.0018920898438,"y":192.99998474121094},{"x":464.0016174316406,"y":52.99949264526367},{"x":337.0011901855469,"y":9.999344825744629}]`
alpha["?"] = `[{"x":298.000244140625,"y":13.999542236328125},{"x":215.99998474121094,"y":56.999752044677734},{"x":151.9996795654297,"y":189.00025177001953},{"x":209.99981689453125,"y":338.00074005126953},{"x":347.0002746582031,"y":388.0008239746094},{"x":480.000732421875,"y":332.00054931640625},{"x":532.0018920898438,"y":192.99998474121094},{"x":464.0016174316406,"y":52.99949264526367},{"x":369.0013122558594,"y":12.999354362487793}]`
alpha[".."] = `[{"x":344.0003967285156,"y":391.0008544921875},{"x":469.00086975097656,"y":345.00072479248047},{"x":531.0009613037109,"y":208.00032806396484},{"x":477.00074768066406,"y":67.99980926513672},{"x":338.000244140625,"y":10.999531745910645},{"x":198.99978637695312,"y":74.9996566772461},{"x":153.00054931640625,"y":207.0000457763672},{"x":210.00076293945312,"y":340.0004653930664},{"x":344.0012512207031,"y":392.00066661834717}]`
alpha["!"] = `[{"x":386.00054931640625,"y":386.0008239746094},{"x":472.0009002685547,"y":340.00069427490234},{"x":531.0009613037109,"y":208.00032806396484},{"x":477.00074768066406,"y":67.99980926513672},{"x":338.000244140625,"y":10.999531745910645},{"x":198.99978637695312,"y":74.9996566772461},{"x":153.00054931640625,"y":207.0000457763672},{"x":210.00076293945312,"y":340.0004653930664},{"x":300.0010986328125,"y":384.00063610076904}]`
alpha.b = `[{"x":542.0010681152344,"y":157.0000457763672},{"x":468.0009002685547,"y":57.999717712402344},{"x":348.0002899169922,"y":9.999650001525879},{"x":212.9998321533203,"y":61.999786376953125},{"x":151.99961853027344,"y":187.0001401901245},{"x":193.99977111816406,"y":319.0004577636719},{"x":335.00115966796875,"y":390.0006866455078},{"x":477.00169372558594,"y":334.0004348754883},{"x":538.0019226074219,"y":241.00013256072998}]`
alpha.c = `[{"x":349.00042724609375,"y":9.999544143676758},{"x":347.00047302246094,"y":10.999554634094238},{"x":199.99978637695312,"y":71.99986171722412},{"x":148.99961853027344,"y":186.00021743774414},{"x":151.99961853027344,"y":187.0001401901245},{"x":147.99961853027344,"y":188},{"x":204.00070190429688,"y":331.00047302246094},{"x":353.0012664794922,"y":389.00061798095703},{"x":355.00128173828125,"y":391.00063610076904}]`
alpha.d = `[{"x":349.00042724609375,"y":9.999544143676758},{"x":347.00047302246094,"y":10.999554634094238},{"x":477.00074768066406,"y":63.999831199645996},{"x":532.0009155273438,"y":198.00026321411133},{"x":532.0009155273438,"y":197.0001859664917},{"x":533.0009613037109,"y":200.00003051757812},{"x":484.0016784667969,"y":329.00047302246094},{"x":353.0012664794922,"y":389.00061798095703},{"x":355.00128173828125,"y":391.00063610076904}]`
alpha.f = `[{"x":556.0011291503906,"y":195.0001678466797},{"x":468.0009002685547,"y":57.999717712402344},{"x":348.0002899169922,"y":9.999650001525879},{"x":212.9998321533203,"y":61.999786376953125},{"x":151.99961853027344,"y":187.0001401901245},{"x":193.99977111816406,"y":319.0004577636719},{"x":335.00115966796875,"y":390.0006866455078},{"x":477.00169372558594,"y":334.0004348754883},{"x":518.0018615722656,"y":203.00001049041748}]`
alpha.g = `[{"x":533.0010681152344,"y":193.0001678466797},{"x":468.0009002685547,"y":57.999717712402344},{"x":348.0002899169922,"y":9.999650001525879},{"x":221.99986267089844,"y":86.99987030029297},{"x":151.99961853027344,"y":187.0001401901245},{"x":212.99984741210938,"y":304.0003967285156},{"x":335.00115966796875,"y":390.0006866455078},{"x":477.00169372558594,"y":334.0004348754883},{"x":534.0019226074219,"y":191.99997997283936}]`
alpha.h = `[{"x":526.0010681152344,"y":147.00001525878906},{"x":468.0009002685547,"y":57.999717712402344},{"x":348.0002899169922,"y":9.999650001525879},{"x":161.99966430664062,"y":135.00005340576172},{"x":124.99952697753906,"y":187.0001401901245},{"x":157.99964904785156,"y":246.0001983642578},{"x":335.00115966796875,"y":390.0006866455078},{"x":477.00169372558594,"y":334.0004348754883},{"x":526.0018615722656,"y":246.00017833709717}]`
alpha.j = `[{"x":492.00103759765625,"y":85.99982452392578},{"x":429.0007781982422,"y":46.99968338012695},{"x":449.00062561035156,"y":13.999662399291992},{"x":228.9998779296875,"y":50.999759674072266},{"x":152.99962615966797,"y":184.00012493133545},{"x":193.99977111816406,"y":319.0004577636719},{"x":335.00115966796875,"y":390.0006866455078},{"x":477.00169372558594,"y":334.0004348754883},{"x":534.0019226074219,"y":202.0000410079956}]`
alpha.l = `[{"x":527.0011291503906,"y":160.0000762939453},{"x":462.0009002685547,"y":49.999691009521484},{"x":283.0000457763672,"y":32.999728202819824},{"x":235.99989318847656,"y":12.99963092803955},{"x":152.99962615966797,"y":184.00012493133545},{"x":193.99977111816406,"y":319.0004577636719},{"x":335.00115966796875,"y":390.0006866455078},{"x":477.00169372558594,"y":334.0004348754883},{"x":534.0019226074219,"y":202.0000410079956}]`
alpha.m = `[{"x":531.0011901855469,"y":195.00018310546875},{"x":485.00099182128906,"y":72.99977111816406},{"x":347.00025939941406,"y":10.999652862548828},{"x":194.999755859375,"y":84.99987411499023},{"x":152.99962615966797,"y":225.00027751922607},{"x":166.9996795654297,"y":322.0004577636719},{"x":270.00091552734375,"y":377.00062561035156},{"x":458.0016632080078,"y":350.00049591064453},{"x":532.0019226074219,"y":195.00002574920654}]`
alpha.n = `[{"x":520.0011901855469,"y":161.0000762939453},{"x":490.00099182128906,"y":48.999691009521484},{"x":363.0003204345703,"y":17.999677658081055},{"x":202.99978637695312,"y":88.9998893737793},{"x":152.99962615966797,"y":225.00027751922607},{"x":211.99981689453125,"y":339.00048828125},{"x":342.0011901855469,"y":388.0006561279297},{"x":471.0017547607422,"y":319.00037384033203},{"x":522.0018615722656,"y":159.99990367889404}]`
alpha.p = `[{"x":556.0013122558594,"y":224.0002899169922},{"x":475.00096130371094,"y":64.9997444152832},{"x":336.00022888183594,"y":9.999649047851562},{"x":192.999755859375,"y":80.9998664855957},{"x":152.99962615966797,"y":225.00027751922607},{"x":216.9998321533203,"y":343.00048828125},{"x":342.0011901855469,"y":389.0006561279297},{"x":470.0017547607422,"y":341.0004348754883},{"x":558.0019836425781,"y":191.99999523162842}]`
alpha.r = `[{"x":482.00091552734375,"y":114.9999008178711},{"x":519.0010833740234,"y":71.99976348876953},{"x":364.00035095214844,"y":9.999650001525879},{"x":212.9998321533203,"y":61.999786376953125},{"x":151.99961853027344,"y":187.0001401901245},{"x":193.99977111816406,"y":319.0004577636719},{"x":335.00115966796875,"y":390.0006866455078},{"x":477.00169372558594,"y":334.0004348754883},{"x":532.0018615722656,"y":206.00001049041748}]`
alpha.s = `[{"x":556.0011291503906,"y":172.00010681152344},{"x":464.0009002685547,"y":82.99980163574219},{"x":364.00035095214844,"y":9.999650001525879},{"x":212.9998321533203,"y":61.999786376953125},{"x":151.99961853027344,"y":187.0001401901245},{"x":193.99977111816406,"y":319.0004577636719},{"x":335.00115966796875,"y":390.0006866455078},{"x":517.0018463134766,"y":316.00037384033203},{"x":507.0017395019531,"y":173.99990367889404}]`
alpha.t = `[{"x":513.0010070800781,"y":122.99993133544922},{"x":401.0006561279297,"y":1.9995287656784058},{"x":394.0004425048828,"y":28.999717712402344},{"x":243.9999542236328,"y":37.99970626831055},{"x":151.99961853027344,"y":187.0001401901245},{"x":193.99977111816406,"y":319.0004577636719},{"x":335.00115966796875,"y":390.0006866455078},{"x":484.00172424316406,"y":326.00040435791016},{"x":532.0018615722656,"y":189.9999647140503}]`
alpha.z = `[{"x":532.0010681152344,"y":178.00010681152344},{"x":468.0009002685547,"y":57.999717712402344},{"x":348.0002899169922,"y":9.999650001525879},{"x":212.9998321533203,"y":61.999786376953125},{"x":150.99961853027344,"y":221.00024700164795},{"x":225.9998779296875,"y":330.00048828125},{"x":224.00076293945312,"y":374.00062561035156},{"x":465.0016632080078,"y":346.00049591064453},{"x":533.0018615722656,"y":175.99990367889404}]`
alpha.e = `[{"x":269.0001220703125,"y":24.999588012695312},{"x":251.00015258789062,"y":33.9996337890625},{"x":230.99989318847656,"y":45.99977397918701},{"x":212.9998321533203,"y":61.999786376953125},{"x":190.999755859375,"y":84.9997968673706},{"x":177.99972534179688,"y":104.99972534179688},{"x":166.0005645751953,"y":126.99976348876953},{"x":159.00059509277344,"y":146.99980926513672},{"x":154.00059509277344,"y":170.99988842010498}]`
alpha.v = `[{"x":556.0011291503906,"y":195.0001678466797},{"x":468.0009002685547,"y":57.999717712402344},{"x":348.0002899169922,"y":9.999650001525879},{"x":212.9998321533203,"y":61.999786376953125},{"x":151.99961853027344,"y":187.0001401901245},{"x":193.99977111816406,"y":319.0004577636719},{"x":335.00115966796875,"y":390.0006866455078},{"x":477.00169372558594,"y":334.0004348754883},{"x":510.0018310546875,"y":138.99978160858154}]`
alpha.u =
alpha.o =
alpha.i =
alpha.y = alpha.i
alpha.w = alpha.v
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.
