2f:T443,horizontal_swarm = // Create the Observable Plot with the custom tick format Plot.plot({ height: 600, width: 1200, marginBottom: 50, className: "horizontal-swarm", style: {background:"transparent", fontSize:15, fontFamily:"Roboto Condensed"}, x: { tickSize: 0, label: 'HRS : MIN', tickFormat: customTickFormat }, y: {ticks:false}, marks: [ Plot.dot(subset, Plot.dodgeY({ r: 9, anchor: "middle", title : "country_iso3", padding: 2, fill: d => d.country_iso3 === selectedIsoCode ? '#1B98E0' : '#DFDFDF', x: "hoursPerDayCombined", })), Plot.dot(subset, Plot.dodgeY( Plot.pointer({ r: 9, anchor: "middle", title : d=> getCountryNameByISO3(d.country_iso3) + '\n' + decimalToHoursMinutes(d.hoursPerDayCombined), padding: 2, fill: '#00C49A', tip: "xy", x: "hoursPerDayCombined"}) )), Plot.ruleX(subset, Plot.groupZ({ x: "median" }, { x: "hoursPerDayCombined", stroke: "#393939", strokeWidth: 2.5, strokeDasharray: [5, 5], })), ], }); 30:Ta7e,viewof mymap = { const width = 960; const height = 500; // Define a projection const projection = d3.geoNaturalEarth1() .scale(200) .translate([width / 2, height / 1.5]); countriesGeo.features = countriesGeo.features.filter(feature => feature.properties.ADMIN !== "Antarctica"); // Create a path generator with the projection const path = d3.geoPath().projection(projection); const bounds = path.bounds(countriesGeo); // Calculate the viewBox values const viewBoxX = bounds[0][0]; const viewBoxY = bounds[0][1]; const viewBoxWidth = bounds[1][0] - bounds[0][0]; const viewBoxHeight = bounds[1][1] - bounds[0][1]; // Create the SVG element with the calculated viewBox const svg = d3.create("svg") .attr("viewBox", `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`); // Calculate the minimum and maximum values of hoursPerDayCombined var minHours = d3.min(subset, d => d.hoursPerDayCombined); var maxHours = d3.max(subset, d => d.hoursPerDayCombined); // Define the number of threshold values you want (adjust as needed) var numThresholds = 7; const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); // Create a dynamic color scale var colorScale = d3.scaleThreshold() .domain(d3.range(minHours, maxHours, (maxHours - minHours) / numThresholds)) .range(d3.schemeBuPu[numThresholds]); // Draw map svg.append("g") .selectAll("path") .data(countriesGeo.features) .enter().append("path") .attr("d", path) .attr("stroke", "white") .attr("stroke-width", 0.5) //function to create choropleth fill .attr("fill", function(d) { var country = d.properties.ISO_A3; var countryData = subset.filter(x => x.country_iso3 === country); if (countryData.length > 0) { return colorScale(countryData[0].hoursPerDayCombined); } else { return "#ccc"; // default color for missing data } }) .on("mouseover", function (event, i) { const hoveredCountryISO = countriesGeo.features[i].properties.ISO_A3; const hoveredCountry = countriesGeo.features[i].properties.ADMIN; svg.selectAll("path") .style("fill-opacity", (x => x.properties.ADMIN === hoveredCountry ? 1 : 0.2)); mutable hoveredCountryValue = 'x'; console.log(hoveredCountry); }) .on("mouseout", function (d) { svg.selectAll("path").style("fill-opacity", 1); }); //clicked on outline const select_outline = svg.append("path") .attr("fill", "#F45B69") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("pointer-events", "none"); return svg.node() } 31:T14d3,function voronoiMap(hoveredCategory) { //const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.left + margin.right)); // svg // .append("rect") // .attr("width", "100%") // .attr("height", "100%") // .style("fill", "white"); const svg = d3.create("svg") .attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.left + margin.right]) .attr("style", "max-width: 100%; height: auto; height: intrinsic; background-color:transparent;"); const voronoi = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const labels = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const hour_labels = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let seed = new Math.seedrandom(20); let voronoiTreeMap = d3.voronoiTreemap() .prng(seed) .clip(ellipse); voronoiTreeMap(category_hierarchy); colorHierarchy(category_hierarchy); let allNodes = category_hierarchy.descendants() .sort((a, b) => b.depth - a.depth) .map((d, i) => Object.assign({}, d, {id: i})); let hoveredShape = null; voronoi.selectAll('path') .data(allNodes) .enter() .append('path') .attr('d', d => "M" + d.polygon.join("L") + "Z") .style('fill', d => d.parent ? d.parent.color : d.color) .attr("stroke", "white") .attr("stroke-width", 0) .style('fill-opacity', d => d.depth === 2 ? 1 : 0) .style('opacity', d => hoveredCategory === null || d.data.Category === hoveredCategory ? 1 : 0.5) // Use hoveredCategory variable .attr('pointer-events', d => d.depth === 2 ? 'all' : 'none') .on('mouseenter', function (d) { // Select the current element and set its opacity to 1 d3.select(this).style('fill-opacity', 1); d3.select(this).style("cursor", "pointer"); // Set opacity to 0.5 for all other elements voronoi.selectAll('path') .filter(e => e.id !== d.id) .style('opacity', 0.4); // Other actions you want to perform on mouse enter let label = labels.select(`.label-${d.id}`); label.attr('opacity', 1); let hour_label = hour_labels.select(`.label-${d.id}`); hour_label.attr('opacity', 1); }) .on('mouseleave', function (d) { // Select the current element and restore its original fill opacity d3.select(this).style('fill-opacity', d => d.depth === 2 ? 1 : 0.5); // Restore opacity to 1 for all other elements voronoi.selectAll('path') .filter(e => e.id !== d.id) .style('opacity', d => d.depth === 2 ? 1 : 0); // Other actions you want to perform on mouse leave let label = labels.select(`.label-${d.id}`); label.attr('opacity', d => d.data.hoursPerDayCombined > 0.8 ? 1 : 0); let hour_label = hour_labels.select(`.label-${d.id}`); hour_label.attr('opacity', d => d.data.hoursPerDayCombined > 0.8 ? 1 : 0); }) .on('click', d => { mutable clickedSubcategory = d.data.key || d.data.Subcategory; // Store the label's value in clickedCategory // Find the target div with class "beeswarm" const targetDiv = document.getElementById('node-568'); // Scroll to the target div smoothly if (targetDiv) { targetDiv.scrollIntoView({behavior: 'smooth' }); } else { console.log('Target div was not found.'); } }) .transition() .duration(500) .attr("stroke-width", d => 7 - d.depth*2.8) .style('fill', d => d.color); //category labels labels.selectAll('text') .data(allNodes.filter(d => d.depth === 2 )) .enter() .append('text') .attr('class', d => `label-${d.id}`) .attr('text-anchor', 'middle') .attr("transform", d => "translate("+[d.polygon.site.x, d.polygon.site.y+6]+")") .text(d => d.data.key || d.data.Subcategory) // .attr('opacity', d => d.data.key === hoveredShape | d.data.hoursPerDayCombined > 0.8 ? 1 : 0) .attr('opacity', d => (hoveredCategory !== null && d.data.Category === hoveredCategory) || (hoveredCategory === null && d.data.hoursPerDayCombined) > 0.8 ? 1 : 0) .attr('cursor', 'pointer') .attr('pointer-events', 'none') .attr('fill', d => d.data.Category === 'Experience oriented' ? 'white' : 'black') .style('font-family', 'Oswald') .style('text-transform', 'capitalize') .style('font-size', d => d.data.hoursPerDayCombined > 3 ? "30px" : d.data.hoursPerDayCombined > 1 ? "20px": d.data.hoursPerDayCombined > 0.8 ? "16px" : "14px"); //hours combined labels hour_labels.selectAll('text') .data(allNodes.filter(d => d.depth === 2 )) .enter() .append('text') .attr('class', d => `label-${d.id}`) .attr('text-anchor', 'middle') .attr("transform", d => "translate("+[d.polygon.site.x, d.polygon.site.y+25]+")") .text(d => decimalToHoursMinutes(d.data.hoursPerDayCombined)) .attr('opacity', d => (hoveredCategory !== null && d.data.Category === hoveredCategory) || (hoveredCategory === null && d.data.hoursPerDayCombined) > 0.8 ? 1 : 0) .attr('cursor', 'pointer') .attr('pointer-events', 'none') .attr('fill', d => d.data.Category === 'Experience oriented' ? 'white' : 'black') .style('font-size', d=> d.data.hoursPerDayCombined > 0.3 ? '14px' : "12px") .style('font-family', 'Roboto Condensed'); return svg.node(); }32:Te89,plot2 = { const width = 550; const height = 600; const margin = { top: 20, right: 10, bottom: 30, left: 10 }; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic; background-color:transparent"); // Define your data (assuming you have a 'query' dataset) const data = query // Create scales for x and y axes const xScale = d3.scaleLinear() .domain([0, 30]) .range([margin.left, width - margin.right]); const yScale = d3.scaleBand() .domain(y_axis_list) .range([margin.top, height - margin.bottom]) .padding(0.1); // ... Your existing code ... // Add circles and assign unique IDs based on 'category' svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", d => xScale(2)) .attr("cy", d => yScale(d.category)) .attr("r", 15) .attr("fill", d => categoryColor(d.category)) .attr("id", d => `${d.category}`) // Assign a unique ID based on 'category' .style("fill-opacity", 1) // Set initial fill-opacity to 0.5 for all circles .on("mouseover", function (d) { const hoveredId = `${d.category}`; mutable hoveredCategory = hoveredId; svg.selectAll("circle") .style("fill-opacity", circle => (circle.category === hoveredId ? 1 : 0.5)); svg.selectAll(".title") .style("fill-opacity", circle => (circle.category === hoveredId ? 1 : 0.5)) .style("font-weight", circle => (circle.category === hoveredId ? 'bold' : 'normal')); svg.selectAll(".value") .style("fill-opacity", circle => (circle.category === hoveredId ? 1 : 0.5)) .style("font-weight", circle => (circle.category === hoveredId ? 'bold' : 'normal')); }) .on("mouseout", function () { mutable hoveredCategory = null; // Reset fill-opacity for all circles svg.selectAll("circle").style("fill-opacity", 1); svg.selectAll(".title").style("fill-opacity", 1).style('font-weight','normal'); svg.selectAll(".value").style("fill-opacity", 1).style('font-weight','normal'); }); svg.selectAll(".title") .data(data) .enter() .append("text") .attr("class", "title") .attr("x", d => xScale(4)) .attr("y", d => yScale(d.category)) .attr("font-size", 20) .attr("font-family", "Oswald") .attr("dy", "0.35em") .text(d => d.category) .on("mouseover", function (d) { const hoveredId = `${d.category}`; mutable hoveredCategory = hoveredId; svg.selectAll("circle") .style("fill-opacity", circle => (circle.category === hoveredId ? 1 : 0.5)); svg.selectAll(".title") .style("fill-opacity", circle => (circle.category === hoveredId ? 1 : 0.5)) .style("font-weight", circle => (circle.category === hoveredId ? 'bold' : 'normal')); svg.selectAll(".value") .style("fill-opacity", circle => (circle.category === hoveredId ? 1 : 0.5)) .style("font-weight", circle => (circle.category === hoveredId ? 'bold' : 'normal')); }) .on("mouseout", function () { mutable hoveredCategory = null; // Reset fill-opacity for all circles svg.selectAll("circle").style("fill-opacity", 1); svg.selectAll(".title").style("fill-opacity", 1).style('font-weight','normal'); svg.selectAll(".value").style("fill-opacity", 1).style('font-weight','normal'); });; svg.selectAll(".value") .data(data) .enter() .append("text") .attr("class", "value") .attr("x", d => xScale(25)) .attr("y", d => yScale(d.category)) .attr("font-size", 18) .attr("font-family", "Roboto Condensed") .attr("text-anchor", "end") .attr("dy", "0.35em") .text(d => decimalToHoursMinutes(d.country_stat)) .sort((a, b) => d3.ascending(a.text, b.text)); return svg.node(); }33:T6f7,34:[{"id":"fda2fa7b13c1bd81ebc16555beb918c6a12145cd5a435654314fd15748b601ce4d0a77fe2b07d24249b53903d0ec145de71b47daaf712000714535b298310923","href":"https://static.observableusercontent.com/files/fda2fa7b13c1bd81ebc16555beb918c6a12145cd5a435654314fd15748b601ce4d0a77fe2b07d24249b53903d0ec145de71b47daaf712000714535b298310923","name":"countries.geojson","type":"application/geo+json","lastModified":1695051590759.255,"size":24261278}] 2d:{"title":"The Global Human Day","cells":[{"id":0,"value":"# The Global Human Day\nData set provided by R for Data Science, featuring a research study called [The Global Human Day](https://www.pnas.org/doi/10.1073/pnas.2219564120). The study aims to create a \"global estimate of time use by all humans\" and provides a snapshot of how humans allocate time across various activities. \n\nThere are a total of 20 activity classifications, or subcategories, that align with 8 parent categories (Somatic maintenance, Experience oriented, Food provision, Nonfood provision, Organization, Deliberate neural restructuring, Maintenance of surroundings, and Technosphere modification).\n\nInformation is available per country. This notebook explores how countries compare across different categories.","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"## Breakdown by Category: ${selectedCountry}","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"viewof selectedCountry = Inputs.select(countries, {label: \"Country\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"

