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)`);
const symbol = d3.symbol().type(d3.symbolCross).size(200);
const symbol2 = d3.symbol().type(d3.symbolsFill[2]).size(300);
/* 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")
g.append("path")
//.attr("d",d3.symbolsFill[0])
.attr("d",symbol())
.attr("transform", "translate(25,25)")
.style("fill","yellow")
.style("stroke","red")
.size(500)
g.append("path")
.attr("d",symbol2())
//.attr("d",symbol())
.attr("transform", "translate(50,50)")
.style("fill","orange")
.style("stroke","blue")
.size(500)
return svg.node();
}
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
{ const width = 600;
const height = 400;
const margin = { top: 30, bottom: 20, left: 50, right: 50 };
const div= htl.html`<div style='background-color:pink; border:5px dotted #000; overflow: visible'>dechrau<p>yma</p></div>`
const svg = d3
.select(div)
.append("div")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg
.append("g")
.attr("transform", "translate(20,20)");
const symbol2 = d3.symbol().type(d3.symbolsFill[2]).size(300);
g.append("path").attr("d",symbol2()).style("fill","red").style("stroke","blue").attr("transform", "translate(20,20)");
g.append("path").attr("d",symbol2()).style("fill","red").style("stroke","blue").attr("transform", "translate(30,30)");
return div;
}
inspect(chart)
{
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))
tair_a_phedair.filter(d=>d.awdurdod=='Ynys Môn'&d.cyfansoddiad=='Cartref cwpwl: Dau oedolyn neu fwy yn gallu siarad Cymraeg')
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.
