Published
Edited
Jul 15, 2021
1 star
chart()
function chart(){
const ssvg = d3.create("svg")
.attr("width", dimensions.width+margin.right+margin.left)
.attr("height", dimensions.height+margin.top+margin.bottom)
.style("background-color", "floralwhite");
for (let i=0; i < beandata.length; i++ ){
let germBegin= degFrom360(beandata[i]["germinationMin"],totalBean["germination"]);
let germEnd =degFrom360(beandata[i]["germinationEnd"],totalBean["germination"]);
let tempBegin= degFrom360(beandata[i]["tempMin"],totalBean["tempMax"]);
let tempEnd =degFrom360(beandata[i]["tempMax"],totalBean["tempMax"]);
let phBegin= degFrom360(beandata[i]["phMin"],totalBean["phMax"]);
let phEnd =degFrom360(beandata[i]["phMax"],totalBean["phMax"]);
let harvestBegin= degFrom360(beandata[i]["harvestMin"],totalBean["harvestMax"]);
let harvestEnd =degFrom360(beandata[i]["harvestMax"],totalBean["harvestMax"]);
//background data
arc(ssvg, 0,360,120*1.15**0,true,i);
arc(ssvg, 0,360,120*1.15**1.1,true,i);
arc(ssvg, 0,360,120*1.15**2.1, true,i)
arc(ssvg, 0,360,120*1.15**3, true,i)
//highlighted data
arc(ssvg, phBegin,phEnd,120*1.15**0,false,i);
arc(ssvg, germBegin,germEnd,120*1.15**1.1,false,i);
arc(ssvg, tempBegin,tempEnd,120*1.15**2.1,false,i);
arc(ssvg, harvestBegin,harvestEnd,120*1.15**3,false,i);
}
console.log(degFrom360(beandata[0]["germinationMin"],totalBean["germination"]));
// degFrom360(beandata[i]["germinationMax"],totalBean["germination"])
//highlighted data
// arc(ssvg, 20,270,120);
// arc(ssvg, 20,270,120*1.25);
// arc(ssvg, -20,10,120*1.25*1.2);
return ssvg.node();
}
function degFrom360(numerator, denominator){
return (numerator/denominator)*360
}
arc = (ssvg, beginDegree, endDegree, radius,outline, position) => {
const arc = d3.arc()
.innerRadius(radius)
.outerRadius(radius)
// .startAngle(0*beginDegree*Math.PI/2)
// .endAngle(Math.PI/2);
.startAngle(beginDegree*Math.PI/180)
.endAngle(endDegree*Math.PI/180);
console.log(arc());
ssvg
.append("path")
.attr("d",arc())
.attr("transform",
`translate(${position%2==0? dimensions.width/4 : 3*dimensions.width/4},${position-1>0? 600 : 200})`)
.style("stroke-width", outline ? "1px":"5px")
.style("stroke", outline ? "gray":"red");
}
totalBean = ({"germination": 14, "tempMax": 100, "phMax": 15, "harvestMax":100})
beandata = [
{"type":"Green Bean", "germinationMin":8, "germinationEnd":10, "tempMin":70, "tempMax":80, "phMin":6.0, "phMax":6.2, "harvestMin": 50, "harvestMax":65},
{"type":"Fava Bean", "germinationMin":7, "germinationEnd":14, "tempMin":60, "tempMax":80, "phMin":6.2, "phMax":7.8, "harvestMin": 75, "harvestMax":90},
{"type":"Lima Bean", "germinationMin":8, "germinationEnd":10, "tempMin":70, "tempMax":80, "phMin":6.0, "phMax":6.8, "harvestMin": 60, "harvestMax":75},
{"type":"Garbanzo Bean", "germinationMin":8, "germinationEnd":10, "tempMin":50, "tempMax":85, "phMin":6.0, "phMax":7.0, "harvestMin": 90, "harvestMax":100},
]
d
= ({width:1000, height:600})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