${treemap}

${plot2}

`","pinned":false,"hidden":false,"mode":"html"},{"id":565,"value":"## How does ${selectedCountry} compare to other countries?\nSelect a subcategory in the dropdown below or the diagram above.","pinned":false,"hidden":false,"mode":"md"},{"id":568,"value":"viewof selectedSubcategory = Inputs.select(subcategories, {label: \"Subcategory\", value: clickedSubcategory})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"People in **${selectedCountry}** spend on average **${decimalToHoursMinutes(textHours)}** for **${selectedSubcategory}**. This is **${compareHours(textHours, textMedian)} than** the global median by **${decimalToHoursMinutes(textHours-textMedian)}**.","pinned":false,"hidden":false,"mode":"md"},{"id":534,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"vertical_swarm = // Create the Observable Plot with the custom tick format\nPlot.plot({\n height: 1200,\n width: 600,\n className: \"vertical-swarm\",\n style: {background:\"transparent\", fontSize:15, fontFamily:\"Roboto Condensed\"},\n y: {\n tickSize: 0,\n label: 'HRS : MIN',\n tickFormat: customTickFormat\n },\n x: {ticks:false},\n marks: [\n Plot.dot(subset, Plot.dodgeX({\n r: 9,\n anchor: \"middle\",\n title : \"country_iso3\",\n padding: 2,\n fill: d => d.country_iso3 === selectedIsoCode ? '#1B98E0' : '#DFDFDF',\n y: \"hoursPerDayCombined\",\n })),\n Plot.dot(subset, Plot.dodgeX(\n Plot.pointer({\n r: 9,\n anchor: \"middle\",\n title : \"country_iso3\",\n padding: 2,\n fill: '#00C49A',\n tip: \"xy\",\n y: \"hoursPerDayCombined\"})\n )),\n Plot.ruleY(subset, Plot.groupZ({ y: \"median\" }, {\n y: \"hoursPerDayCombined\",\n stroke: \"#393939\",\n strokeWidth: 2.5,\n strokeDasharray: [5, 5],\n })),\n ],\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"## Choropleth Map: ${selectedSubcategory}","pinned":false,"hidden":false,"mode":"md"},{"id":1393,"value":"Plot.legend({width:700,\n height:60,\n marginLeft:10,\n style: {fontFamily: \"Roboto Condensed\"},\n color: {type: \"linear\", \n scheme:\"BuPu\", \n domain: d3.range(minHours, maxHours, (maxHours - minHours) / 7),\n tickFormat: decimalToHoursMinutes}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"mutable hoveredCountryValue = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1199,"value":"### Dynamic Text Test","pinned":false,"hidden":false,"mode":"md"},{"id":1107,"value":"textHours = subset.filter(d => (d.Subcategory === selectedSubcategory & d.country_iso3 === selectedIsoCode))[0].hoursPerDayCombined","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"textMedian = d3.median(subset.filter(d => d.Subcategory === selectedSubcategory), d=> d.hoursPerDayCombined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"function compareHours(textHours, textMedian) {\n // Convert the input values to numbers (assuming they represent numbers)\n const hours = parseFloat(textHours);\n const median = parseFloat(textMedian);\n\n if (!isNaN(hours) && !isNaN(median)) {\n if (hours > median) {\n return \"higher\";\n } else {\n return \"less\";\n }\n } else {\n // Handle the case where input values are not valid numbers\n return \"Invalid input\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"decimalToHoursMinutes(textMedian)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"decimalToHoursMinutes(textHours)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"decimalToHoursMinutes(Math.abs(textHours-textMedian))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"compareHours(textHours, textMedian)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"minHours = d3.min(subset, d => d.hoursPerDayCombined);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1402,"value":"maxHours = d3.max(subset, d => d.hoursPerDayCombined);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1405,"value":"domain = d3.range(minHours, maxHours, (maxHours - minHours) / 7)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1364,"value":"countriesGeo = FileAttachment(\"countries.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1021,"value":"## Behind The Scenes Code\n\n### Plot 1: Voronoi Treemap (D3)\nThe Voronoi treemap code is modeled off of [Will Chase's example](https://observablehq.com/@will-r-chase/voronoi-treemap) with GDP.","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"Set up mutable variable to pass into voronoiMap function. Selected category from map will be stored in this value when a user clicks on it. This is then passed to the selectedCategory dropdown input.","pinned":false,"hidden":false,"mode":"md"},{"id":708,"value":"mutable clickedSubcategory = \"Food preparation\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1309,"value":"mutable hoveredCategory = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":674,"value":"treemap = voronoiMap(hoveredCategory)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"### Plot 2: Category Allocation\nThis chart represents the text next to the voronoi treemap above. Aggregates total hours and minutes by parent country (e.g. Somatic maintenance, Food provision, etc).","pinned":false,"hidden":false,"mode":"md"},{"id":1133,"value":"plot2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"## Utils\nBorrowed from Will Chase's notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"height = 700 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"width = 700 - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"margin = ({top: 20, right: 20, bottom: 50, left: 50})","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"ellipse = d3\n .range(100)\n .map(i => [\n (width * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,\n (height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2\n ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\", 'seedrandom@2.4.3/seedrandom.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"flubber = require(\"flubber@0.4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":474,"value":"## Other Functions","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"// Define a custom tick format function to convert decimal hours to minutes\nfunction customTickFormat(value) {\n const hours = Math.floor(value);\n const minutes = Math.round((value - hours) * 60);\n return `${hours}:${String(minutes).padStart(2, '0')}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"function decimalToHoursMinutes(decimal) {\n // Calculate the hours by rounding down the decimal number\n const hours = Math.floor(decimal);\n\n // Calculate the remaining minutes by multiplying the decimal part by 60\n const minutes = Math.round((decimal - hours) * 60);\n\n let timeString = '';\n\n // Add hours to the output only if it's greater than 0\n if (hours > 0) {\n timeString += `${hours} hr${hours > 1 ? 's' : ''}`;\n }\n\n // Add minutes to the output only if it's greater than 0\n if (minutes > 0) {\n if (timeString) {\n timeString += ' ';\n }\n timeString += `${minutes} min`;\n }\n\n // If neither hours nor minutes are greater than 0, return \"0 min\"\n if (!timeString) {\n timeString = \"0 min\";\n }\n\n return timeString;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1351,"value":"function getCountryNameByISO3(code) {\n // Assuming tt_countries is an array of country objects\n // with 'country_name' and 'country_iso3' fields\n const country = tt_countries.find((item) => item.country_iso3 === code);\n\n if (country) {\n return country.country_name;\n } else {\n return \"Country not found\"; // You can customize the error message\n }\n}\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"## Data\nProvided by The Global Human Day. Imported directly from R for Data Science TidyTuesday's GitHub repository.","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"tt_ghd_countries = d3.csv(\"https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2023/2023-09-12/all_countries.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":984,"value":"tt_countries = d3.csv(\"https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2023/2023-09-12/country_regions.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"Subset data based on country input.","pinned":false,"hidden":false,"mode":"md"},{"id":989,"value":"selectedIsoCode = tt_countries.filter(d => {return d.country_name === selectedCountry})[0].country_iso3","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"tt_country = tt_ghd_countries.filter(d => {return d.country_iso3 === selectedIsoCode})","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"Color mapping - these functions are written by Will Chase, I modified to fit the data.","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"// function taken directly from Will Chase, modified to fit categories instead of regions\nfunction colorHierarchy(hierarchy) {\n if(hierarchy.depth === 0) {\n hierarchy.color = 'black';\n } else if(hierarchy.depth === 1){\n hierarchy.color = categoryColor(hierarchy.data.key);\n } else {\n hierarchy.color = hierarchy.parent.color;\n }\n if(hierarchy.children) {\n hierarchy.children.forEach( child => colorHierarchy(child))\n } \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"categoryColor = function(category) {\n var colors = {\n \"Food provision\": \"#48EB70\",\n \"Nonfood provision\": \"#FF9D13\",\n \"Technosphere modification\": \"#DCDCDC\",\n \"Maintenance of surroundings\": \"#F95738\",\n \"Somatic maintenance\": \"#EBCD49\",\n \"Deliberate neural restructuring\": \"#4DEAFF\",\n \"Organization\" : \"#00BFB2\", \n \"Experience oriented\" : \"#7F2FFF\"\n };\n return colors[category];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"Reshape data in nested format for treemap diagram.","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"category_hierarchy = d3.hierarchy(country_nested, d => d.values)\n .sum(d => d.hoursPerDayCombined)","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"country_nested = {\n let country_nest = d3.nest()\n .key(d => d.Category)\n .entries(tt_country)\n \n return {key: \"country_nest\", values: country_nest}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"countries = [...new Set(tt_countries.map(f => f.country_name))].sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"subcategories = [...new Set(tt_ghd_countries.map(f => f.Subcategory))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":920,"value":"categories = [...new Set(query.map(f => f.category))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":963,"value":"y_axis_list = ['Title', ...categories];","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"subset = tt_ghd_countries.filter(d => d.Subcategory === selectedSubcategory)","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"SELECT\n Category as category,\n SUM(CASE WHEN country_group = 'USA' THEN hrs ELSE 0 END) AS country_stat,\n AVG(CASE WHEN country_group = 'World Avg' THEN hrs ELSE 0 END) AS global_stat\nFROM (\n SELECT\n country_iso3\n ,CASE WHEN country_iso3 = ${selectedIsoCode} THEN 'USA' ELSE 'World Avg' END AS country_group,\n Category,\n SUM(hoursPerDayCombined) as hrs\n FROM tt_ghd_countries\n GROUP BY 1,2,3\n) a\nGROUP BY Category\n ORDER BY 2 desc;\n","pinned":true,"hidden":false,"mode":"sql","output":"query","database":"var:tt_ghd_countries"},{"id":1046,"value":"## CSS","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"$33","pinned":false,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}