projection = d3.geoMercator().scale(100).center([-0.1,52 ]).translate([width/3, height/2])//.scale([100]);
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]) //975, 610
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
svg.append("path")
.datum(siroedd_cymru_mesh)
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("d", path);
const sir = svg.append("g")
.attr("stroke", "#000")
.selectAll("path")
.data(topojson.feature(siroedd_cymru,siroedd_cymru.objects.siroedd_cymru).features.filter(d => data.has(d.properties.CTYUA21CD)))
.join("path")
.attr("vector-effect", "non-scaling-stroke")
.attr("d", path)
.attr("fill", d => color(data.get(d.properties.CTYUA21CD).siaradwyr))
.attr("transform", d => transform(d));
sir.append("title")
.text(d => `${d.properties.CTYUA21NMW}
${format(data.get(d.properties.CTYUA21NMW))}`);
//${format(data.get(d.id)[0])} in 2008
return Object.assign(svg.node(), {
update(year) {
sir.transition()
.duration(750)
.attr("fill", d => color(data.get(d.properties.CTYUA21NMW)))
.attr("transform", d => transform(d,year));
}});
};
function transform(d,year) {
const [x, y] = path.centroid(d);
return `
translate(${x},${y})
scale(${Math.sqrt(data.get(d.properties.CTYUA21CD).siaradwyr)})
translate(${-x},${-y})
`;}
color = d3.scaleSequential(d3.extent(siaradwyr_sir), d3.interpolateReds).nice()
d3.extent(siaradwyr_sir)
siaradwyr_sir = Object.values((Object.fromEntries(data))).map(d=>d.siaradwyr)
data = new Map(ts033.map(d => [d["geography code"], d]))
data.has("W06000001")
data.get("W06000001").siaradwyr
d3.geoBounds(siroedd_cymru.objects)
Object.keys(siroedd_cymru.objects)
siroeddMesh
topojson.feature(siroedd_cymru, siroedd_cymru.objects.siroedd_cymru).features.filter(d => data.has("W06000003"))
topojson.feature(siroedd_cymru, siroedd_cymru.objects.siroedd_cymru).features.filter(d=>d.properties.CTYUA21CD=="W06000003")//
//((d) => ({properties['CTYUA21CD']:d["W06000001"]})) //.filter(?.properties.CTYUA21CD="W06000001") //filter(map(d=>//({...d,properties: d.geometry.CTYUA21CD})) //.map(d=>({...d, CTYUA21CD: d[`geography code`]}))
topojson.feature(siroedd_cymru, siroedd_cymru.objects.siroedd_cymru).features.filter(d=>d.properties.CTYUA21CD=="W06000003")[0].geometry
topojson.feature(siroedd_cymru, siroedd_cymru.objects.siroedd_cymru).features.filter(d=>d.properties.CTYUA21CD=="W06000003")
path.centroid(topojson.feature(siroedd_cymru,siroedd_cymru.objects.siroedd_cymru).features.filter(d=>d.properties.CTYUA21CD=="W06000003")[0].geometry)
path = d3.geoPath().projection(projection);
height=610
width=975
format = d3.format(".1%")
topojson = require("topojson-client@3")
import {legend} from "@d3/color-legend"
topojson.feature(siroedd_cymru,siroedd_cymru.objects.siroedd_cymru)
census2021-ts033-utla.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
ts033 = census2021Ts033Utla.map(d=>({...d, CTYUA21CD: d[`geography code`],siaradwyr:d[`Welsh speaking ability: Can speak Welsh`] }))
census2021Ts033Utla[0]
import {siroeddMesh} from "@hywelmj/yn-gallu-siarad-cymraeg"
d3 = require("d3-geo@2","d3-scale@3", "d3-selection@2","d3-array@2", "d3-format@2","d3-scale-chromatic")
siroedd_cymru = FileAttachment("siroedd_cymru.json").json()
siroedd_cymru_mesh = topojson.mesh(siroedd_cymru,siroedd_cymru.objects.siroedd_cymru,(a, b) => a !== b)
siroedd_2023_01_02 = FileAttachment("siroedd_2023_01_02.json").json()
topojson.feature(siroedd_2023_01_02)
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.
