Public
Edited
Nov 6, 2023
1 fork
htl.html`<div>Helo
<svg> chart
</svg></div>`
tair_a_phedair[1]['canran']
scaleH(tair_a_phedair[1]['canran'])
scaleH = d3.scaleLinear()
.domain(d3.extent(tair_a_phedair,d=>d.canran))
.range([0, 100])
symbol2 = d3.symbol().type(d3.symbolCross).size(200)
symbol2(tair_a_phedair[0]["cyfansoddiad"])
tair_a_phedair[0]["cyfansoddiad"]
symbolType = d3.scaleOrdinal(d3.symbolsFill);
{const width = 600;
const height = 200;
const margin = { top: 20, bottom: 20, left: 50, right: 50 };
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("border", "1px dotted #000");
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}+10, ${margin.top}+10)`);
/* g.append("g")
.selectAll("circle")
.data([1])
.join("circle")
.attr("r", 30)
.attr("cx", 20)
.attr("cy", 30)
.style("fill", "blue")*/
g.append("g")
.selectAll("d")
.data([1])
.join("symbol")
.append("path")
.attr("d",d3.symbolsFill[0])
.attr("transform", "translate(25,25)")
.style("fill","yellow")
.style("stroke","red")
.size(500)
return svg.node();
}
{const html= htl.html`<div style='background-color:pink;overflow: visible'>dechrau<p>yma</p></div><svg width = 600
const height = 400;
const margin = { top: 20, bottom: 20, left: 50, right: 50 };
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("border", "1px dotted #000");
>
d3.select("div").selectAll("p").append("g").data([1]).join("symbol").attr("symbol",d3.symbolsFill[0]).style("fill","red").style("stroke","blue").size(100).attr("x",25).attr("y",50)</svg>`
return html;
}
symbol4 = d3.symbol().type((d) => symbolType(d.cyfansoddiad))
chart = {
// const width = 928;
//const height = 200;
const svg = d3.create("svg");
/* .attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
*/
// const g=svg.append("g");//.attr("transform","translate(25,25)")
const symbolType = d3.scaleOrdinal(d3.symbolsFill);
const symbol = d3.symbol().type((d) => symbolType(d.cyfansoddiad));
//const symbol = d3.symbol().type(d3.symbolCross).size(200);
const scaleH = d3.scaleLinear()
.domain(d3.extent(tair_a_phedair,d=>d.canran))
.range([0, 100]);
//const svg = d3.create('svg');
/*const chart = svg.append("g")
.attr("transform", "translate(25,125)")
const mark = svg.selectAll("g.mark")
.data(tair_a_phedair)
.join("g")
.attr("class","mark")
.attr("d",symbol(d=>d.cyfansoddiad))
.attr("transform", d => "translate(${scaleH(d.canran)}, 25)");
*/
//const g= svg.append("g");
svg.selectAll("symbol").data(tair_a_phedair)
.join("symbol")
.attr("d",symbol(d=>d.cyfansoddiad))
.attr("transform",d=>'translate(${scaleH(d.canran)}+10,0)')
.style("stroke","red")
.style("fill","yellow");
/*svg
.selectAll("circle")
.data(d3.range(18))
.join("circle")
.attr("cx", d => 30 + d * 50)
.attr("cy", height / 2)
.attr("r", d => Math.random() * 20)
.attr("fill", "#001b42");*/
return svg.node();
}
{
const label = d => d.data.node
const root = stratifyTree(getDOMTree(chart))
return graph(root, {label: label})
}
import {inspect} from "@observablehq/inspector"
import {stratifyTree, getDOMTree, graph} from "@pstuffa/svg-to-dom-tree"
d3.extent(tair_a_phedair,d=>d.canran)
tair_a_phedair.map(d=> symbol(d.cyfansoddiad))
symbol = d3.symbol().type(d3.symbolCross).size(200)
2021_tabl5.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
tair_a_phedair= _tabl5.filter(d=>d.canran != 'NA').map((d) =>({...d,canran: Number(d.canran)}))
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.
