31:T99f,addFilters = { globe; d3.select(".dates") .selectAll(".date") .data(dates) .enter() .append("label") .html((d) => { let checked = datesSelected.includes(d) ? "checked" : ""; return `${d}`; }); d3.select(".tags") .selectAll(".tag") .data(tags) .enter() .append("label") .html((d) => { let checked = tagsSelected.includes(d) ? "checked" : ""; return `${d}`; }); d3.select(".places") .selectAll(".place") .data(places) .enter() .append("label") .html((d) => { let checked = placesSelected.includes(d) ? "checked" : ""; return `${d}`; }); d3.select(".people") .selectAll(".person") .data(people) .enter() .append("label") .html((d) => { let checked = peopleSelected.includes(d) ? "checked" : ""; return `${d}`; }); d3.selectAll(".item").remove(); d3.select(".items") .selectAll(".item") .data(filtered) .enter() .append("div") .text((d) => d["Letter topic"] + " " + d["item number"]); d3.selectAll(".date").on("click", function () { mutable datesSelected = []; d3.selectAll(".date:checked").each(function () { mutable datesSelected.push(this.value); }); }); d3.selectAll(".tag").on("click", function () { mutable tagsSelected = []; d3.selectAll(".tag:checked").each(function () { mutable tagsSelected.push(this.value); }); }); d3.selectAll(".place").on("click", function () { mutable placesSelected = []; d3.selectAll(".place:checked").each(function () { mutable placesSelected.push(this.value); }); }); d3.selectAll(".person").on("click", function () { mutable peopleSelected = []; d3.selectAll(".person:checked").each(function () { mutable peopleSelected.push(this.value); }); }); d3.selectAll(".reset").on("click", function () { d3.selectAll("input[type=radio]").property("checked", false); mutable datesSelected = []; mutable tagsSelected = []; mutable placesSelected = []; mutable peopleSelected = []; }); }32:T6ae,addLocations = { globe; d3.selectAll(".circle").remove(); d3.selectAll(".line").remove(); const max = d3.max(filteredGroup, d => d.value.length) const min = d3.min(filteredGroup, d => d.value.length) const scale = d3.scaleLinear().domain([min, max]).range([1, 10]); d3.select(".dots") .selectAll(".circle") .data(receiver) .enter() .append("circle") .attr("class", "label") .attr("cx", (d) => d.value[0].lat ? projection([d.value[0].lon, d.value[0].lat])[0] : "" ) .attr("cy", (d) => d.value[0].lon ? projection([d.value[0].lon, d.value[0].lat])[1] : "" ) .attr("r", "2") .on("click", updateCenter); d3.select(".dots") .selectAll(".circle") .data(sender) .enter() .append("circle") .attr("class", "circle") .attr("cx", (d) => d.value[0].lat ? projection([d.value[0].lon, d.value[0].lat])[0] : "" ) .attr("cy", (d) => d.value[0].lon ? projection([d.value[0].lon, d.value[0].lat])[1] : "" ) .attr("r", "2") .on("click", updateCenter); d3.select(".lines") .selectAll(".line") .data(filteredGroup) .enter() .append("line") .attr("class", "line") .attr("stroke", "black") .attr("stroke-width", (d) => scale(d.value.length)) .attr( "x1", (d) => projection([d.value[0].receiver_lon, d.value[0].receiver_lat])[0] ) .attr( "y1", (d) => projection([d.value[0].receiver_lon, d.value[0].receiver_lat])[1] ) .attr( "x2", (d) => projection([d.value[0].sender_lon, d.value[0].sender_lat])[0] ) .attr( "y2", (d) => projection([d.value[0].sender_lon, d.value[0].sender_lat])[1] ); }33:T787,34:[{"id":"2acfa4e7666566c1ac61e0b98e22fea586401074f7c9f79a69d86f07e30c9d804eba09b609c482d2a9ac77c577d6e255b2a5c9b5b106e2e33b586650f0e105b6","href":"https://static.observableusercontent.com/files/2acfa4e7666566c1ac61e0b98e22fea586401074f7c9f79a69d86f07e30c9d804eba09b609c482d2a9ac77c577d6e255b2a5c9b5b106e2e33b586650f0e105b6","name":"tack@1.csv","type":"text/csv","lastModified":1661682371853.331,"size":47243},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1661086958114.848,"size":756420},{"id":"fd9c7a14ff156cb49520d113d2046e2e16f3f82cee439f95a47467cd6b56faca5750a67b69a19c4f623e945486e94ad42b0a82965ff12c41dd22c6b40660834c","href":"https://static.observableusercontent.com/files/fd9c7a14ff156cb49520d113d2046e2e16f3f82cee439f95a47467cd6b56faca5750a67b69a19c4f623e945486e94ad42b0a82965ff12c41dd22c6b40660834c","name":"worldcities.csv","type":"text/csv","lastModified":1661086971661.566,"size":4581116},{"id":"be7c255c38f31f9417f19a938cabab426883c13ea230aa57315f407ff265543dc6a96a91e7fd7343f1cfc8ed4435822d5baeaa94cf528bb5b632e40110a5d63b","href":"https://static.observableusercontent.com/files/be7c255c38f31f9417f19a938cabab426883c13ea230aa57315f407ff265543dc6a96a91e7fd7343f1cfc8ed4435822d5baeaa94cf528bb5b632e40110a5d63b","name":"TACK _ Network Visualisation - Foglio1 (2).csv","type":"text/csv","lastModified":1661435410803.488,"size":46517},{"id":"2acfa4e7666566c1ac61e0b98e22fea586401074f7c9f79a69d86f07e30c9d804eba09b609c482d2a9ac77c577d6e255b2a5c9b5b106e2e33b586650f0e105b6","href":"https://static.observableusercontent.com/files/2acfa4e7666566c1ac61e0b98e22fea586401074f7c9f79a69d86f07e30c9d804eba09b609c482d2a9ac77c577d6e255b2a5c9b5b106e2e33b586650f0e105b6","name":"TACK _ Network Visualisation - Foglio1 (3).csv","type":"text/csv","lastModified":1661524152430.435,"size":47243},{"id":"130550a780e92686d6f868948420648b118cf155cead6a4cbe760a87cbc3636cef469ca1105c28cd6eef6ba31a25f4fd148beca82b9035ace306d14d44ab7679","href":"https://static.observableusercontent.com/files/130550a780e92686d6f868948420648b118cf155cead6a4cbe760a87cbc3636cef469ca1105c28cd6eef6ba31a25f4fd148beca82b9035ace306d14d44ab7679","name":"TACK _ Network Visualisation - Foglio1 (1).csv","type":"text/csv","lastModified":1662129668866.995,"size":65917}] 2f:{"title":"Bakema Newsletter Archive","cells":[{"id":0,"value":"# Bakema Newsletter Archive","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"This was the [draft] visualisation that displays the [Bakema newsletter archive](http://open.jaapbakemastudycentre.nl/open/texts) as a network on a cartographic level. \nThe map shows the people, places and topics on which Bakema's correspondences were based between 1960 and 1971. \n\nIt has been designed and developed for the Het Nieuwe Instituut in Rotterdam (NL). \n\n> Final prototype: https://tack.hetnieuweinstituut.nl/","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"viewof projectionChoose = projectionInput({value: new URLSearchParams(location.search).get(\"projection\") || \"transverse Mercator\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof clip = slider({\n min: 10, \n max: 180, \n step: 1,\n value: 85,\n description: \"Clip projection\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"globe = {\n return html`\n

\n\n

\n \n

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"---\n### Filter Data","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"viewof filterData = Inputs.search(filtered, { label: \"Filter by search\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"viewof searchData = Inputs.table(filterData, {\n height: 160,\n multiple: false,\n value: filterData[0],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"mutable datesSelected = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"mutable placesSelected = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"mutable peopleSelected = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"mutable tagsSelected = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"filtered = {\n let data = geoData;\n if (datesSelected.length > 0) {\n data = data.filter((d) => {\n return (\n datesSelected.includes(d[\"Letter date\"].split(\"-\").slice(-1)[0]) ||\n datesSelected.includes(d[\"Newsletter date\"].split(\"-\").slice(-1)[0])\n );\n });\n }\n if (placesSelected.length > 0) {\n data = data.filter((d) => {\n return (\n placesSelected.includes(d[\"Sender location\"]) ||\n placesSelected.includes(d[\"Receiver location\"])\n );\n });\n }\n if (peopleSelected.length > 0) {\n data = data.filter((d) => {\n return (\n peopleSelected.includes(d[\"Sender\"]) ||\n peopleSelected.includes(d[\"Receiver\"])\n );\n });\n }\n if (tagsSelected.length > 0) {\n data = data.filter((d) => {\n return (\n tagsSelected.includes(d[\"Letter tags 1\"]) ||\n tagsSelected.includes(d[\"Letter tags 2\"])\n );\n });\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"---\n### Render Map","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"mutable center = [-parseFloat(filtered[0].sender_lon), -parseFloat(filtered[0].sender_lat)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"filteredGroup = Array.from(\n d3.group(filtered, (d) => d[\"Sender location\"]),\n ([coord, value]) => ({ coord, value })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"function updateCenter(d, i) {\n let lat = parseFloat(i.value[0].lat);\n let lon = parseFloat(i.value[0].lon);\n //mutable placesSelected.push(i.city)\n mutable center = [-lon, -lat];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"projection = projectionChoose\n .rotate(center) \n .precision(1)\n .clipAngle(clip)","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy ;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"---\n### Methods","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"receiver = {\n let group;\n group = filtered.map((d) => {\n return {\n lat: d.receiver_lat,\n lon: d.receiver_lon,\n city: d[\"Receiver location\"]\n };\n });\n\n return Array.from(\n d3.group(group, (d) => d.city),\n ([city, value]) => ({ city, value })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"sender = {\n let group;\n group = filtered.map((d) => {\n return {\n lat: d.sender_lat,\n lon: d.sender_lon,\n city: d[\"Sender location\"]\n };\n });\n\n return Array.from(\n d3.group(group, (d) => d.city),\n ([city, value]) => ({ city, value })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"data = FileAttachment(\"TACK _ Network Visualisation - Foglio1 (1).csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"geoData = data.map((d) => {\n return {\n ...d,\n sender_lat: cities.filter(\n (j) =>\n j.city_ascii == capitalizeFirstLetter(d[\"Sender location\"]) ||\n j.country == capitalizeFirstLetter(d[\"Sender location\"])\n )[0]?.lat,\n sender_lon: cities.filter(\n (j) =>\n j.city_ascii == capitalizeFirstLetter(d[\"Sender location\"]) ||\n j.country == capitalizeFirstLetter(d[\"Sender location\"])\n )[0]?.lng,\n receiver_lat: cities.filter(\n (j) =>\n j.city_ascii == capitalizeFirstLetter(d[\"Receiver location\"]) ||\n j.country == capitalizeFirstLetter(d[\"Receiver location\"])\n )[0]?.lat,\n receiver_lon: cities.filter(\n (j) =>\n j.city_ascii == capitalizeFirstLetter(d[\"Receiver location\"]) ||\n j.country == capitalizeFirstLetter(d[\"Receiver location\"])\n )[0]?.lng\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"function capitalizeFirstLetter(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"mutable dates = Array.from(\n new Set(\n filtered.flatMap((l) => [\n l[\"Letter date\"].split(\"-\").slice(-1)[0],\n l[\"Newsletter date\"].split(\"-\").slice(-1)[0]\n ])\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"mutable places = Array.from(new Set(filtered.flatMap(l => [l[\"Sender location\"], l[\"Receiver location\"]])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"mutable people = Array.from(new Set(filtered.flatMap(l => [l[\"Sender\"], l[\"Receiver\"]])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"mutable tags = Array.from(new Set(filtered.flatMap(l => [l[\"Letter tags 1\"], l[\"Letter tags 2\"]])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"---\n### Import & Style","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import {map, d3Map} with {projection, outline} from \"@d3/world-map\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"import {projectionInput} from \"@d3/projection-comparison\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"viewof filterCities = Inputs.search(cities, { label: \"Filter by search\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"viewof searchCities = Inputs.table(filterCities, {\n height: 160,\n multiple: false,\n value: filterData[0],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"cities = FileAttachment(\"worldcities.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"$33","pinned":false,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}