Published
Edited
Oct 24, 2019
1 star
//scratch
Math.PI * Math.pow(200 - 196, 2)
(200 - 50) * (200 - 50) * Math.PI
Math.sqrt(400 * 400 - Math.PI * (100 * 100))
largestArea = Math.PI * 200 * 200
Math.sqrt(Math.PI * 200 * 200 - Math.PI * (50 * 50))
Math.sqrt((200 - 100) * (200 - 100)) * Math.PI
tau = Math.PI * 2
Math.sqrt(Math.PI * 200 * 200 - Math.PI * (196 * 196))
//end workspace
//Incomplete, here onwards...
html`<svg width=${width} height=400 viewBox="0 0 ${width} ${height}">${interpolatedCircles}</svg>`
{
let svgRef = DOM.svg(width, height);
let svg = d3
.select(svgRef)
.selectAll('circle')
.data(data20)
.join('circle')
.attr('cx', 200)
.attr('fill', 'black')
.attr('cy', 200)
.attr('r', (d, i) => topCircleInterpolation(i / data20.length));
return svgRef;
}
interpolatedCircles = d3
.ticks(0, 1, 4)
.map((d, i) => topCircleInterpolation(i / 5))
d3.ticks(0, -1, 4).map((d, i) => BottomCircleInterpolation(i / 5))
topCircleInterpolation = d3.interpolateString(
`<circle cx=200 cy=20 opacity=0.1 fill=black r=20></circle`,
`<circle cx=200 cy=180 opacity=0.1 fill=black r=180></circle>`
)
BottomCircleInterpolation = d3.interpolateString(
`<circle cx=200 cy=220 opacity=0.1 fill=black r=180></circle`,
`<circle cx=200 cy=380 opacity=0.1 fill=black r=20></circle>`
)
// CirclesSVG = data20.map(d => {
// let height = 400;
// let width = 400;
// let r = d.translateZ;
// let side = r * Math.tan(r / 200);
// //Math.sin(r / 200) * 200
// return html`<svg class="svg-circle" viewBox="${0} ${0} ${width} ${height}" style="background:transparent;
// width: ${400 - Math.sqrt(Math.pow(r, 2) * Math.PI)}px;
// height: ${400 - Math.sqrt(Math.pow(r, 2) * Math.PI)}px;
// -webkit-transform: rotateX(${rotateX +
// 90}deg) translateZ(${Math.sin(r / 200) * 200}px);
// "
// >
// <circle class="svg-circle-${d.className}" cx=${width / 2} cy=${height /
// 2} r=${200} ></circle>
// </svg>`;
// })
// // fill=${
// // turboColorScheme[Math.floor(colorSampleIndex())]
// //}
import {radio, slider, checkbox } from '@jashkenas/inputs'
// html`<div style="position:relative; margin:auto; overflow:hidden;height:500px"><img src="https://lh5.googleusercontent.com/Di5SOI4f-wjABMnOzs2_W-wkiPP8Ib5dQT-cg6CiFK_Ta_FHy4RmcMHbtIHjDrCEX_i_W-b5hNOeqA=w1680-h914" style="object-fit:contain;margin:-250px 0px;left:0%;width:100%;mix-blend-mode:multiply;z-index:1;opacity:0.3;display:flex;"/></div>`
import { CSS } from '@stroked/utils'
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.
