31:T757,// The 3D choropleth choropleth3D = { let width; if (window.innerWidth <= 768) { width = 0.95 * window.innerWidth; } else { width = 0.8 * window.innerWidth; } let height = 0.6 * width; let container = d3 .create('div') .style('position', 'relative') .style('width', width.toString() + 'px') .style('height', height.toString() + 'px'); let x3d = container .append('x3d') .attr('width', width.toString() + 'px') .attr('height', height.toString() + 'px'); x3d .append('param') .attr('name', 'showProgress') .attr('value', 'false'); let scene = x3d.append('scene'); scene .append("viewpoint") .attr( "centerOfRotation", `${(bounds.xmin + bounds.xmax) / 2} ${(bounds.ymin + bounds.ymax) / 2} 0` ) .attr("position", "60308.49384 -9329.42327 51054.19368") .attr("orientation", "0.79676 -0.23288 -0.55763 1.13770"); let tooltip = container .append('div') .attr('class', 'tooltip') .style('position', 'absolute') .style('text-align', 'center') .style('left', '10px') .style('top', '10px') .style('width', '90px') .style('height', '30px') .style('padding', '2px') .style('background', 'black') .style('color', 'white') .style('border', '0px') .style('border-radius', '8px') .style('pointer-events', 'none') .style('opacity', 0); let T = scene.append('transform').attr('scale', '1,1,0.01'); Promises.delay() .then(function() { let G = T.append('group'); triangulated_regions.forEach(function(c) { G.append(() => province3D(c, 'Con', tooltip)); }); }) .then(function() { T.transition() .duration(500) .attr('scale', '1,1,1'); }); container.on('mousemove', function() { tooltip.style('opacity', 0); }); yield container.node(); x3dom.reload(); }32:T8a9,party_selector = { let party_selector = radio({ title: 'Party', options: [ { label: html`Conservative`, value: 'Con' }, { label: html`Liberal`, value: 'Lib' }, { label: html`NDP`, value: 'NDP' }, { label: html`Bloc QC`, value: 'Bloc QC' } ], value: 'Con' }); Object.assign(party_selector, { onchange: function(evt) { let party = evt.target.value; global_party.party = party; let T = d3.select(choropleth3D).select('transform'); T.transition() .duration(500) .attr('scale', '1,1,0.01'); Promises.delay(500).then(function() { triangulated_regions.forEach(function(province) { let province_code = province.properties.PROVCODE; let color = province_color(province_code, party); let h = 15000 * prov_proportion(province_code, party); let all_pts = Object.values(province.pts); let pt_strings = all_pts.map(function(pts) { let pt_string_top = ''; let pt_string_bot = ''; pts.forEach(function(pt) { pt_string_top = `${pt_string_top}${pt[0]} ${pt[1]} ${h}, `; pt_string_bot = `${pt_string_bot}${pt[0]} ${pt[1]} 0, `; }); return pt_string_top + pt_string_bot; }); let prov3D = T.selectAll(`.${province_code}`); prov3D .selectAll('coordinate.top') .attr('point', (p, k) => pt_strings[k]); prov3D .selectAll('coordinate.side') .attr('point', (p, k) => pt_strings[k]); prov3D .selectAll('coordinate.outline') .attr('point', (p, k) => pt_strings[k]); prov3D.selectAll('material').attr('diffuseColor', color); }); T.transition() .duration(500) .attr('scale', '1,1,1'); }); } }); return party_selector; }33:Tae1,// Generate a 3D view of province to add to the choropleth function province3D(province, party, tooltip) { let province_code = province.properties.PROVCODE; let h = 15000 * prov_proportion(province_code, party); let all_pts = Object.values(province.pts); let all_triangles = Object.values(province.triangles); let all_segments = Object.values(province.segments); let g = d3 .create('group') .attr('class', `${province_code} province`) .attr('title', province_code); let color = province_color(province_code, party); let pt_strings = all_pts.map(function(pts) { let pt_string_top = ''; let pt_string_bot = ''; pts.forEach(function(pt) { pt_string_top = `${pt_string_top}${pt[0]} ${pt[1]} ${h}, `; pt_string_bot = `${pt_string_bot}${pt[0]} ${pt[1]} 0, `; }); return pt_string_top + pt_string_bot; }); all_triangles.forEach(function(triangles, idx) { let top_coord_string = ''; triangles.forEach(function(t) { top_coord_string = `${top_coord_string}${t[0]} ${t[1]} ${t[2]} -1 `; }); let ifsShape = g.append('shape'); let appearance = ifsShape.append('appearance'); appearance.append('material').attr('diffuseColor', color); let ifs = ifsShape .append('IndexedFaceSet') .attr('solid', 'false') .attr('coordIndex', top_coord_string); ifs .append('coordinate') .attr('class', 'top') .attr('point', pt_strings[idx]); }); all_segments.forEach(function(segments, idx) { let side_coord_string = ''; let outline_coord_string = ''; let n = all_pts[idx].length; segments.forEach(function(s) { side_coord_string = `${side_coord_string}${s[0]} ${s[1]} ${s[1] + n} ${s[0] + n} -1 `; outline_coord_string = `${outline_coord_string}${s[0]} ${s[1]} -1 `; }); let ifsShape = g.append('shape'); let appearance = ifsShape.append('appearance'); appearance .append('material') .attr('diffuseColor', color) .attr('shininess', 0.6); let ifs = ifsShape .append('IndexedFaceSet') .attr('solid', 'false') .attr('coordIndex', side_coord_string); ifs .append('coordinate') .attr('class', 'side') .attr('point', pt_strings[idx]); let ilsShape = g.append('shape'); let ils = ilsShape .append('IndexedLineSet') .attr('coordIndex', outline_coord_string) .append('coordinate') .attr('class', 'outline') .attr('point', pt_strings[idx]); }); g.node().onclick = function() { tooltip .transition() .duration(200) .style("opacity", .9); tooltip.html( `${province_code}: ${Math.round( 100 * prov_proportion(province_code, global_party.party) )}%` ); }; return g.node(); }34:[{"id":"c24ff6cc45303a845c64f6d5e4b0c56123734dc485a8738b74fb1de137729c9e8c57d09fdc14ecd85e0314624ac870fe97a2200abf2999e1b731410cceb288b4","href":"https://static.observableusercontent.com/files/c24ff6cc45303a845c64f6d5e4b0c56123734dc485a8738b74fb1de137729c9e8c57d09fdc14ecd85e0314624ac870fe97a2200abf2999e1b731410cceb288b4","name":"FlagOfCanada.png","type":"image/png","lastModified":1595382261420.254,"size":96973},{"id":"446ea81903b4b1d7c6047e84535d942af3f733803321c2d6ab77a6ed1760cf9727eb0f471c5c0f8adaaae3656eb1358749c88d642d6fbd44008fc96c8bd6c7cc","href":"https://static.observableusercontent.com/files/446ea81903b4b1d7c6047e84535d942af3f733803321c2d6ab77a6ed1760cf9727eb0f471c5c0f8adaaae3656eb1358749c88d642d6fbd44008fc96c8bd6c7cc","name":"party_votes_by_province.csv","type":"text/csv","lastModified":1595160457715.488,"size":915},{"id":"adebd7810a260ca05dd68faaf0c3332eaab23b7060b27023d15fe856a55f7e455fc45502e1b165e9f744f16d107eebac95521537da54767c5f2bf3d4d7c5cf58","href":"https://static.observableusercontent.com/files/adebd7810a260ca05dd68faaf0c3332eaab23b7060b27023d15fe856a55f7e455fc45502e1b165e9f744f16d107eebac95521537da54767c5f2bf3d4d7c5cf58","name":"provinces_triangulated.json","type":"application/json","lastModified":1595030404631.636,"size":684843}] 2f:{"title":"Canadian Elections 3D","cells":[{"id":0,"value":"md`# Canadian Elections 3D`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"md`A [choropleth map](https://en.wikipedia.org/wiki/Choropleth_map) illustrate the density of a statistical variable (typically) using color. Alternatively, we can draw a map in 3D and use height or area of the region to indicate density.\n\nThe 3D map below illustrates relative dominance of the major political parties in each Canadian province. You can select the party you're interested in using the radio buttons below the map. The height of each region is proportional to percentage of votes obtained the party in that province and you can click on the provinces to display the exact percentage.\n\nThe data comes from [Elections Canada's analysis of the 43rd General Election](https://www.elections.ca/content.aspx?section=ele&document=index&dir=pas/43ge&lang=e).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"function prov_proportion(prov_code, party) {\n let prov_data = voting_data.filter(o => o.province == prov_code);\n let total_votes = d3.sum(prov_data.map(o => parseInt(o.votes)));\n let party_votes = parseInt(prov_data.filter(o => o.party == party)[0].votes);\n return party_votes / total_votes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"bounds = {\n let all_pts = triangulated_regions.map(r => Object.values(r.pts)).flat(2);\n let xs = all_pts.map(xy => xy[0]);\n let ys = all_pts.map(xy => xy[1]);\n let xmin = d3.min(xs);\n let xmax = d3.max(xs);\n let ymin = d3.min(ys);\n let ymax = d3.max(ys);\n return { xmin: xmin, ymin: ymin, xmax: xmax, ymax: ymax };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"FileAttachment(\"FlagOfCanada.png\").url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"triangulated_regions = FileAttachment('provinces_triangulated.json').json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"voting_data = d3.csvParse(\n await FileAttachment(\"party_votes_by_province.csv\").text()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"global_party = ({ party: 'Con' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"x3dom = require('x3dom').catch(() => window['x3dom'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"function province_color(province, party) {\n let base_color;\n if (party.slice(0, 3) == \"NDP\") {\n base_color = d3.schemeCategory10[1];\n } else if (party == \"Con\") {\n base_color = d3.schemeCategory10[0];\n } else if (party == \"Lib\") {\n base_color = d3.schemeCategory10[3];\n } else if (party == \"Bloc QC\") {\n base_color = d3.schemeCategory10[9];\n } else if (party == \"other\") {\n base_color = d3.schemeCategory10[2];\n }\n\n return d3.interpolate('white', base_color)(prov_proportion(province, party));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}