Published
Edited
Dec 17, 2021
Flooding Isolated
zips = FileAttachment("bangkok district.geojson").json()
waterbodies = FileAttachment("bangkok water bodies@1.geojson").json()
floodpoint = FileAttachment("bangkok flood point.geojson").json()
floodgate = FileAttachment("bangkok flood gate.geojson").json()
wasteQ = FileAttachment("Quantity Waste.geojson").json()
wasteC = FileAttachment("Waste Center.geojson").json()
housing = FileAttachment("community housing.geojson").json()
stream = FileAttachment("Stream Selection.geojson").json()
river = FileAttachment("River Outline.geojson").json()
river2 = FileAttachment("River Outline 2.geojson").json()
waterQ = FileAttachment("Water Quality.geojson").json()
leveltwo = FileAttachment("level_two.geojson").json()
levelfour = FileAttachment("level_four.geojson").json()
levelone = FileAttachment("level_one.geojson").json()
levelthree = FileAttachment("level_three.geojson").json()
river5 = FileAttachment("river 5.geojson").json()
d3 = require("d3@6")
chart2 =
Plot.plot({
color: {
type: "sequential",
range: ["rgb(195, 215, 225)", "rgb(25,117,164)"],
interpolate: "hcl" // uses d3.interpolateHcl
},
marks: [
Plot.cell([10, 50, 100, 200], {x: d => d, fill: d => d})
]
})
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-60, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 60, height - 60], zips);
var path = d3.geoPath().projection(projection);
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.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(zips.features) //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", "white")
.style('fill-opacity','.25')
.style("stroke-width", "1")
.style("stroke", "#ccc")
//insert flooding into map
g.selectAll("path4") //d3 geopath
//svg
//.selectAll('path')
.data(leveltwo.features) //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", "rgb(25,117,164)")
.style('fill-opacity','.3')
.style("stroke-width", "0")
.style("stroke", "ccc")
g.selectAll("path5") //d3 geopath
//svg
//.selectAll('path')
.data(levelthree.features) //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", "rgb(25,117,164)")
.style('fill-opacity','.55')
.style("stroke-width", "0")
.style("stroke", "ccc")
g.selectAll("path6") //d3 geopath
//svg
//.selectAll('path')
.data(levelone.features) //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", "rgb(25,117,164)")
.style('fill-opacity','.15')
.style("stroke-width", "0")
.style("stroke", "ccc")
g.selectAll("path7") //d3 geopath
//svg
//.selectAll('path')
.data(levelfour.features) //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", "rgb(25,117,164)")
.style('fill-opacity','.8')
.style("stroke-width", "0")
.style("stroke", "ccc")
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(river5.features) //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", "rgb(22, 71, 164)")
.style('fill-opacity','.8')
.style("stroke-width", "1")
.style("stroke", "black")
//insert floodpoints into map
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(floodpoint.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('cx',function(d) {return path.centroid(d)[0]})
.attr("cy", function(d) {return path.centroid(d)[1]})
.attr('r',3)
.attr("fill", "white")
.style('fill-opacity','1')
//insert floodgates into map
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(floodgate.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('cx',function(d) {return path.centroid(d)[0]})
.attr("cy", function(d) {return path.centroid(d)[1]})
.attr('r',3)
.attr("fill", "orange")
.style('fill-opacity','0.85')
//insert streams into map
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(stream.features) //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", "blue")
.style('fill-opacity','0')
.style("stroke-width", "0.6")
.style("stroke", "rgb(22, 71, 164)")
.on('mouseover', addBox)
.on('mouseout', removeBox)
//add stream tool tip
var tooltip = svg.append("g");
function addBox(event, d) {
var centroid = path.centroid(d);
tooltip.call(
callout,
`${d.properties.STREAM_}
${d.properties.LENGTH}`
);
tooltip.attr("transform", "translate(" + centroid + ")");
}
function removeBox(event, d) {
tooltip.call(callout,null)
}
return svg.node();
}
//yourData.map((element, index) => {
//})
callout = (g, value) => {
if (!value) return g.style("display", "none");
g
.style("display", null)
.style("pointer-events", "none")
.style("font", "10px sans-serif");
const path = g.selectAll("path")
.data([null])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = g.selectAll("text")
.data([null])
.join("text")
.call(text => text
.selectAll("tspan")
.data((value + "").split(/\n/))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i * 1.1}em`)
.style("font-weight", (_, i) => i ? null : "bold")
.text(d => d));
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
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.
