43:["$","title",null,{"children":"Colaboraciones BZRP Music Sessions | Violeta Roizman | Observable"}] 4b:Tde4,mapa_biza = { // Based on //https://d3-graph-gallery.com/graph/circularpacking_group.html const wrapper = d3.create("div") const svg = wrapper.html("").append("svg") .attr("viewBox", [0, 0, width1, height1]) //const svg = d3.select(DOM.svg(width1, height1)); const g = svg.append("g"); g.selectAll("path") .data(countries.features) .enter() .append("path") .attr("d", d => { return path(d) }) .style('fill', 'black') .style('stroke', 'white') .style('stroke-width', '1.5px'); const gg = svg.append("g"); const nodes = svg.selectAll("circle").data(sessions_centroids) .join("circle") .attr("class", "collab") .attr("cx", d => d.location[0]) // get the center of the shape using geoPath.centroid .attr("cy", d => d.location[1]) .attr("r", 3) //.style('fill', 'gold') .style('fill', d => Object.keys(colores).includes(d.Pais) ? colores[d.Pais] : 'gold') .style('stroke', 'black') .style('stroke-width', '1.5px'); var simulation = d3.forceSimulation() .force("x", d3.forceX().strength(0.1).x( function(d){ return d.location[0] } )) .force("y", d3.forceY().strength(0.1).y(function(d){ return d.location[1]})) //.force("center", d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area .force("charge", d3.forceManyBody().strength(1)) // Nodes are attracted one each other of value is > 0 .force("collide", d3.forceCollide().strength(0.01).radius(5).iterations(1)) // Force that avoids circle overlapping const tooltipWidth = 160 const tooltip = wrapper.append("div") .style("position", "absolute") .style("padding", "10px 15px") .style("background", "white") //.style("left", width1 / 2.0 + "px") .style("right", "0") .style("bottom", "0") .style("width", tooltipWidth + "px") .style("height", "140px") .style("box-sizing", "border-box") .style("border", "1px solid") .style("font-family", ["Source Serif Pro","sans-serif"]) .style("font-size", "12px") .style("transition", "transform 0.1s ease-out") .style("pointer-events", "none") .style("opacity", 0) // Three function that change the tooltip when user hover / move / leave a cell var mouseover = function(d) { console.log("Holi") console.log(d) tooltip .style("opacity", 1) .html(`Esta es la BZRP Music Session #${d.path[0].__data__.numero} que corresponde a ${d.path[0].__data__.artista} originarix de ${d.path[0].__data__.Pais}`) //d3.select(this) // .style("stroke", "black") // .style("opacity", 1) } var mousemove = function(d) { //Tooltip // .html("The exact value of
this cell is: ") // .style("left", (d3.mouse(this)[0]+70) + "px") // .style("top", (d3.mouse(this)[1]) + "px") } var mouseleave = function(d) { tooltip .style("opacity", 0) //d3.select(this) // .style("stroke", "none") // .style("opacity", 0.8) } // Apply these forces to the nodes and update their positions. // Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop. simulation .nodes(sessions_centroids) .on("tick", function(d){ nodes .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) }); nodes .on("mouseover", mouseover) .on("mouseleave", mouseleave); console.log("holu") console.log(tooltip) return wrapper.node(); }4c:T1416,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/force-directed-graph function ForceGraph({ nodes, // an iterable of node objects (typically [{id}, …]) links // an iterable of link objects (typically [{source, target}, …]) }, { nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeTitle, // given d in nodes, a title string nodeFill = "currentColor", // node stroke fill (if not using a group color encoding) nodeStroke = "#fff", // node stroke color nodeStrokeWidth = 1.5, // node stroke width, in pixels nodeStrokeOpacity = 1, // node stroke opacity nodeRadius = 5, // node radius, in pixels nodeStrength, linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkStroke = "#999", // link stroke color linkStrokeOpacity = 0.6, // link stroke opacity linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels linkStrokeLinecap = "round", // link stroke linecap linkStrength, colors = d3.schemeTableau10, // an array of color strings, for the node groups width = 640, // outer width, in pixels height = 400, // outer height, in pixels invalidation // when this promise resolves, stop the simulation } = {}) { // Compute values. const N = d3.map(nodes, nodeId).map(intern); const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); if (nodeTitle === undefined) nodeTitle = (_, i) => N[i]; const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth); const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i]})); links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]})); // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = d3.sort(G); // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Construct the forces. const forceNode = d3.forceManyBody(); const forceLink = d3.forceLink(links).id(({index: i}) => N[i]); if (nodeStrength !== undefined) forceNode.strength(nodeStrength); if (linkStrength !== undefined) forceLink.strength(linkStrength); const simulation = d3.forceSimulation(nodes) .force("link", forceLink) .force("charge", forceNode) .force("center", d3.forceCenter()) .on("tick", ticked); 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;"); const link = svg.append("g") .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null) .attr("stroke-opacity", linkStrokeOpacity) .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null) .attr("stroke-linecap", linkStrokeLinecap) .selectAll("line") .data(links) .join("line"); const node = svg.append("g") .attr("fill", nodeFill) .attr("stroke", nodeStroke) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-width", nodeStrokeWidth) .selectAll("circle") .data(nodes) .join("circle") .attr("r", nodeRadius) .call(drag(simulation)); if (W) link.attr("stroke-width", ({index: i}) => W[i]); if (L) link.attr("stroke", ({index: i}) => L[i]); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (T) node.append("title").text(({index: i}) => T[i]); if (invalidation != null) invalidation.then(() => simulation.stop()); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } function ticked() { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); } function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } return Object.assign(svg.node(), {scales: {color}}); }4d:[{"id":"fdd83555914a689235330099c07752b51ee33f2a669ccef7cd107a4db543b71e68a72e6475fb5cf3ab7d8b66c82ce601224f704c06fe871fdb1f2e3dff66e9c5","href":"https://static.observableusercontent.com/files/fdd83555914a689235330099c07752b51ee33f2a669ccef7cd107a4db543b71e68a72e6475fb5cf3ab7d8b66c82ce601224f704c06fe871fdb1f2e3dff66e9c5","name":"music_sessions_@2.csv","type":"text/csv","lastModified":1649801579199.388,"size":4057},{"id":"582e93e974af24f59d22e4cd9044060d7ca8314d20f84a38215673634b69a5e4030b55e51d9da23d180f3ba7fab8e333dc92b77298347c1e4ba78c7546e5ef33","href":"https://static.observableusercontent.com/files/582e93e974af24f59d22e4cd9044060d7ca8314d20f84a38215673634b69a5e4030b55e51d9da23d180f3ba7fab8e333dc92b77298347c1e4ba78c7546e5ef33","name":"music_sessions_-2.csv","type":"text/csv","lastModified":1667153646707.348,"size":4229}] 47:{"id":"134e5e20314dcbb7","slug":"colaboraciones-bzrp-mussic-sessions","title":"Colaboraciones BZRP Music Sessions","thumbnail":"1e015ade06bb3012d8108762d7990cd2db636656dbb09bec3a0e40f07d666c86","access_level":"public","create_time":"$D2022-03-26T17:33:21.123Z","update_time":"$D2022-10-30T18:14:06.196Z","view_time":null,"first_public_time":"$D2022-04-12T22:20:11.708Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"57512136fa23f2fc","login":"violetr","name":"Violeta Roizman","avatar_url":"https://avatars-next.observableusercontent.com/886071341bb01bb3e2812400705398681063494f3a5ac221d5862b544303e6dd","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":230,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b0ec30342920f0","login":"violetr","name":"Violeta Roizman","avatar_url":"https://avatars-next.observableusercontent.com/886071341bb01bb3e2812400705398681063494f3a5ac221d5862b544303e6dd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"b5b0ec30342920f0","login":"violetr","name":"Violeta Roizman","avatar_url":"https://avatars-next.observableusercontent.com/886071341bb01bb3e2812400705398681063494f3a5ac221d5862b544303e6dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Colaboraciones BZRP Music Sessions","cells":[{"id":0,"value":"# Colaboraciones BZRP Music Sessions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"Object.keys(colores)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"colores = ({\"Argentina\": \"gold\",\n \"Uruguay\": \"magenta\", \n \"Chile\": \"chartreuse\",\n \"Puerto Rico\": \"blue\",\n \"República Dominicana\": \"blueviolet\",\n \"México\": \"orangered\",\n \"Venezuela\": \"aqua\",\n \"España\": \"orangered\",\n \"Colombia\": \"white\",\n \"Marruecos\": \"chartreuse\",\n \"Bélgica\": \"gold\",\n \"Francia\": \"white\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"sessions_centroids","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"width = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"sessions_countries_all = FileAttachment(\"music_sessions_-2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"sessions_countries = d3.filter(sessions_countries_all, d => d.numero != \"17.5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"sessions_centroids = {\nconst names = countries.features.map(myFunction1)\nfunction myFunction1(num) {\n return num.properties.name;\n}\n \nconst centroid = countries.features.map(myFunction2)\nfunction myFunction2(num) {\n return path.centroid(num);\n}\n \nconst count = sessions_countries.map(myFunction3)\nfunction myFunction3(num) {\n return centroid[names.indexOf(num.Pais_ingles)];\n}\n\n//sessions_countries.map(myFunction4)\n\nfor (let step=0;step < sessions_countries.length;step++) {\n if (sessions_countries[step].Pais_ingles == 'France') {\n sessions_countries[step].location = projection([2.3522, 48.8566])\n } else {\n sessions_countries[step].location = count[step]\n }\n \n //num.location = cont\n}\nreturn sessions_countries\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"edges = {\n const edges = [];\n for(let i=0; i