Public
Edited
Jul 27, 2023
3 stars
Insert cell
Insert cell
Legend(d3.scaleSequential(lDomain, d3.interpolateViridis), {
title: "Temperature (°F)"
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart2 = {
// Specify the chart’s dimensions.
const width = 928;
const height = width * 1.2;
const cx = width * 0.5; // adjust as needed to fit
const cy = height * 0.59; // adjust as needed to fit
const radius = Math.min(width, height) / 2 - 30;

// Create a radial tree layout. The layout’s first dimension (x)
// is the angle, while the second (y) is the radius.
const tree = d3.tree()
.size([Math.PI * rot, radius])
.separation((a, b) => (a.parent == b.parent ? 5 : 1.5) / a.depth);

// Sort the tree and apply the layout.
const root = tree(d3.hierarchy(rData)
.sort((a, b) => d3.ascending(a.data.name, b.data.name)));

// Creates the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-cx, -cy, width, height])
.attr("style", "width: 100%; height: auto; font: 10px sans-serif;");

// Gradients
let defs=svg.append("defs");
let gradient=defs.append("linearGradient")
.attr("id","svgGradient1")
.attr("x1","0%")
.attr("x2","0%")
.attr("y1","0%")
.attr("y2","100%");

gradient.append("stop")
.attr("class","start")
.attr("offset","0%")
.attr("stop-color","#6B8B01")
.attr("stop-opacity",1)
gradient.append("stop")
.attr("class","start")
.attr("offset","0%")
.attr("stop-color","#8EB24C")
.attr("stop-opacity",1)
.attr("offset", "61%")
gradient.append("stop")
.attr("class","end")
.attr("offset","100%")
.attr("stop-color","#E6D091")
.attr("stop-opacity",1);

let gradient2=defs.append("linearGradient")
.attr("id","svgGradient2")
.attr("x1","0%")
.attr("x2","0%")
.attr("y1","0%")
.attr("y2","100%");

gradient2.append("stop")
.attr("class","start")
.attr("offset","0%")
.attr("stop-color","#015630")
.attr("stop-opacity",1)
gradient2.append("stop")
.attr("class","start")
.attr("offset","0%")
.attr("stop-color","#11753D")
.attr("stop-opacity",1)
.attr("offset", "33.7%")
gradient2.append("stop")
.attr("class","start")
.attr("offset","0%")
.attr("stop-color","#91B552")
.attr("stop-opacity",1)
.attr("offset", "95%")
gradient2.append("stop")
.attr("class","end")
.attr("offset","100%")
.attr("stop-color","#E3E2E8")
.attr("stop-opacity",1);


// Append links.
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#91B552")
.attr("stroke-opacity", 0.6)
.attr("stroke-width", 1.5)
.selectAll()
.data(root.links())
.join("path")
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y));

// Append nodes.
svg.append("g")
.selectAll()
.data(root.descendants())
.join("circle")
//.join("path")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`)
.style("stroke", d => d.data.Weight > 50 ? "url(#svgGradient1)" : "url(#svgGradient2)")
.attr("stroke-width", 3)
.attr("fill", "None")
.attr("r", d => radScale2(d.data.Weight))

return svg.node();
}
Insert cell
import {Legend, Swatches} from "@d3/color-legend"
Insert cell
colorScale = d3.scaleSequential(lDomain, d3.interpolateYlGn)
Insert cell
opacityScale = d3.scalePow(lDomain, opacityRange)
Insert cell
opacityRange = [0.3, 0.7]
Insert cell
radScale = d3.scalePow().domain(lDomain).range(radRange);
Insert cell
radScale2 = d3.scalePow().domain(lDomain).range(radRange);
Insert cell
radRange = [n/3, n/1.5]
Insert cell
halfPoint = (lDomain[0] + lDomain[1])/2
Insert cell
wDomain = d3.extent(botData.map(row => row.Weight));
Insert cell
Insert cell
Insert cell
Insert cell
rData = buildData2(botData)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
wKeys = ["WT", "EL-KD#10", "EL-OE#16"]
Insert cell
lKeys = [1, 2, 3]
Insert cell
pKeys = ["Root", "Shoot"]
Insert cell
topData = FileAttachment("hormone-expression@3.csv").csv({typed: true})
Insert cell
botData = FileAttachment("root-shoot-weight.csv").csv({typed: true})
Insert cell

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.
Learn more