DOM.download(() => serialize(chart), undefined, "Save as SVG")
serialize = {
const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";
return function serialize(svg) {
svg = svg.cloneNode(true);
const fragment = window.location.href + "#";
const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);
while (walker.nextNode()) {
for (const attr of walker.currentNode.attributes) {
if (attr.value.includes(fragment)) {
attr.value = attr.value.replace(fragment, "#");
}
}
}
svg.setAttributeNS(xmlns, "xmlns", svgns);
svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(svg);
return new Blob([string], {type: "image/svg+xml"});
};
}
radarLine = d3.lineRadial()
.curve(d3[curveSelect])
.radius(d => rScale(d))
.angle((d, i) => i * angleSlice)
rScale = d3.scaleLinear()
.domain([0, maxValue])
.range([0, radius])
color = d3.scaleOrdinal()
.range(["#d3d3d3", "#666666", "#A80404"])
//"#E2A499"
data = [
[// Bread no add.
{axis:"Overall",value:4},
{axis:"Dough Extensibility",value:4},
{axis:"Crust Color/Texture",value:4},
{axis:"Crumb Texture",value:4},
{axis:"Volume",value:4},
{axis:"Overall Flavor",value:4},
{axis:"Overall Aroma",value:4},
{axis:"Sour taste",value:3},
{axis:"Sweet taste",value:3},
],
[// Bread + add.
{axis:"Overall",value:7},
{axis:"Dough Extensibility",value:7},
{axis:"Crust Color/Texture",value:7},
{axis:"Crumb Texture",value:7},
{axis:"Volume",value:7},
{axis:"Overall Flavor",value:7},
{axis:"Overall Aroma",value:7},
{axis:"Sour taste",value:3.5},
{axis:"Sweet taste",value:3.5},
],
[// Leaven
{axis:"Overall",value:9},
{axis:"Dough Extensibility",value:9},
{axis:"Crust Color/Texture",value:9},
{axis:"Crumb Texture",value:9},
{axis:"Volume",value:9},
{axis:"Overall Flavor",value:9},
{axis:"Overall Aroma",value:9},
{axis:"Sour taste",value:5},
{axis:"Sweet taste",value:5},
]
];
data1 = FileAttachment("data-2.json").json()
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.
