chart = {
const svg = d3
.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
const projection = d3.geoAlbers().rotate([126, -10]);
// .center([1, 43])
// .parallels([51, 60])
// .scale(2000)
// .translate([960 / 2, 600 / 2]);
projection.fitSize(
[960, 500],
topojson.feature(health, health.objects.BCHA_HEALTH_AUTHORITY_BNDRY_SP)
);
const path = d3.geoPath().projection(projection);
const color = d3.scaleOrdinal(d3.schemeCategory10).domain([2, 361]);
// .range(d3.interpolatePiYG);
// var data = {
// resource_id: '726e54aa-f403-42d2-90b1-72c9a8c8e84f', // the resource id
// limit: 5000
// };
// $.ajax({
// url: 'https://catalogue.data.gov.bc.ca/api/action/datastore_search',
// data: data,
// dataType: 'json',
// success: function(data) {
// var reg_dat = data.result.records
var feat = topojson.feature(bc, bc.objects.rd).features;
// color3
//everything happens in here
svg
.append("g")
.selectAll("path")
.data(
topojson.feature(health, health.objects.BCHA_HEALTH_AUTHORITY_BNDRY_SP)
.features
)
.enter()
.append("path")
.attr("fill", d => color(d.properties.HLTH_AUTHORITY_CODE))
.attr("d", path);
svg
.append("path")
.datum(topojson.mesh(bc, bc.objects.rd, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "none")
.attr("stroke-linejoin", "round")
.attr("d", path);
// }
// });
return svg.node();
}
height
health = test
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.
