31:T717,dendrogram = { const root = cluster(data); const width= 900; const height= 400; // var ymax = d3.max(root.descendants(), function(d) { return d.y; }); // var ymin = d3.min(root.descendants(), function(d) { return d.y; }); // var fx = d3.scaleLinear().domain([ymax, ymin]).range([0, width]); function elbow(d) { return "M" + d.source.y/2 + "," + d.source.x + "V" + d.target.x + "H" + d.target.y/2; } let x0 = 50; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`); const link = g.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1) .selectAll("path") .data(root.links()) .join("path") .attr("d", elbow); const node = g.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.y/2},${d.x})`); node.append("circle") .attr("fill", d => d.children ? "grey " : "black") .attr("r", d => d.children ? 0 : 1); node.append("text") .attr("dy", "0.31em") .attr("x", d => d.children ? -6 : 6) .attr("text-anchor", d => d.children ? "end" : "start") .attr("font-size", d => d.children ? "0.8em" : "0.3em") .text(d => d.children ? " " : d.data.name) .clone(true).lower() .attr("fill", "black") .attr("outline", "red") return svg.node(); }32:T700,chart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height); svg.append("g") .call(yAxis); svg.append("g") .call(xAxis); let key="cl"+value let key2=value2 svg.selectAll('.line') .data(myDataGrouped) .join('path') .attr("class", "line") .attr("d", d =>(lineMultiCases(d[1]))) .attr('stroke', function(d) { if(d[1][1]["cl3"] == key2 ) { return myColors(d[1][1]["cl3"]) } else {return "lightgrey"} }) .style("fill", "none") .style("opacity", 0.5) .style("stroke-width", function(d) { if(d[1][1]["cl3"] == key2 ) { return 2 } else {return 0.5} }) .on("mouseover", function(e,d,i) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible') .html(` ${d[0]}
`); ;}) .on('mousemove', function (e) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') }) .on("mouseout", function(e,d) { tooltip .style('visibility', 'hidden') ;}); return svg.node(); }33:[{"id":"8431cc515056d6ca4e1f7a598674ab22c888613894c316a0a1a1891c3fb8a325c384809d171fc6d297e67cf9959a7dfc417a0cc8c53a337fbb4366817a73573f","href":"https://static.observableusercontent.com/files/8431cc515056d6ca4e1f7a598674ab22c888613894c316a0a1a1891c3fb8a325c384809d171fc6d297e67cf9959a7dfc417a0cc8c53a337fbb4366817a73573f","name":"selectedFilled_clusters@1.csv","type":"text/csv","lastModified":1610078188606.33,"size":538597},{"id":"f3fd67b739213db23653aa05dbc7420f340139cb2b4d52afb58c57a6b13631204ff6c3c031f3936e77add84bcef4a6fabb3a98b1f20534f563fde0de51b49762","href":"https://static.observableusercontent.com/files/f3fd67b739213db23653aa05dbc7420f340139cb2b4d52afb58c57a6b13631204ff6c3c031f3936e77add84bcef4a6fabb3a98b1f20534f563fde0de51b49762","name":"world-110m.geo.json","type":"application/json","lastModified":1610078188606.33,"size":252486},{"id":"09a62b0355dfb6225378f2d1206cc6d7d47a538a2df7f8e845ed66f5bdfa88b90d5f1ba364df96827450647e216074fc196e73cbd226c9601aa5ecdc1a7f0b8e","href":"https://static.observableusercontent.com/files/09a62b0355dfb6225378f2d1206cc6d7d47a538a2df7f8e845ed66f5bdfa88b90d5f1ba364df96827450647e216074fc196e73cbd226c9601aa5ecdc1a7f0b8e","name":"labelsdf_clusters@3.csv","type":"text/csv","lastModified":1610078188606.33,"size":5796},{"id":"4684ae71c4ca7f30f698f523b1d93df34fe923867772c0c72f8ae3fe1fbb2926458c3228416e3d9cc402063a75689284f5b67b73035fc1ebc16b7acd348cbaa0","href":"https://static.observableusercontent.com/files/4684ae71c4ca7f30f698f523b1d93df34fe923867772c0c72f8ae3fe1fbb2926458c3228416e3d9cc402063a75689284f5b67b73035fc1ebc16b7acd348cbaa0","name":"data@1.json","type":"application/json","lastModified":1610078188606.33,"size":10614}] 2f:{"title":"HIERARCHICAL CLUSTERING","cells":[{"id":59,"value":"md` # HIERARCHICAL CLUSTERING`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md` ## 1. Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md `This shows the results of cluster analysis performed on COVID-19 data. The aim of the analysis was to find groups of countries that are having a similar time evolution of weekly deaths. The analysis was based on the data retreived from Our World in Data website on 26.11.2020.\nThis visualization shows: \n- a demonstration of the effect of selecting different amount of clusters `\n \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## 2. Data preparation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md `**-1. Dendrogram**: data is read from a dedicated static file attached to the notebook \"data.json\" . This file contains the results of the hierarchical clustering needed to build a dendogram. The file is json output from the r script used to perform the hierarchical clustering analysis. Data is feed as such into the D3 script. Within the script the data will be changed to hierarchy and then to cluster format.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"data = FileAttachment(\"data@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"md `**-2. Cluster information** : Data is read from a dedicated static csv file containing the list of countries in the order they appear in the dendrogram and their affiliation to clusters according to four different dendogram cutting height \"labelsdf_cluster.csv\". Keys renamed. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"clusters=FileAttachment(\"labelsdf_clusters@3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1330,"value":"clusters_clean= clusters\n.map(d => {return {\n id: d.iso_code,\n location: d.location,\n cl1 : +d.cluster3,\n cl2 : +d.cluster5,\n cl3 : +d.cluster11,\n cl4 :+d.cluster24,\n };}\n );\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"csvToMap = (data, key)=>{\n let newMap = new Map();\n for(let i in data){\n newMap.set(data[i][key],data[i]);\n }\n return newMap;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1365,"value":"clustersMap = csvToMap(clusters_clean, 'id');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"clusterswithid = Object.fromEntries(clustersMap);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1657,"value":"md `**--- topographical data** : the customary data file, attached as json `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"value":"world = FileAttachment(\"world-110m.geo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"md `**-3. Temporal data** : Data is read from a dedicated static csv file containing gapfilled data and the results of the different clusters attached to the notebook \"selectedFilled_clusters.csv\". We select the columns we want to use and group the data by country. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"manyClustersData = FileAttachment(\"selectedFilled_clusters@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1812,"value":"myData= manyClustersData\n.map(d => {return {\n location:d.location,\n date : new Date(d.week),\n deaths: +d.total_deaths_per_million,\n cl1 : +d.cluster3,\n cl2 : +d.cluster5,\n cl3 : +d.cluster11,\n cl4 :+d.cluster24,\n };}\n );\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1808,"value":"myDataGrouped= d3.groups(myData, d => d.location)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## 3. Visualization and description `","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"md` The visual shows a static dendogram, and a world map and time series that can be affected via a sliding bars. With the first selector we can choose the amount of clusters and that will affect the coloring of the countries. The second selector let us view the contents of the clusters for the optimal partition (11) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"choropleth = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n \nlet key=\"cl\"+value;\n \n svg.selectAll(\"path\")\n .data(world.features)\n .join(\"path\")\n .attr(\"fill\", d => \n clusterswithid[d.id] != undefined? myColors(clusterswithid[d.id][key]) : \"grey\" )\n .attr(\"d\", path)\n .attr(\"class\", \"countries\");\n \n \n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"viewof value = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1768,"value":"md` Move the selector to choose a diferent number of clusters. From left to right each step shows: 0,3,5,11, and 24 clusters. Colors denote the countries belonging to the same cluster. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"md`During the analysis, 3,5,and 11 come up as possible number of clusters, the correct number turned up to be 11. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1851,"value":"md`This second selector let's you see the shape of the time series for each of the 11 clusters. You have chosen cluster ${value2}. \n\nHover over the lines to see the country names` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1781,"value":"viewof value2 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Discussion, issues to develop`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1576,"value":"md `Dendograms with so many nodes are difficult to read. The visualization was planned to help reader identify the countries in the clusters not by the text labels, but by the color codes directly related to the map. For the effect to work 1) the map was planned to be placed next to the dendogram (the reason why the dendogram is squeezed to the left) and 2) the nodes of the countries should have changed colors as well, to make the connection with the map. But the json file did not contain any extra information to allow for that. Further dataset manipulation would have been needed. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"md `Scaling.The dendogram is missing proper scaling. The cluster function in D3 build based on the depth of the node, but dendogrames are build based on the distance betwen nodes and between agglomerated nodes. This is not properly reflected now`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1623,"value":"md `The other elements (map, slider, multiline plot) are relatively simple. The challenge was to identify the correct element in the dataset to link to the shape or attribute. THIS is the most difficult part for a novice to understand and work around `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1640,"value":"md `Colors. A definite challenge is to use the colors nicely when having to display up to 24 discrete entities. It is difficult to make the colors perceptually different from each other. Also, I would have liked to retain similar hues as the bigger clusters get smaller and smaller. It would look more pleasant and informative. Now the list of colors is used in order and the effect is lost. This would need more planning, probably involving the renaming of the clusters, because the colors are picked from a list according to the number of the cluster. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"md `Extras. Need to add nice labels and use transitions. I would like the tooltip to have the same color background than the line. Zoom on the dendogram to see the names. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"md`## 4. Conclusions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1648,"value":"md ` This has been not perphaps the best use for D3, same result could have been achived with other tools. But it has been a good exercise involving different data structures for training D3-thinking. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"height=500;\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"width= 800; ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"html`