import {desiredData} from "@spepechen/dataprep"
desiredData
numberOfFlowers = 50
//opacity = 0.06
opacity = 0.06
strokeWidth = 0.2
dummyData
// sin cos
magicNumber = 2.7
//outerRadius_ = 160
outerRadius_ = 180
rScaleNum = 3.8
regions = desiredData[0].map(d=>d.region)
regions
import {Scrubber} from "@mbostock/scrubber"
viewof i = Scrubber(Array.from({length: desiredData.length}, (_, i) => i), {delay: 100}, {autoplay: false})
{
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg
.append('g')
.selectAll("ellipse")
.data(desiredData[i])
.join("ellipse")
.attr("cx", 0)
.attr("cy", 0)
.attr("ry", d => rScale(d.deaths))
.attr("rx", d => rScale(d.deaths)/2)
.attr("class", "rotate")
.attr("fill", d => colorByContinent3(d.region, 0.6))
.attr("stroke", "white")
.attr("stroke-width", strokeWidth)
.attr('transform', function(d, i) {
var rx = Math.cos(xcos_(i)) * outerRadius_;
var ry = Math.sin(ysin_(i)) * outerRadius_;
return `translate(${rx},${ry})
rotate(${xcos_(i) * 180 /Math.PI + 90})
scale(${0.8})`;
})
return svg.node()
}
arr__ = [[0], [0,1], [0,1,2]]
arr_sample = [[50], [50,51], [50,51,52]]
arrCreator(3)
arr = arrCreator(desiredData.length)
desiredData.length
function arrInner(n) {
let inner= []
for(let i=0; i < n; i++){
inner.push(i)
}
return inner
}
function arrCreator(n) {
let outer= []
for(let i=0; n >= i; i++){
outer.push(arrInner(i))
}
return outer.splice(1, outer.length - 1)
}
{
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
// for(let i=0; i < arr.length; i++){
for(let j=0; j < arr[s].length; j++){
svg
.append('g')
.selectAll("ellipse")
.data(desiredData[arr[s][j]])
.join("ellipse")
.attr("cx", 0)
.attr("cy", 0)
.attr("ry", d => rScale(d.deaths))
.attr("rx", d => rScale(d.deaths)/2)
.attr("class", "rotate")
.attr("fill", d => colorByContinent3(d.region, 0.06))
.attr("stroke", "white")
.attr("stroke-width", strokeWidth)
.attr('transform', function(d, i) {
var rx = Math.cos(xcos_(i)) * outerRadius_;
var ry = Math.sin(ysin_(i)) * outerRadius_;
return `translate(${rx},${ry})
rotate(${xcos_(i) * 180 /Math.PI + 90})
scale(${0.8})`;
})
}
// }
return svg.node()
}
{
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
for(let i=0; i < dummyData.length; i++){
svg
.append('g')
.selectAll("ellipse")
// .data(dummyData[i])
.data(desiredData[i])
.join("ellipse")
.attr("cx", 0)
.attr("cy", 0)
.attr("ry", d => rScale(d.deaths))
.attr("rx", d => rScale(d.deaths)/2)
.attr("class", "rotate")
.attr("fill", d => colorByContinent3(d.region, 0.1))
.attr("stroke", "white")
.attr("stroke-width", strokeWidth)
.attr('transform', function(d, i) {
var rx = Math.cos(xcos_(i)) * outerRadius_;
var ry = Math.sin(ysin_(i)) * outerRadius_;
return `translate(${rx},${ry})
rotate(${xcos_(i) * 180 /Math.PI + 90})
scale(${0.8})`;
})
}
return svg.node()
}
dummyData = new Array(numberOfFlowers)
{
for(let i=0; i< dummyData.length; i++){
let r = [
{region: "Oceania"},
{region: "Central America and the Caribbean"},
{region: "South America"},
{region: "Sub-saharan Africa"},
{region: "Northern Africa & Middle East"},
{region: "North America"},
{region: "Europe"},
{region: "Asia"},
]
r.forEach(element => {element.deaths = Math.floor((Math.random()*5000 ) + 1)})
dummyData[i] = r;
}
return dummyData
}
dummyData
sampleData = FileAttachment("container.json").json()
sampleData.map( d => parseInt(d.deaths))
https://stackoverflow.com/questions/46443710/placing-elements-on-circle-line-and-rotating-them-towards-the-center-using-d3-js
xcos_ = d3.scaleLinear()
.domain([0, sampleData.length])
.range([Math.PI * 0, Math.PI * magicNumber]);
//.range([Math.PI * 0, Math.PI * 1.98]);
ysin_= d3.scaleLinear()
.domain([0, sampleData.length])
.range([Math.PI * 0, Math.PI * magicNumber]);
//.range([Math.PI * 0, Math.PI * 1.98]);
//outerRadius_ = 160
// outerRadius_ = 400
rScale(4000)
rScale= d3.scaleLog()
.domain([minDeaths, maxDeaths])
.range([0, height / rScaleNum])
minDeaths = parseInt(sampleDataSorted[0].deaths)
maxDeaths = parseInt(sampleDataSorted[sampleDataSorted.length -1].deaths)
sampleDataSorted = sampleData.sort(function(a, b) {
return a.deaths - b.deaths;
});
data = d3.range(7)
d3.schemePastel1.map(d => opacityTweak(d,opacity))
function colorByContinent2(expr){
var c = d3.schemePastel1.map(d => opacityTweak(d,opacity))
switch (expr) {
case 'Asia':
return c[0]
break;
case 'Europe':
return c[1]
break;
case 'North America':
return c[2]
break;
case 'Northern Africa & Middle East':
return c[3]
break;
case 'Sub-saharan Africa':
return c[4]
break;
case 'South America':
return c[5]
break;
case 'Central America and the Caribbean':
return c[6]
break;
case 'Oceania':
return c[7]
break;
default:
return c[8]
}}
d3.schemePastel1.map(d => opacityTweak(d,opacity))
color = d3.scaleOrdinal().domain(data)
.range(d3.schemePastel1.map(d => opacityTweak(d,opacity)));
d3.lch('green')
function opacityTweak(color, number) {
const {l, c, h, opacity} = d3.lch(color);
return d3.lch(l, c, h,opacity* number);
}
xcos = d3.scaleLinear()
.domain([0, data.length])
.range([Math.PI * 0, Math.PI * 1.97]);
ysin = d3.scaleLinear()
.domain([0, data.length])
.range([Math.PI * 0, Math.PI * 1.97]);
outerRadius = 120;
html`
<style type="text/css">
.rotate {
transform-box: fill-box;
transform-origin: center;
}
// #svg {
// background-color: red;
// }
</style>
`
d3.range(5)
height = 700
//width = 200
margin = 50
https://docs.aspose.com/svg/net/drawing-basics/svg-path-data/
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.
