${d.data.year}

2f:Td2d,birthDates = { const data = [...matrixBirthData]; const { categories } = matrixBirthData; const { width, height } = config; const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`); svg .append("rect") .attr("class", "bg-rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); const margin = { top: 20, bottom: 40, right: 30, left: 30 }; const nonPlottable = data.find((d) => d.year === ""); if (nonPlottable) { const index = data.indexOf(nonPlottable); data.splice(index, 1); } const colors = d3.scaleOrdinal(categories, d3.schemeCategory10); const xBandScale = d3 .scaleBand(Array.from(d3.union(data.map((d) => d.year))), [ margin.left, width - margin.right ]) .padding(0.1); const dateExtent = d3.extent(data, (d) => Number(d.year)); //const dateExtent = [1625, 1875]; const xScale = d3 .scaleLinear() .domain(dateExtent) .range([margin.left, width - margin.right]); const barWidth = (width - margin.left - margin.right) / (dateExtent[1] - dateExtent[0]) - 1; const yScale = d3.scaleLinear( [ 0, d3.max(data, (d) => { let total = 0; categories.forEach((cat) => (total += d[cat])); return total; }) ], [height - margin.bottom, margin.top] ); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale); const stack = d3.stack().keys(categories); const chartData = stack(data); const groups = svg .append("g") .selectAll("g") .data(chartData) .join("g") .style("fill", (d, i) => colors(d.key)); groups .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => xScale(Number(d.data.year)) - barWidth / 2) .attr("y", (d) => yScale(d[1])) .attr("height", (d) => yScale(d[0]) - yScale(d[1])) .attr("width", barWidth) .html((d) => `${d.data.year}`); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .select(".domain") .remove(); if (nonPlottable) { const npGroup = svg .append("g") .attr("transform", `translate(${margin.left}, ${height - 10})`) .attr("font-family", "sans-serif") .attr("font-size", "0.5rem"); npGroup .append("text") .attr("transform", (d, i) => `translate(0, 4.95)`) .text("⚠️ Missing year of birth for:"); const cats = npGroup .selectAll("g") .data(categories) .join("g") .attr("transform", (d, i) => `translate(${i * 80 + 110}, 0)`) .attr("class", (d) => d.toLowerCase()); cats .append("rect") .attr("y", -barWidth / 2) .attr("width", barWidth * 2) .attr("height", barWidth * 2) .attr("fill", (d) => colors(d) || "transparent"); cats .append("text") .attr("x", barWidth * 2 + 2) .attr("y", "5") .text((d) => `${nonPlottable[d]} ${d}(s)`); } svg .append("text") .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", "0.75rem") .attr("transform", (d, i) => `translate(${margin.left}, 15)`) .text("Travellers' Dates of Birth"); return svg.node(); }30:Td2e,deathDates = { const data = [...matrixDeathData]; const { categories } = matrixDeathData; const { width, height } = config; const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`); svg .append("rect") .attr("class", "bg-rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); const margin = { top: 20, bottom: 40, right: 30, left: 30 }; const nonPlottable = data.find((d) => d.year === ""); if (nonPlottable) { const index = data.indexOf(nonPlottable); data.splice(index, 1); } const colors = d3.scaleOrdinal(categories, d3.schemeCategory10); const xBandScale = d3 .scaleBand(Array.from(d3.union(data.map((d) => d.year))), [ margin.left, width - margin.right ]) .padding(0.1); const dateExtent = d3.extent(data, (d) => Number(d.year)); // const dateExtent = [1625, 1875]; const xScale = d3 .scaleLinear() .domain(dateExtent) .range([margin.left, width - margin.right]); const barWidth = (width - margin.left - margin.right) / (dateExtent[1] - dateExtent[0]) - 1; const yScale = d3.scaleLinear( [ 0, d3.max(data, (d) => { let total = 0; categories.forEach((cat) => (total += d[cat])); return total; }) ], [height - margin.bottom, margin.top] ); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale); const stack = d3.stack().keys(categories); const chartData = stack(data); const groups = svg .append("g") .selectAll("g") .data(chartData) .join("g") .style("fill", (d, i) => colors(d.key)); groups .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => xScale(Number(d.data.year)) - barWidth / 2) .attr("y", (d) => yScale(d[1])) .attr("height", (d) => yScale(d[0]) - yScale(d[1])) .attr("width", barWidth) .html((d) => `${d.data.year}`); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .select(".domain") .remove(); if (nonPlottable) { const npGroup = svg .append("g") .attr("transform", `translate(${margin.left}, ${height - 10})`) .attr("font-family", "sans-serif") .attr("font-size", "0.5rem"); npGroup .append("text") .attr("transform", (d, i) => `translate(0, 4.95)`) .text("⚠️ Missing year of death for:"); const cats = npGroup .selectAll("g") .data(categories) .join("g") .attr("transform", (d, i) => `translate(${i * 80 + 110}, 0)`) .attr("class", (d) => d.toLowerCase()); cats .append("rect") .attr("y", -barWidth / 2) .attr("width", barWidth * 2) .attr("height", barWidth * 2) .attr("fill", (d) => colors(d) || "transparent"); cats .append("text") .attr("x", barWidth * 2 + 2) .attr("y", "5") .text((d) => `${nonPlottable[d]} ${d}(s)`); } svg .append("text") .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", "0.75rem") .attr("transform", (d, i) => `translate(${margin.left}, 15)`) .text("Travellers' Dates of Death"); return svg.node(); }31:T198c,placesMap = { // Specify the map’s dimensions and projection. const width = 900, height = 600; const projCenter = [0.0, 52.0]; const projection = d3 .geoConicConformal() .rotate([-20.0, 0.0]) .center(projCenter) .parallels([35.0, 65.0]) .translate([width / 2, height / 2]) .scale(mapScale || 700) .precision(0.1); const nonPlottable = places.filter((d) => !d.place); const data = places.filter((d) => d.place); // Create the container SVG. const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // from https://thenewcode.com/1068/Making-Arrows-in-SVG svg.html(` `); // Drow the world svg .append("path") .datum(d3.geoGraticule10()) .attr("fill", "none") .attr("stroke", "#ddd") .attr("stroke-width", 0.75) .attr("stroke-linejoin", "round") .attr("d", d3.geoPath(projection)); svg .append("path") .datum(land) .attr("fill", "#ddd") // .attr("stroke", "#777") // .attr("stroke-width", 0.5) // .attr("stroke-linejoin", "round") .attr("d", d3.geoPath(projection)); const g = svg.append("g").classed("places", true); const borders900600 = [ [width / 2, height / 2], [0, 0], [width, 0], [0, height], [width, height] ].map((p) => projection.invert(p)); const bordersCoord = [ [20, 52], [-51.11588871854332, 56.81539826050682], [91.11588871854333, 56.81539826050682], [-13.826184343590496, 22.99502863936456], [53.8261843435905, 22.99502863936456] ]; const bordersProjected = bordersCoord.map((d) => { return projection([d[0], d[1]]); }); const projectedPlaces = data.map((d) => { const proj = projection([d.longitude, d.latitude]); const outsideX = proj[0] < 0 || proj[0] > width; const outsideY = proj[1] < 0 || proj[1] > height; const outside = outsideX || outsideY; return { ...d, proj, outside, outsideX, outsideY }; }); let place = g .selectAll(".place") .data(projectedPlaces) .join("g") .attr("class", "place") .attr("transform", (d) => `translate(${d.proj[0]}, ${d.proj[1]})`); place .append("circle") .attr("r", 2) .attr("fill", (d) => (d.outside ? "red" : "#444")) .attr("fill", "#444") .attr("display", (d) => (d.outside ? "none" : "block")) .attr("opacity", 0.75); place .append("text") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "0.5rem") .attr("stroke", "white") .attr("stroke-width", 2) .attr("paint-order", "stroke") .attr("y", (d) => (d.outside ? 0 : -4)) .text((d) => d.place); const outsidePlaces = projectedPlaces.filter((d) => d.outside); //console.log(outsidePlaces); let borderMargin = 35; let rectBorder = svg .append("path") .attr("stroke", "#00f") .attr("stroke-width", 1) .attr("fill", "none") .attr( "d", `M ${borderMargin} ${borderMargin} L ${ width - borderMargin } ${borderMargin} L ${width - borderMargin} ${ height - borderMargin } L ${borderMargin} ${height - borderMargin} Z` ); let arrow = g .selectAll(".arrow") .data(outsidePlaces) .join("path") .attr("class", "arrow") .attr("stroke", "#333") .attr("stroke-width", 1) .attr( "d", (d) => `M ${bordersProjected[0][0]} ${bordersProjected[0][1]} L ${d.proj[0]} ${d.proj[1]}` ); arrow.each(function (d) { const _arrow = d3.select(this); const intersection = getIntersection(_arrow.node(), rectBorder.node()); // move the place symbol to the discovered intersection place .raise() .filter((p) => p === d) .attr("transform", `translate(${intersection[0]}, ${intersection[1]})`); // re-draw arrow to start from intersection and continue to old position outside the canvas _arrow.attr( "d", (d) => `M ${intersection[0]} ${intersection[1]} L ${d.proj[0]} ${d.proj[1]}` ); // shortern the arrow const p = _arrow.node().getPointAtLength(borderMargin - 5); _arrow .attr("d", `M ${intersection[0]} ${intersection[1]} L ${p.x} ${p.y}`) .attr("marker-end", "url(#arrowhead)"); }); // arrow.attr("display", "none"); rectBorder.attr("display", "none"); // let borders = g // .selectAll(".border") // .data(bordersProjected) // .join("circle") // .attr("class", "border") // .attr("r", 2) // .attr("fill", "blue") // .attr("opacity", 0.75) // .attr("cx", (d) => d[0]) // .attr("cy", (d) => d[1]); if (nonPlottable) { // const index = data.indexOf(nonPlottable); // data.splice(index, 1); console.log(nonPlottable); svg .append("text") .attr("font-family", "sans-serif") .attr("font-size", "0.5rem") .attr("y", height - 10) .attr("x", 10) .text(`⚠️ Missing coordinates for ${nonPlottable.length} places.`); } svg .append("text") .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", "0.75rem") .attr("transform", (d, i) => `translate(${borderMargin}, ${borderMargin})`) .text("Places of Birth and Death of Travellers"); function getIntersection(path1, path2) { // from https://jsfiddle.net/0wdz6yn0/1/ var start = Date.now(), path1Length = path1.getTotalLength(), path2Length = path2.getTotalLength(), path2Points = []; for (var j = 0; j < path2Length; j++) { path2Points.push(path2.getPointAtLength(j)); } for (var i = 0; i < path1Length; i++) { var point1 = path1.getPointAtLength(i); for (var j = 0; j < path2Points.length; j++) { const intersection = pointIntersect(point1, path2Points[j]); if (intersection) { return [point1.x, point1.y]; } } } } function pointIntersect(p1, p2) { p1.x = Math.round(p1.x); p1.y = Math.round(p1.y); p2.x = Math.round(p2.x); p2.y = Math.round(p2.y); return p1.x === p2.x && p1.y === p2.y; } return svg.node(); }32:Td76,networkGraph = (graph, options = {}) => { const { minCount, minWeight } = options; const height = 600; const width = 900; const layoutIterations = 100; if (minCount) { graph.forEachNode((node, attributes) => { if (attributes.count < minCount) { graph.dropNode(node); } }); } if (minWeight) { graph.forEachEdge( ( edge, attributes, source, target, sourceAttributes, targetAttributes ) => { if (attributes.weight < minWeight) { graph.dropEdge(edge); } } ); } const sensibleSettings = forceAtlas2.inferSettings(graph); const customSettings = { adjustSizes: false, // should the node's sizes be taken into account? barnesHutOptimize: false, // whether to use the Barnes-Hut approximation to compute repulsion barnesHutTheta: 0.5, // Barnes-Hut approximation theta parameter edgeWeightInfluence: 1, // influence of the edge's weights on the layout gravity: 1, // strength of the layout's gravity. linLogMode: false, // whether to use Noack's LinLog model. outboundAttractionDistribution: false, // ??? scalingRatio: 2, slowDown: 1, strongGravityMode: false }; forceAtlas2.assign(graph, { iterations: layoutIterations, settings: customSettings }); const data = graph.export(); // console.log(data); const nodes = data.nodes, links = data.edges; // Specify scales const size = d3 .scaleSqrt([0, d3.max(nodes, (d) => d.attributes.count)], [0, 25]) .clamp(false); const thickness = d3.scaleLinear( [0, d3.max(links, (d) => d.weight)], [0, 10] ); // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("background-color", "#fafafa"); const g = svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); // Add a line for each link, and a circle for each node. const link = g .append("g") .selectAll() .data(links) .join("line") .attr("x1", (d) => nodes.find((n) => n.key === d.source).attributes.x) .attr("y1", (d) => nodes.find((n) => n.key === d.source).attributes.y) .attr("x2", (d) => nodes.find((n) => n.key === d.target).attributes.x) .attr("y2", (d) => nodes.find((n) => n.key === d.target).attributes.y) .attr("fill", "none") .attr("stroke-width", (d) => thickness(d.attributes.weight)) .attr("stroke", "#ccc") .attr("stroke-opacity", 0.25); const node = g .append("g") .attr("stroke", "#fff") .attr("stroke-width", 0.5) .selectAll() .data(nodes) .join("circle") .attr("r", (d) => size(d.attributes.count)) .attr("cx", (d) => d.attributes.x) .attr("cy", (d) => d.attributes.y) .attr("fill", (d) => "grey") .style("cursor", "pointer"); const label = g .append("g") .selectAll() .data(nodes) .join("text") .attr("x", (d) => d.attributes.x) .attr("y", (d) => d.attributes.y) .attr("fill", "black") .attr("stroke", "white") .attr("stroke-width", "2") .attr("paint-order", "stroke") .attr("font-family", "sans-serif") .attr("font-size", "0.5rem") .attr("text-anchor", "middle") .text((d) => d.attributes.label); node.append("title").text((d) => d.id + "-" + d.count); link.append("title").text((d) => d.id + "-" + d.weight); return svg.node(); }33:Ta61,birthDatesCentury = { const data = [...matrixBirthDataCentury]; const { categories } = matrixBirthDataCentury; const { width, height } = config; const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`); const margin = { top: 10, bottom: 20, right: 30, left: 40 }; const nonPlottable = data.find((d) => d.year === "" || d.year === 0); if (nonPlottable) { const index = data.indexOf(nonPlottable); data.splice(index, 1); } const colors = d3.scaleOrdinal(categories, d3.schemeCategory10); const xBandScale = d3 .scaleBand(Array.from(d3.union(data.map((d) => d.year))), [ margin.left, width - margin.right ]) .padding(0.1); const dateExtent = d3.extent(data, (d) => Number(d.year)); const xScale = d3 .scaleLinear() .domain(dateExtent) .range([margin.left, width - margin.right]); const barWidth = xBandScale.bandwidth() const yScale = d3.scaleLinear( [ 0, d3.max(data, (d) => { let total = 0; categories.forEach((cat) => (total += d[cat])); return total; }) ], [height - margin.bottom, margin.top] ); const xAxis = d3.axisBottom(xBandScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale); const stack = d3.stack().keys(categories); const chartData = stack(data); const groups = svg .append("g") .selectAll("g") .data(chartData) .join("g") .style("fill", (d, i) => colors(d.key)); groups .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => xBandScale(Number(d.data.year))) .attr("y", (d) => yScale(d[1])) .attr("height", (d) => yScale(d[0]) - yScale(d[1])) .attr("width", barWidth) .html((d) => `${d.data.year}`); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .select(".domain") .remove(); if (nonPlottable) { const npGroup = svg.append("g").attr("transform", "translate(60, 20)"); npGroup.append("text").text("Missing birth year for:"); const cats = npGroup .selectAll("g") .data(categories) .join("g") .attr("transform", (d, i) => `translate(0, ${i * 15 + 10})`) .attr("class", (d) => d.toLowerCase()); cats .append("rect") .attr("width", "10") .attr("height", "10") .attr("fill", (d) => colors(d)); cats .append("text") .attr("x", "12") .attr("y", "10") .text((d) => `${nonPlottable[d]} ${d}(s)`); } return svg.node(); }34:Ta80,deathDatesCentury = { const data = [...matrixDeathDataCentury]; const { categories } = matrixDeathDataCentury; const { width, height } = config; const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`); const margin = { top: 10, bottom: 20, right: 30, left: 40 }; const nonPlottable = data.find((d) => d.year === "" || d.year === 0); if (nonPlottable) { const index = data.indexOf(nonPlottable); data.splice(index, 1); } const colors = d3.scaleOrdinal(categories, d3.schemeCategory10); const xBandScale = d3 .scaleBand(Array.from(d3.union(data.map((d) => d.year))), [ margin.left, width - margin.right ]) .padding(0.1); const dateExtent = d3.extent(data, (d) => Number(d.year)); const xScale = d3 .scaleLinear() .domain(dateExtent) .range([margin.left, width - margin.right]); const barWidth = xBandScale.bandwidth() const yScale = d3.scaleLinear( [ 0, d3.max(data, (d) => { let total = 0; categories.forEach((cat) => (total += d[cat])); return total; }) ], [height - margin.bottom, margin.top] ); const xAxis = d3.axisBottom(xBandScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale); const stack = d3.stack().keys(categories); const chartData = stack(data); const groups = svg .append("g") .selectAll("g") .data(chartData) .join("g") .style("fill", (d, i) => colors(d.key)); groups .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => xBandScale(Number(d.data.year))) .attr("y", (d) => yScale(d[1])) .attr("height", (d) => yScale(d[0]) - yScale(d[1])) .attr("width", barWidth) .html((d) => `${d.data.year}`); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .select(".domain") .remove(); if (nonPlottable) { console.log(nonPlottable); const npGroup = svg.append("g").attr("transform", "translate(60, 20)"); npGroup.append("text").text("Missing death year for:"); const cats = npGroup .selectAll("g") .data(categories) .join("g") .attr("transform", (d, i) => `translate(0, ${i * 15 + 10})`) .attr("class", (d) => d.toLowerCase()); cats .append("rect") .attr("width", "10") .attr("height", "10") .attr("fill", (d) => colors(d)); cats .append("text") .attr("x", "12") .attr("y", "10") .text((d) => `${nonPlottable[d]} ${d}(s)`); } return svg.node(); }35:[{"id":"bab153a524a012a2282b239157f5b265d8073c486ddd17870293372d707f1deaa647d40abdda608016ff5d1e0e5f661fa2c69f77c4f21a13a88b858197e64c73","href":"https://static.observableusercontent.com/files/bab153a524a012a2282b239157f5b265d8073c486ddd17870293372d707f1deaa647d40abdda608016ff5d1e0e5f661fa2c69f77c4f21a13a88b858197e64c73","name":"GTE Bibliography.txt","type":"text/plain","lastModified":1697439900954.287,"size":80193},{"id":"df00aa777fe6f10b366f5e83d7311f0c82d2724a67b73f56d159b694efdc9bd2410866c3bddc93f861181574393253151986302dd2c370531af7adcef6980d64","href":"https://static.observableusercontent.com/files/df00aa777fe6f10b366f5e83d7311f0c82d2724a67b73f56d159b694efdc9bd2410866c3bddc93f861181574393253151986302dd2c370531af7adcef6980d64","name":"GTE Coordinates.txt","type":"text/plain","lastModified":1697439906959.893,"size":46925},{"id":"c97e12c367c5a5a72938dca1da609a4fb72e0082b8168e9b77d8812aa1fefd7d7524b43c6b5449a5ad0dc5e36f8d2a14fd724a73b3b2cb32801ff87991722bb2","href":"https://static.observableusercontent.com/files/c97e12c367c5a5a72938dca1da609a4fb72e0082b8168e9b77d8812aa1fefd7d7524b43c6b5449a5ad0dc5e36f8d2a14fd724a73b3b2cb32801ff87991722bb2","name":"Travelers_Life_Events.tsv","type":"text/tab-separated-values","lastModified":1697440153123.13,"size":907263},{"id":"0e92e8f426b9d9aef81648002cb563acb18d0c6a9aa26e0828f8a86d6a798cb4ecc7030938acda51fd2922055356f686f43070a5cc3f92fd066f7e0802d6d60b","href":"https://static.observableusercontent.com/files/0e92e8f426b9d9aef81648002cb563acb18d0c6a9aa26e0828f8a86d6a798cb4ecc7030938acda51fd2922055356f686f43070a5cc3f92fd066f7e0802d6d60b","name":"Travelers.tsv","type":"text/tab-separated-values","lastModified":1697440153362.259,"size":1163082},{"id":"20195b7695d3606bc32d9cee25000c1723b6d517d82b003dc3fdebac6e624e9581c1f3606a871ad8b11e6641b33db42d9b4aa55b032d4fca6767bd8a797218eb","href":"https://static.observableusercontent.com/files/20195b7695d3606bc32d9cee25000c1723b6d517d82b003dc3fdebac6e624e9581c1f3606a871ad8b11e6641b33db42d9b4aa55b032d4fca6767bd8a797218eb","name":"Travelers_Itineraries.tsv","type":"text/tab-separated-values","lastModified":1697440154208.831,"size":2656716}] 2d:{"title":"GTE Data Figures","cells":[{"id":3,"value":"# GTE Data Figures","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"viewof config = guard(\n // The callback. We pass `template` through to Inputs.form(), but could also\n // define our own template instead. See \"Callback context\" in the documentation.\n ({ template }) =>\n Inputs.form(\n {\n width: Inputs.number({\n value: 900,\n label: `Width`\n }),\n height: Inputs.number({\n value: 200,\n label: `Height`\n })\n },\n { template }\n ),\n // Options. Here we override the label of the reset button.\n { resetLabel: \"Revert to default\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"### Dates of Birth\nA bar chart showing dates of birth across the database, distinguishing genders by colors","pinned":false,"hidden":false,"mode":"md"},{"id":179,"value":"matrixBirthData = {\n let nested = d3.rollups(\n travelers.sort((a, b) => a.birthDate - b.birthDate),\n (v) => v.length,\n (d) => d.gender,\n (d) => d.birthDate\n );\n let data = [];\n nested.forEach((gender) => {\n gender[1].forEach((year) => {\n const row = { year: year[0], gender: gender[0], count: year[1] };\n data.push(row);\n });\n });\n let matrixData = groupToStack(data, \"year\", \"gender\", (v) => d3.sum(v, (d) => d.count));\n matrixData.categories = Array.from(d3.union(travelers.map(d=>d.gender)))\n return matrixData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"### Dates of Death\nA bar chart showing dates of death across the database, distinguishing genders by colors","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"matrixDeathData = {\n let nested = d3.rollups(\n travelers.sort((a, b) => a.deathDate - b.deathDate),\n (v) => v.length,\n (d) => d.gender,\n (d) => d.deathDate\n );\n let data = [];\n nested.forEach((gender) => {\n gender[1].forEach((year) => {\n const row = { year: year[0], gender: gender[0], count: year[1] };\n data.push(row);\n });\n });\n let matrixData = groupToStack(data, \"year\", \"gender\", (v) => d3.sum(v, (d) => d.count));\n matrixData.categories = Array.from(d3.union(travelers.map(d=>d.gender)))\n return matrixData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"### Places of Birth and Death\nA map with birth and death places, sized by occurrences.\nCan we connect those of same traveler to show life trajectories?\n\nrefs:\nhttps://observablehq.com/@d3/hexbin-map\nhttps://observablehq.com/@toja/five-map-projections-for-europe?collection=@toja/projections","pinned":false,"hidden":false,"mode":"md"},{"id":667,"value":"allPlaces = Array.from(d3.union(travelers.map(d=>([d.birthPlace, d.deathPlace])).flat())).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"places = allPlaces\n .map((d) => {\n const data = gteCoordinates.find(\n (c) => c.place.toLowerCase() === d.toLowerCase()\n );\n return { MentionedInData: d, ...data };\n })\n //.filter((d) => d.place)","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"land = fetch(\"https://unpkg.com/world-atlas@1/world/50m.json\")\n .then((response) => response.json())\n .then((world) => topojson.feature(world, world.objects.land))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"viewof mapScale = Inputs.range([100, 2000], {label: \"Map projection zoom\", step: 1, value: 700})","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"### Sources\nA network graphs of co-mentions for sources","pinned":false,"hidden":false,"mode":"md"},{"id":1221,"value":"viewof networkOptions = guard(\n // The callback. We pass `template` through to Inputs.form(), but could also\n // define our own template instead. See \"Callback context\" in the documentation.\n ({ template }) =>\n Inputs.form(\n {\n minCount: Inputs.number({ label: \"minCount\", value: 2 }),\n minWeight: Inputs.number({ label: \"minWeight\", value: 1 })\n },\n { template }\n ),\n // Options. Here we override the label of the reset button.\n { resetLabel: \"Revert to default\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"sourcesNetwork = {\n const graph = new Graph({\n multi: false,\n allowSelfLoops: false,\n type: \"undirected\"\n });\n\n travelers\n .map((t) => t.sources.split(\",\").filter((s) => s !== \"\"))\n .filter((arr) => arr.length)\n .forEach((d) => {\n // remove duplicates\n d = [...new Set(d)];\n // create network on individual record\n const thisNetwork = list2network(d);\n // use the network to update the graph\n thisNetwork.nodes.forEach((node) => {\n graph.updateNode(node.id, (attr) => {\n return {\n ...attr,\n label: node.id,\n group: \"hashtag\",\n count: (attr.count || 0) + 1\n };\n });\n });\n\n thisNetwork.edges.forEach((edge) => {\n const _update = graph.updateEdge(edge.source, edge.target, (attr) => {\n return {\n ...attr,\n weight: (attr.weight || 0) + 1\n };\n });\n });\n });\n\n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"networkGraph(sourcesNetwork, networkOptions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1252,"value":"DOM.download(new Blob([gexf.write(sourcesNetwork)], {type: \"application/application/vnd.geometry-explorer\"}), \"gte-sourcesNetwork.gexf\", \"Download gte-sourcesNetwork.gexf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"### Mentioned Names\nA network graphs of co-mentions. Maybe first only for 6005 travelers, no need for unmatched?","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"### Travel Data\nA map that replicates the Palladio map with timelines","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"## Data from GTE","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"travelers = await FileAttachment(\"Travelers.tsv\").tsv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"gteBibliography = FileAttachment(\"GTE Bibliography.txt\").tsv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"gteCoordinates = FileAttachment(\"GTE Coordinates.txt\").tsv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"function removeAt(array, index) {\n // Assumes array and index are always valid values\n // place validation code here if needed\n var len = array.length;\n // for example if index is not valid here, it will deoptimize the function\n var ret = array[index];\n for (var i = index + 1; i < len; ++i) {\n array[i - 1] = array[i];\n }\n array.length = len - 1;\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"list2network = (arr = []) => {\n const nodes = arr.map((d) => ({\n id: d,\n label: d,\n occurrences: 1\n }));\n const edges = [];\n for (let i = 0; i < nodes.length; i++) {\n let ii = i + 1;\n while (ii < nodes.length) {\n edges.push({\n id: nodes[i].id + \"-\" + nodes[ii].id,\n source: nodes[i].id,\n target: nodes[ii].id,\n weight: 1\n });\n ii++;\n }\n }\n return { nodes, edges };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"removeNode = (networkData, id) => {\n const nodes = networkData.nodes.filter((n) => n.id !== id);\n const edges = networkData.edges.filter(\n (e) => e.source !== id && e.target !== id\n );\n return { nodes, edges };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"aggregateNetworks = (data) => {\n let nodes = [],\n nodesIds = [],\n edges = [],\n edgesIds = [];\n\n data.forEach((d) => {\n const thisNetwork = d\n thisNetwork.nodes.forEach((node) => {\n if (nodesIds.indexOf(node.id) < 0) {\n nodes.push(node);\n nodesIds.push(node.id);\n } else {\n const existingNode = nodes.find((n) => n.id === node.id);\n existingNode.occurrences++;\n }\n });\n thisNetwork.edges.forEach((edge) => {\n if (edgesIds.indexOf(edge.id) < 0) {\n edges.push(edge);\n edgesIds.push(edge.id);\n } else {\n const existingEdge = edges.find((e) => e.id === edge.id);\n existingEdge.weight++;\n }\n });\n });\n\n let networkData = { nodes, edges };\n\n return networkData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"Graph = require(\"graphology\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1173,"value":"graphologyLayout = require(\"https://bundle.run/graphology-layout@0.4.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1145,"value":"forceAtlas2 = require(\"https://bundle.run/graphology-layout-forceatlas2@0.6.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1250,"value":"gexf = require(\"https://bundle.run/graphology-gexf@0.8.1\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"import { guard } from \"@mootari/inputs-submit\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"import { groupToStack } from \"@john-guerra/d3-stack-with-d3-group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1444,"value":"# Discarded","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"### Dates of Birth (Century)\nA bar chart showing dates of birth aggregated by century across the database, distinguishing genders by colors","pinned":false,"hidden":false,"mode":"md"},{"id":515,"value":"matrixBirthDataCentury = {\n let nested = d3.rollups(\n travelers.sort((a, b) => a.birthDate - b.birthDate),\n (v) => v.length,\n (d) => d.gender,\n (d) => Math.floor(d.birthDate/100)*100\n );\n let data = [];\n nested.forEach((gender) => {\n gender[1].forEach((year) => {\n const row = { year: year[0], gender: gender[0], count: year[1] };\n data.push(row);\n });\n });\n let matrixData = groupToStack(data, \"year\", \"gender\", (v) => d3.sum(v, (d) => d.count));\n matrixData.categories = Array.from(d3.union(travelers.map(d=>d.gender)))\n return matrixData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"### Dates of Death (century)\nA bar chart showing dates of death aggregated by century across the database, distinguishing genders by colors","pinned":false,"hidden":false,"mode":"md"},{"id":534,"value":"matrixDeathDataCentury = {\n let nested = d3.rollups(\n travelers.sort((a, b) => a.deathDate - b.deathDate),\n (v) => v.length,\n (d) => d.gender,\n (d) => Math.floor(d.deathDate/100)*100\n );\n let data = [];\n nested.forEach((gender) => {\n gender[1].forEach((year) => {\n const row = { year: year[0], gender: gender[0], count: year[1] };\n data.push(row);\n });\n });\n let matrixData = groupToStack(data, \"year\", \"gender\", (v) => d3.sum(v, (d) => d.count));\n matrixData.categories = Array.from(d3.union(travelers.map(d=>d.gender)))\n return matrixData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}