Public
Edited
Nov 20, 2024
chart = {
const width = 900,//pixel size of the map
height = 1200;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()//projection system used
.fitSize([width, height], coopborder);
var path1 = d3.geoPath().projection(projection);//need one of these for each line layer from qgis
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var path4 = d3.geoPath().projection(projection);
var path5 = d3.geoPath().projection(projection);
var path6 = d3.geoPath().projection(projection);
var path7 = d3.geoPath().projection(projection);
var g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type
var c = svg.selectAll("circle")//for circles
var p = svg.selectAll("polyline")//for polylines from rhino
var t = svg.selectAll("text")
//static lines from qgis
staticLines(path1, coopborder.features,"none",'1','1',"rgb(0,0,0)")
staticLines(path2, qgistoobservable2.features,"none",'1','.25',"rgb(0,0,0)")
function staticLines(path, data, sfill, sOpac, sW, stroke){
g.enter().append("path")
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", sfill)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
// Define the color scale
const colorScale = d3.scaleLinear()
.domain([0, 255]) // Input range (adjust based on your data)
.range(["blue", "red"]); // Gradient from blue to red (customize colors as needed)
// Data binding and rendering
g.selectAll("path")
.data(qgistoobservable2.features) // Bind data
.enter() // Enter selection
.append("path") // Append path elements
.attr('class', 'outlines')
.attr("d", path2) // Define the path
.style("fill", fillColor3) // Use the fill color function
.style('stroke-opacity', '1')
.style("stroke-width", '0')
.style("stroke", 'none');
// Fill color function using the scale
function fillColor3(d, i) {
// Calculate the year difference
var year = d.properties.Asbestos_8 !== undefined ? 2024 - d.properties.Asbestos_8 : 0;
// Ensure year is clamped within 0-255 for the scale
year = Math.min(255, Math.max(0, Math.pow(year, 1.2)));
// Use the color scale to generate the gradient
const color = colorScale(year);
console.log(`Year: ${year}, Color: ${color}`); // Debug output
return color; // Return color from the scale
}
return svg.node();
}
coopborder = FileAttachment("coopborder.geojson").json()
qgistoobservable2 = FileAttachment("QGIStoOBSERVABLE2.geojson").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.
