31:T9cc,map = { const container = html`

`; yield container; const map = L.map(container); L.tileLayer( "https://cartodb-basemaps-1.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png" ).addTo(map); lmc; const icons = new Map( types.map((type) => [ type, L.divIcon({ html: markerSVG(color(type)), className: "", iconSize: [30, 30] }) ]) ); const cluster = new L.markerClusterGroup({ showCoverageOnHover: false, iconCreateFunction: function (cluster) { var childCount = cluster.getChildCount(); let radius = scaleRadius(childCount); const allChilds = cluster.getAllChildMarkers(); const counts = d3.rollups( allChilds, (v) => v.length, (d) => d.feature.properties.type ); return new L.DivIcon({ html: PieChart( counts.map(([name, value]) => ({ name, value })), { name: (d) => d.name, value: (d) => d.value, innerRadius: Math.max(7, radius / 4), width: radius, height: radius } ), className: "", iconSize: new L.Point(radius, radius) }); } }); let markers = []; for (let d of connections) { let marker = L.marker([d.latitude, d.longitude], { icon: icons.get(d.type) }).bindPopup(`${d.experimental_program} ${d.date}
${d.specimen_type}`); marker.feature = { type: "Point", properties: d, geometry: undefined }; markers.push(marker); cluster.addLayer(marker); } map.addLayer(cluster); map.fitBounds(cluster.getBounds()); var legend = L.control({ position: "bottomright" }); legend.onAdd = function (map) { var div = L.DomUtil.create("div", "info legend"); for (let type of types) { div.innerHTML += ` ${type}
`; } for (let type of types) { d3.select(div) .select(`#checkbox_${type.replace(/\s/g, "")}`) .on("change", (e) => { e.stopPropagation(); let layers = markers.filter( ({ feature }) => feature.properties.type === type ); if (e.target.checked) cluster.addLayers(layers); else cluster.removeLayers(layers); }); } return div; }; legend.addTo(map); }32:Ta24,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/pie-chart function PieChart( data, { name = ([x]) => x, // given d in data, returns the (ordinal) label value = ([, y]) => y, // given d in data, returns the (quantitative) value width = 640, // outer width, in pixels height = 400, // outer height, in pixels innerRadius = 0, // inner radius of pie, in pixels (non-zero for donut) outerRadius = Math.min(width, height) / 2, // outer radius of pie, in pixels labelRadius = innerRadius * 0.2 + outerRadius * 0.6, // center radius of labels stroke = innerRadius > 0 ? "none" : "white", // stroke separating widths strokeWidth = 1, // width of stroke separating wedges strokeLinejoin = "round", // line join of stroke separating wedges padAngle = stroke === "none" ? 1 / outerRadius : 0 // angular separation between wedges } = {} ) { // Compute values. const N = d3.map(data, name); const V = d3.map(data, value); const I = d3.range(N.length).filter((i) => !isNaN(V[i])); const title = (index) => V[index]; // Construct arcs. const arcs = d3 .pie() .padAngle(padAngle) .sort(null) .value((i) => V[i])(I) .filter((d) => d.value > 0); const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g").append("circle").attr("fill", "white").attr("r", outerRadius); svg .append("g") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-linejoin", strokeLinejoin) .selectAll("path") .data(arcs) .join("path") .attr("fill", (d) => color(N[d.data])) .attr("d", arc) .append("title") .text((d) => title(d.data)); svg .append("g") .attr("transform", `translate(0 3.5)`) .append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("font-weight", "bold") // .selectAll("text") // .data(arcs) // .join("text") // .attr("transform", (d) => // arcs.length > 1 ? `translate(${arcLabel.centroid(d)})` : "" // ) // .append("tspan") // .attr("x", 0) // .attr("y", 3) .text((d) => d3.sum(V)); return Object.assign(svg.node(), { scales: { color } }); }33:Tbee,// mapEurope = { // // We're going to draw the map on the following SVG. // let svg = d3 // .create("svg") // .attr("width", w) // .attr("height", h) // .attr("viewBox", [0, 0, w, h]) // .attr("style", "width: 100%; height: auto; h: intrinsic;"); // let maxRadius = 40; // let country_group = svg.append("g"); // // Compute default domains. // let domain = [0, d3.max(data.map((d) => d.radius))]; // // // Construct scales. // // const radius = d3.scaleSqrt(domain, [0, maxRadius]); // // Draw the countries // country_group // .selectAll("path") // .data(countries.features) // .join("path") // .attr("d", pathEurope) // .attr("fill", "#eee") // .attr("stroke", "black") // .attr("stroke-width", 0.2); // svg.call( // d3 // .zoom() // .extent([ // [0, 0], // [width, height] // ]) // .scaleExtent([1 / 4, 8]) // .on("zoom", zoomed) // ); // let bubbles = null, // bubble_group = svg.append("g"); // let legendX = w - maxRadius - 10, // legendY = h - 10; // const legend = svg // .append("g") // .attr("fill", "#777") // .attr("transform", `translate(${legendX},${legendY})`) // .attr("text-anchor", "middle") // .style("font", "10px sans-serif"); // // const legends = legend // // .selectAll("g") // // .data(radius.ticks(4).slice(1)) // // .join("g"); // // legends // // .append("circle") // // .attr("fill", "none") // // .attr("stroke", "#ccc") // // .attr("cy", (d) => -radius(d)) // // .attr("r", radius); // // legends // // .append("text") // // .attr("y", (d) => -2 * radius(d)) // // .attr("dy", "1.3em") // // .text(radius.tickFormat(4, "s")); // let radius = 5; // function updateMap() { // bubbles = bubble_group // .selectAll("circle") // .data(dataByLocation) // .join("circle") // .attr("cx", (array) => array[0].pos[0]) // .attr("cy", (array) => array[0].pos[1]) // .attr("r", (array) => radius * Math.sqrt(array.length)) // .attr("fill", "lightblue") // .attr("fill-opacity", 0.8) // .attr("stroke-width", 0.5) // .attr("stroke", "grey"); // bubbles.append("title").text((array) => array.map((d) => d.id).join("\n")); // } // function zoomed({ transform }) { // bubble_group.attr("transform", (d) => transform); // bubbles // .attr("r", (array) => (radius * Math.sqrt(array.length)) / transform.k) // .attr("stroke-width", 0.5 / transform.k); // // const [x0, y0, x1, y1] = [ // // transform.invertX(0), // // transform.invertY(0), // // transform.invertX(w), // // transform.invertY(h) // // ]; // // const bbox = [projection.invert([x0, y0]), projection.invert([x1, y1])]; // // console.log(x0, y0, x1, y1, bbox); // // console.log(index.getClusters()); // country_group.attr("transform", (d) => transform); // } // updateMap(); // return svg.node(); // }34:[{"id":"e84af4d305997fc2479a3ded775818a91b603ac63c6e25b6a3df67889de0002c4ce01b5594352317c6341b7db6f90db6af9baec4306486065b9c5251728bef3e","href":"https://static.observableusercontent.com/files/e84af4d305997fc2479a3ded775818a91b603ac63c6e25b6a3df67889de0002c4ce01b5594352317c6341b7db6f90db6af9baec4306486065b9c5251728bef3e","name":"connections.csv","type":"text/csv","lastModified":1664923834290.875,"size":136214}] 2f:{"title":"Proposals for RESSLAB hub","cells":[{"id":0,"value":"# Proposals for RESSLAB hub","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"## 3D","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"Add color and surface lines as below, add a tooltip and a surface map [like in echarts example](https://echarts.apache.org/examples/en/editor.html?c=simple-surface&gl=1) (not working in Observable rn) ","pinned":false,"hidden":false,"mode":"md"},{"id":190,"value":"// echart = {\n// const div = DOM.element(\"div\");\n// yield div;\n\n// // Initialize the echarts instance based on the prepared dom\n// var myChart = echarts.init(div, null, {\n// width: width,\n// height: height,\n// renderer: \"canvas\"\n// });\n\n// // Display the chart using the configuration items and data just specified.\n// myChart.setOption(option);\n// yield Object.assign(div, { myChart });\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"option = ({\n tooltip: {},\n backgroundColor: \"#fff\",\n visualMap: {\n show: true,\n dimension: 2,\n min: -1,\n max: 1,\n inRange: {\n color: [\n \"#313695\",\n \"#4575b4\",\n \"#74add1\",\n \"#abd9e9\",\n \"#e0f3f8\",\n \"#ffffbf\",\n \"#fee090\",\n \"#fdae61\",\n \"#f46d43\",\n \"#d73027\",\n \"#a50026\"\n ]\n }\n },\n xAxis3D: {\n type: \"value\"\n },\n yAxis3D: {\n type: \"value\"\n },\n zAxis3D: {\n type: \"value\"\n },\n grid3D: {\n viewControl: {\n // projection: 'orthographic'\n }\n },\n series: [\n {\n type: \"surface\",\n wireframe: {\n // show: false\n },\n equation: {\n x: {\n step: 0.05\n },\n y: {\n step: 0.05\n },\n z: function (x, y) {\n if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {\n return \"-\";\n }\n return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);\n }\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"## Maps","pinned":false,"hidden":false,"mode":"md"},{"id":593,"value":"markerSVG = (color) =>\n ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"cytoscape","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"colors = [\"#2196F3\", \"#F44336\", \"#4CAF50\", \"#FFC107\", \"#673AB7\", \"#FF9800\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":562,"value":"scaleRadius = d3\n .scaleLinear()\n .domain([0, connections.length])\n .rangeRound([20, 180])","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"color = d3.scaleOrdinal(types, colors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"index = {\n const index = new Supercluster({\n radius: 40,\n maxZoom: 16\n });\n index.load(geojsonConnections);\n index.getClusters([-180, -85, 180, 85], 2);\n return index;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"geojsonConnections = connections.map((d) => ({\n type: \"Feature\",\n id: d.id,\n properties: { ...d },\n geometry: { type: \"Point\", coordinates: [d.longitude, d.latitude] }\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"keysConnections = [\n \"id\",\n \"experimental_program\",\n \"specimen_type\",\n \"date\",\n \"type\",\n \"latitude\",\n \"longitude\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"dataByLocation = {\n let pos = connections.map((d) => ({\n pos: projection([d.longitude, d.latitude]),\n ...d\n }));\n let group = d3.groups(pos, (d) => d.pos.join(\"-\"));\n return group.map(([pos, array]) => array);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"types = [\"Steel Material\", \"Columns\", \"Components\", \"Braces\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"connections = (\n await FileAttachment(\"connections.csv\").csv({ typed: true })\n).map((d) => {\n // for (let key of Object.keys(d)) {\n // if (!keysConnections.includes(key)) delete d[key];\n // }\n return { ...d, type: types[~~(Math.random() * types.length)] };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"viewof table = Inputs.table(connections)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## Geography`","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"// switzerland","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"projection = {\n const projection = d3.geoNaturalEarth1().fitSize([w, h], {\n type: \"MultiPoint\",\n coordinates: connections.map((d) => [d.longitude, d.latitude])\n });\n const zoom = Math.floor(Math.log2(projection.scale() * (2 * Math.PI)));\n const scale = Math.pow(2, zoom) / (2 * Math.PI);\n projection.center(projection.invert([w / 2, h / 2]));\n projection.scale(scale);\n projection.translate([w / 2, h / 2]);\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"deltas = [-15, -4, -1, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"// geo_diagonal = Math.hypot(\n// geo_bounds[0][0] - geo_bounds[1][0],\n// geo_bounds[0][1] - geo_bounds[1][1]\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"// geo_centroid = d3.geoCentroid({\n// type: \"MultiPoint\",\n// coordinates: data.map((d) => [d.x, d.y])\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"// geo_bounds = d3.geoBounds({\n// type: \"MultiPoint\",\n// coordinates: data.map((d) => [d.x, d.y])\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"// projection = {\n// const projection = d3.geoMercator().fitSize([width, height], {\n// type: \"MultiPoint\",\n// coordinates: data.map((d) => [d.x, d.y])\n// });\n// const zoom = Math.floor(Math.log2(projection.scale() * (2 * Math.PI)));\n// const scale = Math.pow(2, zoom) / (2 * Math.PI);\n// projection.center(projection.invert([width / 2, height / 2]));\n// projection.scale(scale);\n// projection.translate([width / 2, height / 2]);\n// return projection;\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"viewof size = Inputs.range([0, 0.5], {\n value: 0.1,\n label: \"Size circles/hexagons\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"h = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"import { w } from \"@pierreleripoll/vegasync\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"## Background","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"viewof urlTiles = Inputs.select(\n new Map([\n [\"Standard\", \"a.tile.openstreetmap.org\"],\n [\"Light\", \"cartodb-basemaps-1.global.ssl.fastly.net/light_all\"]\n ]),\n {\n value: \"cartodb-basemaps-1.global.ssl.fastly.net/light_all\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"url = (x, y, z) => `https://${urlTiles}/${z}/${x}/${y}.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"## Data ","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"// import { data } from \"@pierreleripoll/epv-enac\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"// echarts = require(\"echarts\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"// echartsgl = require(\"echarts-gl@2.0.9/dist/echarts-gl.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"d3 = require(\"d3@6\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"// import { map as SVGMap } with { height as height } from \"@pierreleripoll/city-graph-events-street-activity\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"L = {\n const L = await require(\"leaflet@1.9/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1.9/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"L.MarkerClusterGroup","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"lmc = {\n L;\n const leafletmarkercluster = await require(\"leaflet.markercluster@1.4\");\n\n if (!leafletmarkercluster._style) {\n const href = await require.resolve(\n \"leaflet.markercluster@1.4/dist/MarkerCluster.css\"\n );\n const href2 = await require.resolve(\n \"leaflet.markercluster@1.4/dist/MarkerCluster.Default.css\"\n );\n document.head.appendChild(\n (leafletmarkercluster._style = html``)\n );\n\n document.head.appendChild(\n (leafletmarkercluster._style = html``)\n );\n }\n\n return leafletmarkercluster;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"// import {\n// countries,\n// correctedCountriesFeatures,\n// switzerland,\n// pathEurope\n// } with { projection as projectionEurope } from \"@epfl-enac/enac-diversity-office\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"Supercluster = require(\"https://unpkg.com/supercluster@7.1.2/dist/supercluster.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}