29:null 2a:["$","title",null,{"children":"Test 2 | Rebecca Kalbfell | Observable"}] 2f:T7fe,{ let width = 932; let height = 932; const svgHTML = html``; const svg = d3.select(svgHTML) .style("width", "100%") .style("height", "auto") const leaf = svg.selectAll("g") .data(packedData.leaves()) .enter().append("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); let circle = leaf.append("circle") .attr("r", d => d.r) .attr("fill", d => "#bbccff"); let current_circle = undefined; let format = d3.format(",d") function selectOccupation(d) { // cleanup previous selected circle if(current_circle !== undefined){ current_circle.attr("fill", d => "#bbccff"); svg.selectAll("#details-popup").remove(); } // select the circle current_circle = d3.select(this); current_circle.attr("fill","#b2e1f9"); let textblock = svg.selectAll("#details-popup") .data([d]) .enter() .append("g") .attr("id", "details-popup") .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("transform", d => `translate(0, 20)`); textblock.append("text") .text("Occupation Details:") .attr("font-weight", "bold"); textblock.append("text") .text(d => "Description: " + d.data.Occupation_Name) .attr("y", "16"); textblock.append("text") .text(d => "Current Employment: " + format(d.data.Employment)) .attr("y", "32"); textblock.append("text") .text(d => "Projected Growth: " + format(d.data.Employment_Growth)) .attr("y", "48"); textblock.append("text") .text(d => "Recent Labour Market Conditions: " + d.data.Recent_Labour_Market_Conditions.toUpperCase()) .attr("y", "64"); textblock.append("text") .text(d => "Projected Future Labour Market Conditionsh: " + d.data.Future_Labour_Market_Conditions.toUpperCase()) .attr("y", "80"); } circle.on("click", selectOccupation); return svg.node() }30:T83d,graphic_1 = { let width = 932; let height = 932; const svgHTML = html``; const svg = d3.select(svgHTML) .style("width", "100%") .style("height", "auto") const leaf = svg.selectAll("g") .data(highest_packed_data.leaves()) .enter().append("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); let circle = leaf.append("circle") .attr("r", d => d.r) .attr("fill", d => { if(d.data.isGrowing){ return "#80a8b2"; } else{ return "#e9eff0"; } }); let innerCircles = leaf.append("circle") .attr("r", d => { let scale = d3.scaleSqrt() .domain([0, d.data.Miles_High]) .range([0,d.r]); return scale(d.data.Miles_Low); }) .attr("fill", "#d9edf7"); let current_circle = undefined; let format = d3.format(",d") function selectOccupation(d) { // cleanup previous selected circle if(current_circle !== undefined){ current_circle.attr("fill", d => "#d9edf7"); svg.selectAll("#details-popup").remove(); } // select the circle current_circle = d3.select(this); current_circle.attr("fill","#bef8ff"); let textblock = svg.selectAll("#details-popup") .data([d]) .enter() .append("g") .attr("id", "details-popup") .attr("font-size", 14) .attr("font-family", "helvetica") .attr("text-anchor", "start") .attr("transform", d => `translate(0, 100)`); textblock.append("text") .text("Type:"+ d.data.Type) .attr("font-weight", "bold"); textblock.append("text") .text(d => "1990 Road miles (billions): " + d.data.Y1990) .attr("y", "32"); textblock.append("text") .text(d => "2018 Road miles (billions): " + d.data.Y2018) .attr("y", "48"); textblock.append("text") .text(d => "*darker band indicates growth: " + d.data.Growth) .attr("y", "60"); } innerCircles.on("click", selectOccupation); return svg.node() }31:[] 2d:{"id":"5c3e662d33395204","slug":"test-2","title":"Test 2","thumbnail":"e50d1fa2fe4b0f297fe6a4e304f6281ca7a8d9f3315fa4b5d4e28e8b1b7bc342","access_level":"public","create_time":"$D2020-06-10T12:42:17.365Z","update_time":"$D2020-06-12T12:47:36.167Z","view_time":null,"first_public_time":"$D2020-06-10T12:45:35.370Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5a82054c0ddcddcb","login":"rzk90","name":"Rebecca Kalbfell","avatar_url":"https://avatars-next.observableusercontent.com/981ba6e10132006e4d9c95731051fa6fb68e0c280280cd440fa913c0b2954d95","tier":"starter_2024"},"version":84,"publish_version":84,"role":null,"authored":false,"authors":[{"type":"individual","id":"b6f77b26fe08c011","login":"rzk90","name":"Rebecca Kalbfell","avatar_url":"https://avatars-next.observableusercontent.com/981ba6e10132006e4d9c95731051fa6fb68e0c280280cd440fa913c0b2954d95","tier":null}],"members":[{"type":"individual","id":"b6f77b26fe08c011","login":"rzk90","name":"Rebecca Kalbfell","avatar_url":"https://avatars-next.observableusercontent.com/981ba6e10132006e4d9c95731051fa6fb68e0c280280cd440fa913c0b2954d95","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Test 2","cells":[{"id":0,"value":"md`# Test 2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"data_as_array = {\n let data_as_text = await d3.text(\"https://raw.githubusercontent.com/rzk90/FeatherDuster-Pollution1/master/200610_5_Figure_1%20_Road_traffic_increased_by_29%25_from_1990_to_2018.csv\");\n \n return d3.csvParseRows(data_as_text);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"{\n const table = html`

`;\n let tableObject = d3.select(table);\n tableObject.append(\"tr\") \n .selectAll(\"th\") \n .data(data_as_array[0]) \n .enter() \n .append(\"th\") \n .text(d => d);\n return table;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"{\n const table = html`

`;\n \n let tableObject = d3.select(table);\n \n tableObject.append(\"tr\")\n .selectAll()\n .data(data_as_array[0])\n .enter()\n .append(\"th\")\n .text(d => d);\n \n tableObject.selectAll(\"tr\")\n .data(data_as_array.slice(1, 5))\n .enter()\n .append(\"tr\")\n .selectAll()\n .data(d => d)\n .enter()\n .append(\"td\")\n .text(d => d)\n ;\n \n \n return table;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"data_as_json = d3.csv(\"https://raw.githubusercontent.com/rzk90/FeatherDuster-Pollution1/master/200610_5_Figure_1%20_Road_traffic_increased_by_29%25_from_1990_to_2018.csv\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"flatNodeHeirarchy = {\n let root = {children: data_as_json.slice(1)};\n return d3.hierarchy(root).sum(d => d.Y1990);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"packedData = {\n let width = 930;\n let height = 930;\n let pack = d3.pack()\n .size([width, height])\n .padding(3)\n return pack(flatNodeHeirarchy);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"{\n let width = 932;\n let height = 932;\n const svgHTML = html``;\n\n const svg = d3.select(svgHTML)\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n .attr(\"font-size\", 10)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"text-anchor\", \"middle\");\n \n const leaf = svg.selectAll(\"g\")\n .data(packedData.leaves())\n .enter().append(\"g\")\n .attr(\"transform\", d => `translate(${d.x + 1},${d.y + 1})`);\n \n leaf.append(\"circle\")\n .attr(\"r\", d => d.r)\n .attr(\"fill\", d => \"#bbccff\");\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"highest_data_as_json = {\n const data = JSON.parse(JSON.stringify(data_as_json)).slice(1); // make a copy of the data and then get rid of the first row\n\n return data.map(d => {\n if(d.Growth < 0){\n d.isGrowing = false;\n d.Miles_High = Number(d.Y1990);\n d.Miles_Low = Number(d.Y1990) + Number(d.Growth);\n }\n else {\n d.isGrowing = true;\n d.Miles_High = Number(d.Y1990) + Number(d.Growth);\n d.Miles_Low = Number(d.Y1990);\n }\n\n return d;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"highest_packed_data = {\n let root = {children: highest_data_as_json.slice(0,-1)};\n let highest_flat_node_heirarchy = d3.hierarchy(root).sum(d => d.Miles_High);\n \n let width = 930;\n let height = 930;\n let pack = d3.pack()\n .size([width, height])\n .padding(3)\n return pack(highest_flat_node_heirarchy);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"