31:T1269,chart = { yield html`

`; // draw map svg .append("g") .selectAll("path") .data(county_data_merged) .join("path") .attr("fill", d => color(d.name_origin['Language_of_origin_cleaned'])) .attr('stroke', 'white') .attr('stroke-width', '2') .attr("d", d => path(d)) .attr('class', 'county'); // Create legend let legend = svg .append('g') .attr('id', 'legend') .style('transform', 'translate(40px, 450px)'); legend .append('text') .text('Languages of origin') .style('font-weight', 'bold') .style('font-family', 'Texturina, serif') .style('transform', 'translate(0px, -25px)'); let legend_english = legend.append('g').attr('id', 'legend_english'); let legend_english_data = [ { name: 'Old English', key: 'Old_English' }, { name: 'Middle English', key: 'Middle_English' }, { name: 'English', key: 'English' } ]; let legend_celtic = legend .append('g') .attr('id', 'legend_celtic') .attr('transform', 'translate(0,110)'); let legend_celtic_data = [ { name: 'Celtic', key: 'Celtic' }, { name: 'Brittonic / Brythonic', key: 'Brittonic' }, { name: 'Gaelic', key: 'Gaelic' }, { name: 'Pictish', key: 'Pictish' }, { name: 'Welsh', key: 'Welsh' } ]; let legend_old_norse = legend .append('g') .attr('id', 'legend_old_norse') .attr('transform', 'translate(0,280)'); let legend_norman = legend .append('g') .attr('id', 'legend_norman') .attr('transform', 'translate(0,330)'); let legend_step = 40; legend_english .selectAll('rect') .data(legend_english_data) .enter() .append('rect') .attr('fill', d => color(d.key)) .attr('width', 20) .attr('height', 20) .attr('transform', (d, i) => 'translate(0,' + 30 * i + ')'); legend_english .selectAll('text') .data(legend_english_data) .enter() .append('text') .text(d => d.name) .attr('transform', function(d, i) { let vertical_step = 30 * i + 15; return 'translate(25,' + vertical_step + ')'; }); legend_celtic .selectAll('rect') .data(legend_celtic_data) .enter() .append('rect') .attr('fill', d => color(d.key)) .attr('width', 20) .attr('height', 20) .attr('transform', (d, i) => 'translate(0,' + 30 * i + ')'); legend_celtic .selectAll('text') .data(legend_celtic_data) .enter() .append('text') .text(d => d.name) .attr('transform', function(d, i) { let vertical_step = 30 * i + 15; return 'translate(25,' + vertical_step + ')'; }); legend_old_norse .selectAll('rect') .data([{ name: 'Old Norse', key: 'Old_Norse' }]) .enter() .append('rect') .attr('fill', d => color(d.key)) .attr('width', 20) .attr('height', 20) .attr('transform', (d, i) => 'translate(0,' + 30 * i + ')'); legend_old_norse .selectAll('text') .data([{ name: 'Old Norse', key: 'Old_Norse' }]) .enter() .append('text') .text(d => d.name) .attr('transform', function(d, i) { let vertical_step = 30 * i + 15; return 'translate(25,' + vertical_step + ')'; }); legend_norman .selectAll('rect') .data([{ name: 'Norman', key: 'Norman' }]) .enter() .append('rect') .attr('fill', d => color(d.key)) .attr('width', 20) .attr('height', 20) .attr('transform', (d, i) => 'translate(0,' + 30 * i + ')'); legend_norman .selectAll('text') .data([{ name: 'Norman', key: 'Norman' }]) .enter() .append('text') .text(d => d.name) .attr('transform', function(d, i) { let vertical_step = 30 * i + 15; return 'translate(25,' + vertical_step + ')'; }); legend .selectAll('g') .selectAll('text') .style('font-family', 'Source Sans Pro') .style('font-size', '13'); // tooltip hover interaction const tooltip = svg.append("g"); svg .selectAll(".county") .on("mouseover", function(d) { tooltip.call( callout, `${d.name_origin['County name']}
${d.name_origin['Language of origin']}
${d.name_origin['Derivation']}` ); d3.select(this) .attr("stroke", "white") .attr("stroke-width", "2") .raise(); }) .on("mousemove", function() { tooltip.attr( "transform", `translate(${d3.mouse(this)[0]},${d3.mouse(this)[1]})` ); }) .on("mouseout", function() { tooltip.call(callout, null); d3.select(this) .attr("stroke", 'white') .attr("stroke-width", "2") .lower(); }); return yield svg.node(); }32:T517,// from import { callout } from "@d3/line-chart-with-tooltip" callout = (g, value) => { if (!value) return g.style("display", "none"); g.style("display", null) .style("pointer-events", "none") .style("font", "12px sans-serif"); const path = g .selectAll("path") .data([null]) .join("path") .attr("fill", "white") .attr("stroke", "lightgray"); const text = g .selectAll("text") .data([null]) .join("text") .text(value) .attr("x", 0) .attr("y", 0) .attr("dy", 0) .style('font-family', 'Source Sans Pro') .call(wrap, 300); d3.selectAll('tspan') .style("font-weight", (_, i) => (i ? null : "bold")) .style("font-style", (_, i) => (i == 1 ? "italic" : null)) .style("font-family", (_, i) => i ? (i == 1 ? 'Texturina' : "Source Sans Pro") : "Texturina" ) .style("font-size", (_, i) => (i ? (i == 1 ? "14px" : '13px') : "14px")); d3.selectAll('tspan') .filter((d, i) => i == 0) .attr('dy', -7); d3.selectAll('tspan') .filter((d, i) => i == 1) .attr('dy', 8); 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` ); }33:T9e4,// Textures using Riccardo Scalco's Textures.js https://riccardoscalco.it/textures/ ts = [ // "Gaelic", textures .lines() .orientation("diagonal") .size(4) .strokeWidth(2) .stroke('rgb(97,129,98)'), // "Welsh", textures .lines() .orientation("horizontal") .size(4) .strokeWidth(1) .stroke('rgb(97,129,98)'), // "Pictich", textures .lines() .orientation("vertical") .size(3) .strokeWidth(1) .stroke('rgb(97,129,98)'), // "Brittonic_Old_English", textures .lines() .orientation("vertical", "horizontal") .size(3) .strokeWidth(1) .shapeRendering("crispEdges") .stroke('rgb(104,128,101)') .background('rgb(190,94,97)'), // "Old_Norse_Old_English", textures .lines() .orientation("horizontal") .size(4) .strokeWidth(1) .stroke('rgb(96,106,131)') .background('rgb(190,94,97)'), // "Brittonic_Gaelic", textures .lines() .orientation("vertical", "horizontal", "diagonal") .size(6) .strokeWidth(2) .stroke('rgb(104,128,101)'), // "Brittonic_English", textures .lines() .orientation("vertical", "horizontal") .size(3) .strokeWidth(1) .stroke('rgb(104,128,101)') .background('rgb(190,94,97)'), // "Goidelic/Brittonic", textures .lines() .orientation("vertical", "horizontal") .size(4) .strokeWidth(3) .stroke('rgb(104,128,101)'), // "Old_Norse_Middle_English", textures .lines() .orientation("vertical", "horizontal") .size(4) .strokeWidth(1) .stroke('rgb(190,94,97)') .background('rgb(96,106,131)'), // "Old_Norse_Celtic", textures .lines() .orientation("vertical") .size(4) .strokeWidth(2) .stroke('rgb(104,128,101)') .background('rgb(96,106,131)'), // "Gaelic_Celtic" textures .lines() .orientation("diagonal") .size(6) .strokeWidth(4) .stroke('rgb(104,128,101)'), // "Brittonic", textures .lines() .orientation("vertical", "horizontal") .size(3) .strokeWidth(1) .shapeRendering("crispEdges") .stroke('rgba(104,128,101, 0.8)'), // "Middle English", textures .lines() .orientation("vertical", "horizontal") .size(3) .strokeWidth(1) .shapeRendering("crispEdges") .stroke('rgb(214,140,136)'), // "English", textures .lines() .orientation("vertical") .size(3) .strokeWidth(1) .shapeRendering("crispEdges") .stroke('rgba(190,94,97,0.5)') ]34:T50a,historic_british_counties_Y = { // switch in historic Yorkshire merged let historic_british_counties_Y = historic_british_counties.filter(function(d){ return (d.properties.G_NAME != "EAST RIDING") & (d.properties.G_NAME != "WEST RIDING") & (d.properties.G_NAME != "NORTH RIDING")}); // add in merged Yorkshire historic_british_counties_Y.push(Yorkshire_historic_merged.features[0]); // Wigtownshire and Aberdeenshire are mixed up for (let i=0; i\"){ line.shift() };\n line.push(word);\n tspan.text(line.join(\" \"));\n if ((tspan.node().getComputedTextLength() > width) | word ==\"
\") {\n line.pop();\n \n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text.append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\").text(word);\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"md`## Colours & Textures`","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"{\n // colours test\n const svg = d3\n .create('svg')\n .attr('width', 1200)\n .attr('height', 210);\n\n ts.forEach(t => svg.call(t));\n const rectSize = 40;\n\n color.domain().forEach(function(d, i) {\n svg\n .append('rect')\n .attr('width', rectSize)\n .attr('height', rectSize)\n .attr('transform', () => `translate(${i * rectSize},0)`)\n .style('fill', () => color(d));\n\n svg\n .append('text')\n .text(() => d)\n .attr(\n 'transform',\n () =>\n `rotate(45,${i * rectSize + 48},15) translate(${i * rectSize +\n 48},15)`\n )\n .attr('y', 50);\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"md`### Create colour scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"// create colour scale\ncolor = {\n ts.forEach(t => svg.call(t));\n\n let color = d3.scaleOrdinal(\n [\n \"Old_English\",\n \"Middle_English\",\n \"English\",\n \"Celtic\",\n \"Brittonic\",\n \"Brythonic\",\n \"Gaelic\",\n \"Pictish\",\n \"Welsh\",\n \"Old_Norse\",\n \"Norman\",\n \"Brythonic_Old_English\",\n \"Old_Norse_Old_English\",\n \"Brittonic_Gaelic\",\n \"Brythonic_English\",\n \"Goidelic/Brythonic\",\n \"Old_Norse_Middle_English\",\n \"Old_Norse_Celtic\",\n \"Gaelic_Celtic\"\n ],\n\n [\n Old_English,\n ts[12].url(),\n ts[13].url(),\n Celtic,\n ts[11].url(),\n ts[11].url(),\n ts[0].url(),\n ts[2].url(),\n ts[1].url(),\n Old_Norse,\n Norman,\n ts[3].url(),\n ts[4].url(),\n ts[5].url(),\n ts[6].url(),\n ts[7].url(),\n ts[8].url(),\n ts[9].url(),\n ts[10].url()\n ]\n );\n\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1493,"value":"md`### Define textures`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1549,"value":"md`Palette inspiration from RJ Andrews' ([@infowetrust](https://twitter.com/infowetrust)) [palettes based on a set of French thematic maps](https://twitter.com/infowetrust/status/1201281456409964550). See on [Github](https://github.com/infowetrust/albumcolors) and demoed in an [Observable notebook](https://observablehq.com/@oliviafvane/svg-patterns-palettes-infowetrust-french-thematic-maps).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"Old_English = \"rgb(190,94,97)\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"Celtic = 'rgb(97,129,98)'","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"Old_Norse = 'rgb(96,106,131)'","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"Norman = 'rgb(215,172,84)'","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"md `## Data processing` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"unique_name_origins = [...new Set(county_data_merged.map(item => item.name_origin['Language_of_origin_cleaned']))];","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"historic_british_counties = historic_EW_counties['features'].concat(historic_S_counties['features']);","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"Aberdeenshire_Kincardineshire_merge = {\n let sc = await FileAttachment(\"Spre1890_mercator.json\").json();\n console.log(sc);\n // NOTE the names are mixed up in this dataset. The polygon with 'G_NAME' 'WIGTOWNSHIRE' is actually Aberdeenshire.\n var selected = d3.set(['KINCARDINESHIRE', 'WIGTOWNSHIRE']);\n let sc_merged = topojson.merge(sc,sc.objects.Spre1890_mercator.geometries.filter(function(d){ return selected.has(d.properties.G_NAME) }));\n return sc_merged;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"vl.markGeoshape()\n .data([Aberdeenshire_Kincardineshire_merge])\n .height(200)\n .width(200)\n .render();","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1509,"value":"county_data_merged = FileAttachment('county_data_merged.json').json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"// merge county polygon data with name origin data\ncounty_data_merged_1 = {\n let county_data_merged = [];\n historic_british_counties_Y.forEach(function(d,i){\n county_name_origins.forEach(function(k,j){\n \n if ((d.properties.G_NAME.toLowerCase() == \"forfarshire\") & (k['County name'].toLowerCase() == \"angus\")){\n let new_item = d;\n new_item.properties.G_NAME = \"ANGUS\";\n new_item.name_origin = k;\n county_data_merged.push(new_item);\n } \n \n else if (d.properties.G_NAME.toLowerCase() == k['County name'].toLowerCase()){\n let new_item = d;\n new_item.name_origin = k;\n county_data_merged.push(new_item);\n }; \n });\n }); \n return county_data_merged;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":892,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"md`[List of United Kingdom county name etymologies](https://en.wikipedia.org/wiki/List_of_United_Kingdom_county_name_etymologies) on Wikipedia:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"md`Traditional counties digital boundary data from https://www.visionofbritain.org.uk/data/# licensed CC-BY-NC-SA\n\nThis work is based on data provided through https://www.visionofbritain.org.uk/ and uses historical material which is copyright of the Great Britain Historical GIS Project and the University of Portsmouth.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"Yorkshire_historic_merged = { \n let Yorkshire_historic_merged = topojson.feature(await FileAttachment(\"Historic_Yorkshire_merged.json\").json(), 'EW1815_mercator'); \nYorkshire_historic_merged.features[0].properties.G_NAME = \"YORKSHIRE\";\n return Yorkshire_historic_merged;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"historic_S_counties = topojson.feature( await FileAttachment(\"Spre1890_mercator.json\").json(), \"Spre1890_mercator\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"historic_EW_counties = topojson.feature( await FileAttachment(\"EW1815_mercator.json\").json(), \"EW1815_mercator\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"md`## Fonts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":776,"value":"md `## Libraries / Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"topojson = require('topojson-client@3', 'topojson-simplify@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"textures = require('textures@1.2.0/dist/textures.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}