31:T5b1,graphic = { const div = d3.create("div").attr('class', 'container') .attr("style", `width: ${width}; height: 300px;`); div.html(svgStr) const baseFace = {f: 0.45, h: 0, m: 0.25, nw: 0.5, nh: 0.3, ew: 1.25, eh: 0.5, b: 0.25}; let face1 = Object.assign({}, baseFace); face1.c = 0; let face2 = Object.assign({}, baseFace); face2.c = 1; let face3 = Object.assign({}, baseFace); face3.c = 2; var svg = div.select("svg"), dat = [ face1, face2, face3]; var c = d3.chernoff() .face(function(d) { return d ? d.f : 0; }) .hair(function(d) { return d ? d.h : 0; }) .mouth(function(d) { return d ? d.m : 0; }) .nosew(function(d) { return d ? d.nw : 0; }) .noseh(function(d) { return d ? d.nh : 0; }) .eyew(function(d) { return d ? d.ew : 0; }) .eyeh(function(d) { return d ? d.eh : 0; }) .brow(function(d) { return d ? d.b : 0; }); const chernoffContainer = svg.selectAll("g.chernoff") .data(dat).enter() .append("svg:g") .attr("class", "chernoff") .attr("transform", function(d, i) { return "scale(3) translate(" + (i*200 + 15) + "," + -130 + ")"; }) chernoffContainer.call(c); svg.selectAll("g.chernoffContainer") .append("g") .attr("class", "tie") .append("rect") .attr("width", 40) .attr("height", 320) .attr("x", 237) .attr("y", 124) .attr("fill", (d, i) => partyColors[i].color); return div.node(); }32:T4c1,graphicLine = { const height = 300; const svg = d3.create("svg").attr('class', 'line-chart') .attr("style", `width: ${width}; height: ${height}px;`) .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); for(let i = 0; i < parties.length; i++) { var filteredData = data.map(d => ({ date: d.Date, value: +d[parties[i]] })); const partyColor = partyColors.filter(d => d.name === parties[i])[0]; svg.append("path") .datum(filteredData) .attr("fill", "none") .attr("stroke", partyColor ? partyColor.color : "#ccc") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); } const chernoff = d3.select('.container svg'); svg.on("touchmove mousemove", function(ev) { const date = x.invert(d3.mouse(this)[0]); const lastPoll = data.filter(d => d.Date < date)[0]; if(lastPoll) { d3.select("#poll-date") .text("Selected poll: " + d3.timeFormat('%d/%m/%Y')(lastPoll.Date)); updateChernoff(lastPoll, chernoff); } }); return svg.node(); }33:T574,updateChernoff = (data, chernoff) => { const pollData = [ data.Conservative, data.Labour, data["Lib Dem"] ] const chernoffs = chernoffText; // con = 0, lab = 1, ld = 2 // crude implementation, no delta chernoffs.text((d, i) => pollData[i] + '%') let face1 = calcFace(pollData[0], pollData[1], 'c'); face1.c = 0; let face2 = calcFace(pollData[1], pollData[0], 'l'); face2.c = 1; let face3 = calcFace(pollData[2], pollData[1], 'ld'); face3.c = 2; var dat = [ face1, face2, face3]; var c = d3.chernoff() .face(function(d) { return d ? d.f : 0; }) .hair(function(d) { return d ? d.h : 0; }) .mouth(function(d) { return d ? d.m : 0; }) .nosew(function(d) { return d ? d.nw : 0; }) .noseh(function(d) { return d ? d.nh : 0; }) .eyew(function(d) { return d ? d.ew : 0; }) .eyeh(function(d) { return d ? d.eh : 0; }) .brow(function(d) { return d ? d.b : 0; }); // chernoff will not draw on update selections chernoff .selectAll("g.chernoff") .remove(); const chernoffContainer = chernoff.selectAll("g.chernoff") .data(dat).enter() .append("g") .attr("class", "chernoff") .attr("transform", function(d, i) { return "scale(3) translate(" + (i*200 + 15) + "," + -130 + ")"; }) chernoffContainer.call(c); }34:T188d,{ function sign(num) { if(num > 0) { return 1; } else if(num < 0) { return -1; } else { return 0; } } // Implements Chernoff faces (http://en.wikipedia.org/wiki/Chernoff_face). // Exposes 8 parameters through functons to control the facial expression. // face -- shape of the face {0..1} // hair -- shape of the hair {-1..1} // mouth -- shape of the mouth {-1..1} // noseh -- height of the nose {0..1} // nosew -- width of the nose {0..1} // eyeh -- height of the eyes {0..1} // eyew -- width of the eyes {0..1} // brow -- slant of the brows {-1..1} function d3_chernoff(eleStr) { var ele = d3.selectAll(eleStr); var facef = 0.5, // 0 - 1 hairf = 0, // -1 - 1 mouthf = 0, // -1 - 1 nosehf = 0.5, // 0 - 1 nosewf = 0.5, // 0 - 1 eyehf = 0.5, // 0 - 1 eyewf = 0.5, // 0 - 1 browf = 0, // -1 - 1 browr = 0, // -1 - 1 browl = 0, // -1 - 1 line = d3.line() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) .curve(d3.curveCardinalClosed), bline = d3.line() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) .curve(d3.curveBasisClosed); function chernoff(a) { a.each((d, i) => { // console.log(a._groups[0][i]) // not sure this is the _best_ way but sure for now return __chernoff(d, d3.select(a._groups[0][i])) }); // if(a instanceof Array) { // a.each((el) => { // return __chernoff() // }); // } else { // d3.select(this).each(__chernoff); // } } function __chernoff(d, ele) { var facevar = (typeof(facef) === "function" ? facef(d) : facef) * 30, hairvar = (typeof(hairf) === "function" ? hairf(d) : hairf) * 80, mouthvar = (typeof(mouthf) === "function" ? mouthf(d) : mouthf) * 7, nosehvar = (typeof(nosehf) === "function" ? nosehf(d) : nosehf) * 10, nosewvar = (typeof(nosewf) === "function" ? nosewf(d) : nosewf) * 10, eyehvar = (typeof(eyehf) === "function" ? eyehf(d) : eyehf) * 10, eyewvar = (typeof(eyewf) === "function" ? eyewf(d) : eyewf) * 10, browvar = (typeof(browf) === "function" ? browf(d) : browf) * 3; var face = [{x: 70, y: 60}, {x: 120, y: 80}, {x: 120-facevar, y: 110}, {x: 120-facevar, y: 160}, {x: 20+facevar, y: 160}, {x: 20+facevar, y: 110}, {x: 20, y: 80}]; ele.selectAll("path.face").data([face]).enter() .append("path") .attr("class", "face") .attr("d", bline); var hair = [{x: 70, y: 60}, {x: 120, y: 80}, {x: 140, y: 45-hairvar}, {x: 120, y: 45}, {x: 70, y: 30}, {x: 20, y: 45}, {x: 0, y: 45-hairvar}, {x: 20, y: 80}]; ele.selectAll("path.hair").data([hair]).enter() .append("path") .attr("class", "hair") .attr("d", bline); var mouth = [{x: 70, y: 130+mouthvar}, {x: 110-facevar, y: 135-mouthvar}, {x: 70, y: 140+mouthvar}, {x: 30+facevar, y: 135-mouthvar}]; ele.selectAll("path.mouth").data([mouth]).enter() .append("path") .attr("class", "mouth") .attr("d", line); var nose = [{x: 70, y: 110-nosehvar}, {x: 70+nosewvar, y: 110+nosehvar}, {x: 70-nosewvar, y: 110+nosehvar}]; ele.selectAll("path.nose").data([nose]).enter() .append("path") .attr("class", "nose") .attr("d", line); var leye = [{x: 55, y: 90-eyehvar}, {x: 55+eyewvar, y: 90}, {x: 55, y: 90+eyehvar}, {x: 55-eyewvar, y: 90}]; var reye = [{x: 85, y: 90-eyehvar}, {x: 85+eyewvar, y: 90}, {x: 85, y: 90+eyehvar}, {x: 85-eyewvar, y: 90}]; ele.selectAll("path.leye").data([leye]).enter() .append("path") .attr("class", "leye") .attr("d", bline); ele.selectAll("path.reye").data([reye]).enter() .append("path") .attr("class", "reye") .attr("d", bline); ele.selectAll("path.lbrow") .data([browl]) .enter() .append("path") .attr("class", "lbrow") .attr("d", "M" + (55-eyewvar/1.7-sign(browvar)) + "," + (87-eyehvar+browvar) + " " + (55+eyewvar/1.7-sign(browvar)) + "," + (87-eyehvar-browvar)); ele.selectAll("path.rbrow") .data([browr]) .enter() .append("path") .attr("class", "rbrow") .attr("d", "M" + (85-eyewvar/1.7+sign(browvar)) + "," + (87-eyehvar-browvar) + " " + (85+eyewvar/1.7+sign(browvar)) + "," + (87-eyehvar+browvar)); } chernoff.face = function(x) { if(!arguments.length) return facef; facef = x; return chernoff; }; chernoff.hair = function(x) { if(!arguments.length) return hairf; hairf = x; return chernoff; }; chernoff.mouth = function(x) { if(!arguments.length) return mouthf; mouthf = x; return chernoff; }; chernoff.noseh = function(x) { if(!arguments.length) return nosehf; nosehf = x; return chernoff; }; chernoff.nosew = function(x) { if(!arguments.length) return nosewf; nosewf = x; return chernoff; }; chernoff.eyeh = function(x) { if(!arguments.length) return eyehf; eyehf = x; return chernoff; }; chernoff.eyew = function(x) { if(!arguments.length) return eyewf; eyewf = x; return chernoff; }; chernoff.brow = function(x) { if(!arguments.length) return browf; browf = x; return chernoff; }; return chernoff; } d3.chernoff = function() { return d3_chernoff(Object); }; }35:T1288,svgStr = ` `36:[{"id":"fbddc846ae14cfdddad98e3e901cd84f56f02adf434a23babafe877112c154aece5ecc90f47ef49034dd293f7bee4b26330703a94ecee7644345ce5176efe097","href":"https://static.observableusercontent.com/files/fbddc846ae14cfdddad98e3e901cd84f56f02adf434a23babafe877112c154aece5ecc90f47ef49034dd293f7bee4b26330703a94ecee7644345ce5176efe097","name":"data-tAZWV.csv","type":"application/octet-stream","lastModified":1573075321422.74,"size":3332},{"id":"b0886b432086aec9ee49b91e80e612f3f888e6e15ff559069d146e3d021293479132a2884fc84f278aaf8abce81e28fe0ddb3af09a4ac0c60708868bd147ddf3","href":"https://static.observableusercontent.com/files/b0886b432086aec9ee49b91e80e612f3f888e6e15ff559069d146e3d021293479132a2884fc84f278aaf8abce81e28fe0ddb3af09a4ac0c60708868bd147ddf3","name":"data-tAZWV@1.csv","type":"text/csv","lastModified":1573598479948.792,"size":3418}] 2f:{"title":"UK GE Poll Tracker: Chernoff Faces","cells":[{"id":0,"value":"md`# UK GE Poll Tracker: Chernoff Faces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"hover2 = {\n const status = html`

Hover/touch/swipe across the line chart to change the faces.

Poll: none

`;\n \n return status;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`\nI plan to come back to this at some point, but I wanted to try out [Chernoff faces](https://en.wikipedia.org/wiki/Chernoff_face) with poll data for a while so this is a start. It's a crude interpretation of the numbers, through eyebrow and mouth movement, so I'm open to suggestions/improvements. Face size mapped to vote share? 650 faces? Raised eyebrows when the line gradient is unexpected?\n\nData: [YouGov](https://yougov.co.uk/topics/politics/articles-reports/2019/11/12/political-trackers-11-12-nov-update), Code: [Chernoff Face Plugin](https://github.com/d3/d3-plugins/tree/master/chernoff), [Line Chart Code](https://observablehq.com/@d3/line-chart), Party Colors: Wiki, \nShirt SVG: [Icon Rainbow](http://free-icon-rainbow.com/business-shirts-icon/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`To do: \n* ~~Interactivity~~\n* ~~Fix hover on load~~\n* ~~Fix number selection~~\n* Chart highlight\n* Make Chernoff plugin work on update\n* Enhanced SVG graphics\n* Enhanced Chernoff model\n* Avatar size mapped to percentage share\n* Raised eyebrow\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"chernoffText = d3.select(graphic).selectAll(\"text.number\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"calcFace = (source, target, party) => {\n const baseFace = {f: 0.45, h: 0, m: 0, nw: 0.5, nh: 0.3, ew: 1.25, eh: 0.5, b: 0.25};\n let newFace = Object.assign({}, baseFace);\n newFace.m = source > target ? 0.75 : -0.75;\n newFace.b = source > target ? 0 : 0.25;\n const diff = source - target;\n \n if(diff > -4 && diff < 4) {\n newFace.m = 0.25;\n }\n \n if(party === 'l' && (diff < 0)) {\n newFace.b = 0.5 + (diff / 10);\n }\n \n if(party === 'ld' && (diff < -8)) {\n newFace.b = -0.5;\n }\n \n return newFace;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"parties = [\"Conservative\", \"Labour\", \"Lib Dem\", \"Brexit Party\", \"UKIP\", \"Green\", \"Other\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"x = d3.scaleTime()\n .domain([new Date(\"01/01/2019\"), new Date(\"12/12/2019\")])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"y = d3.scaleLinear()\n .domain([0, 50]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"line = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"data = d3.csvParse(await FileAttachment(\"data-tAZWV@1.csv\").text()).map(d => ({\n ...d,\n Date: d3.timeParse('%d/%m/%Y')(d.Date),\n})).filter(d => d.Date > new Date(\"01/01/2019\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"partyColors = [{ color: \"#0087DC\", name: \"Conservative\" },\n{ color: \"#DC241f\", name: \"Labour\" },\n{ color: \"#FAA61A\", name: \"Lib Dem\" },\n{ color: \"#FDF38E\", name: \"Scottish National Party\" },\n// { color: \"#D46A4C\", name: \"DUP\" },\n// { color: \"#6AB023\", name: \"Green\" },\n// { color: \"#008142\", name: \"Plaid Cymru\" },\n// { color: \"#326760\", name: \"Sinn Féin\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}