Published
Edited
Nov 24, 2021
map = {
const container = d3.select(
html`<div style="position:relative;">${tooltipTemplate}</div>`
);
const tooltipDiv = container.select(".tooltip");
const svg = d3.create('svg')
.attr('width',width/2)
.attr('height',400)
.attr('overflow','none')
const font = "14px 'Lato'"
svg.append("g")
.selectAll('path')
.data(land_geo.features)
.join('path')
.attr("d", path)
//.attr("fill", 'blue')
.attr("fill","#eee")
svg.append("foreignObject")
.classed('noselect', true).classed('shadow',true)
.attr("width",400)
.attr("height",400)
.attr("x",'65%')
.attr("y",'20%')
.append("xhtml:div")
.style("font",font)
.html("<p><h4>Immigrant Populations<br>in England 1330-1550</h4><br>University of York<br>englandsimmigrants.com</p>");
svg.append("text")
//.classed('noselect', true)
.attr("width",100)
.attr("height",50)
.attr("x", '15%')
.attr("y", '20%')
//.attr('fill','red')
//.append("text")
.style('font',font)
.style('font-weight','bold')
.text(Counties[0].counties)
.attr("font-size", "12")
.attr("color", "black")
// Count
svg.append("text")
//.classed('noselect', true)
.attr("width",100)
.attr("height",50)
.attr("x", '15%')
.attr("y", '25%')
.style('font',font)
//.attr('fill','red')
//.append("text")
.text("Total Persons: " + Counties[0].Count)
.attr("font-size", "12")
.attr("color", "black")
svg.append("text")
.attr("width",100)
.attr("height",50)
.attr("x", '32%')
.attr("y", '56%')
.attr('fill','#bbb')
.style('font',font)
.style('font-weight','normal')
.text('Ireland')
.attr("font-size", "12")
svg.append("text")
.attr("width",100)
.attr("height",50)
.attr("x", '46%')
.attr("y", '27%')
.attr('fill','#bbb')
.style('font',font)
.style('font-weight','normal')
.text('Scotland')
.attr("font-size", "12")
svg.append("text")
.attr("width",100)
.attr("height",50)
.attr("x", '38%')
.attr("y", '78%')
.attr('fill','#bbb')
.style('font',font)
.style('font-weight','normal')
.text('Wales')
.attr("font-size", "12")
svg.append("g")
.selectAll('path')
.data(uk_g.features)
.join('path')
.attr("d",path)
.attr('fill','blue')
.attr('fill',d => color(table.get(d.properties.counties)))
//.attr('stroke-width', function(d) {return(d3.select(Counties))})
.attr('stroke','#bbb')
.attr('stroke-width',.3)
svg.append("g")
.selectAll('path')
.data(uk_g.features)
.join('path')
.filter(function(d) {return (d.properties.counties == Counties[0].counties) })
.attr("d",path)
.attr('fill','none')
.attr('stroke-width',.25)
.attr('stroke','black')
svg.append("text")
.attr("width",100)
.attr("height",50)
.attr("x", '67%')
.attr("y", '60%')
.attr('fill','#bbb')
.style('font',font)
.style('font-size','16')
.style('font-weight','normal')
.text('England')
.attr("font-size", "12")
return svg.node()
}
filter = data.filter(function ([a,[b]]) { return b && a == Counties[0].counties})
height = 500
function setStyle(selection) {
selection.attr("stroke", "black");
}
margin = ({ top: 10, right: 10, bottom: 10, left: 10 })
function resetStyle(selection) {
selection.attr("stroke",0);
}
tooltip = d3.select("body").append("div")
.attr("class", "svg-tooltip")
.text("gh")
scheme = d3.scaleLinear()
.domain([0,1000])
.range(ramp)
color = {
return value => {
if (!value) return "#ddd";
let a = value;
return scheme([a]);
};
}
selectStroke = {
return value => {
let a = value;
return ([2]);
}
}
ramp = ["#f5e3e0","#e8b4bc","#d282a6","#6e4555","#3a3238"]
table = Object.assign(new Map(filter))
land = FileAttachment("ne_10m_land (2).json").json()
land_geo = topojson.feature(land,land.objects.ne_10m_land)
uk = FileAttachment("uk_counties_2.json").json()
uk_g = topojson.feature(uk,uk.objects.uk_counties_2)
data = d3.csvParse(await FileAttachment("counties_join_2.csv").text(),
({counties,Count}) => [counties,[Count]])
input = d3.csvParse(await FileAttachment("counties_join_2.csv").text())
projection = d3.geoConicEquidistant()
.scale(2200)
.center([5, 53])
//.fitSize([width/2,300],uk_g);
d3 = require("d3@6")
topojson = require("topojson-client@3")
path = d3.geoPath(projection)
import { tooltipTemplate } from "@clhenrick/tooltip-d3-convention"
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.
