2d:null 2e:["$","title",null,{"children":"Sustainable Human-Computer Interaction (SHCI) | Zeya Chen | Observable"}] 33:Te4c,viz = { const viz = d3.create("div").attr("class","viz") const svg = viz.append("svg") .attr("width",w) .attr("height",h) .attr("viewBox",[0,0,w,h]) const size = 600; const squareSize = 60; const authorTooltip = d3.select("body") .append("div") .attr("class","writerTooltip") .style("visibility","hidden") const scale = d3.scaleLinear() .domain([0,10]) .range([0,size]); const swatch = swatches({ colour: d3.scaleOrdinal( ["Participatory Design","Architecture & Urban Design","Fashion Design","Innovation Strategy", "Product Design","Service Design","Speculative Design","Visual Design","Experience Design"], d3.schemeSpectral[10]), labelFormat: l => l.replace("Design", ""), labelColor: "white"}) const topic = svg.append("g").attr("class","legend") .attr("transform",`translate(${w/2-400},100)`) .append(()=>swatch); const waffle = svg.append("g") .attr("transform",`translate(${w/2-290},200)`) .selectAll("rect") .data(data) .enter() .append("a") .attr("xlink:href",d=>d.Link) .attr("target","_blank") .append("rect") .attr("class","waffle") .attr("x",(d,i)=>{ const n = i % 10 return scale(n) }) .attr("y",(d,i)=>{ const n = Math.floor(i/10) return scale(n) }) .attr("width",squareSize-10) .attr("height",squareSize-10) .attr("stroke-width",d=> {if (d.Design != null) {return 3} else {return 1}}) .attr("stroke",d=> {if (d.Design != null) {return colorScale(d.Design)} else {return back}}) .style("fill",d=> {if (d.Type!="0"){return pattern.url()} else {return "transparent"}}) .on("mousemove",function (event,d){ d3.select(this).style("opacity",1).attr("stroke-width",d=> {if (d.Design != null) {return 5} else {return 2}}) authorTooltip.transition() .duration(200) .style("visibility","visible") authorTooltip.html("

"+d.Name+"("+d.YearWritten+")"+"

"+d.About +"
("+d.Venue+")") .style("transform","translateY(-55%)") .style("left",(event.x)+10+"px") .style("top",(event.y)-15+"px") }) .on("mouseout",function (event,d){ d3.select(this).style("opacity",1) .attr("stroke-width",d=> {if (d.Design != null) {return 3} else {return 1}}) authorTooltip.transition().style("visibility","hidden") }) svg.call(pattern) return viz.node() }34:T55a,writerTimeline = { timeline const annotations = timelineData.map((d,i)=>{ return{ x:(timelineScale(d.YearWritten)<=250)?250:350, y:i*140+25, dy:0, dx: timelineScale(d.YearWritten)<=250? -70:70, color:"white", note:{ label:d.Design, title:d.Name +" "+"("+ d.YearWritten +")" } }}) const type = d3.annotationCustomType(d3.annotationLabel, {"className":"custom", "connector":{"end":"dot"}, "note":{"align":"middle", "orientation":"leftRight", "lineType":"vertical"}}) const makeAnnotations = d3.annotation() .notePadding(10) .type(type) .textWrap(250) .annotations(annotations) d3.select("#svg2").append("g") .attr("transform",`translate(${w/2-320},50)`) .call(makeAnnotations) }35:T567,function swatches({ colour, swatchRadius = 6, swatchPadding = swatchRadius * (2/3), labelFont = "12px sans-serif", labelColor = "#FFFFFF", labelFormat = x => x, labelPadding = swatchRadius * 1.5, marginLeft = 0 } = {}) { const spacing = colour .domain() .map(d => labelFormat(d)) .map(d => getLabelLength(d, labelFont) + (swatchRadius * 2) + swatchPadding + labelPadding) .map((_, i, g) => d3.cumsum(g)[i] + marginLeft) const width = d3.max(spacing) const height = swatchRadius * 2 + swatchPadding * 2 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); const g = svg .append("g") .attr("transform", `translate(0, ${height / 2})`) .selectAll("g") .data(colour.domain()) .join("g") .attr("transform", (d, i) => `translate(${spacing[i - 1] || marginLeft}, 0)`); g.append("circle") .attr("fill", colour) .attr("r", swatchRadius) .attr("cx", swatchRadius) .attr("cy", 0); g.append("text") .attr("x", swatchRadius * 2 + swatchPadding) .attr("y", 0) .attr("dominant-baseline", "central") .style("font", labelFont) .style("fill", labelColor) .text(d => labelFormat(d)); return svg.node() }36:[{"id":"d9ab537747c3a3ac06ddc1b4053fbd2fc56d58842fe773ab639c974e4947962e55f051425a7acb660e2f0ad58e7bf3c8ca25608d33884e639e538f1402fe7067","href":"https://static.observableusercontent.com/files/d9ab537747c3a3ac06ddc1b4053fbd2fc56d58842fe773ab639c974e4947962e55f051425a7acb660e2f0ad58e7bf3c8ca25608d33884e639e538f1402fe7067","name":"4.jpg","type":"image/jpeg","lastModified":1634848821264.985,"size":3205031},{"id":"c52fec66c2bc746bd5326d6a53442fbe44a9a902ee3833a5f5e624f77cb1e43e3a7ebb3210545e5ce58c555b405c8a048f754b79f6acdb4a7995f756d8c6419c","href":"https://static.observableusercontent.com/files/c52fec66c2bc746bd5326d6a53442fbe44a9a902ee3833a5f5e624f77cb1e43e3a7ebb3210545e5ce58c555b405c8a048f754b79f6acdb4a7995f756d8c6419c","name":"3.jpg","type":"image/jpeg","lastModified":1634848821264.985,"size":409494},{"id":"c070251de1ab002bd80ff0e4fef5c49d3983c7424ead6502e5193bf92e48583d3feb64e32bfdffe45e818789eda535e9f224d917d9a0fdb7124a0e9c063f410c","href":"https://static.observableusercontent.com/files/c070251de1ab002bd80ff0e4fef5c49d3983c7424ead6502e5193bf92e48583d3feb64e32bfdffe45e818789eda535e9f224d917d9a0fdb7124a0e9c063f410c","name":"1.jpg","type":"image/jpeg","lastModified":1634848821264.985,"size":536859},{"id":"9791281e6e6727a2ee278226e42e55234a27ac44eb913605ae829cf9654956f2fca651822d2fb60cf4720ccb5ef7edec5426ffb44e637958ebcaee28faf8958a","href":"https://static.observableusercontent.com/files/9791281e6e6727a2ee278226e42e55234a27ac44eb913605ae829cf9654956f2fca651822d2fb60cf4720ccb5ef7edec5426ffb44e637958ebcaee28faf8958a","name":"2.jpg","type":"image/jpeg","lastModified":1634848821264.985,"size":190998},{"id":"70a4b5a07dbaad75cb910a24022c427b7368ef1c54c762d27aa9d918fe9ec3f83cea02454385c2fccd9b7f68d3e142debccb723d46cdcb67e9648503f1c0f57d","href":"https://static.observableusercontent.com/files/70a4b5a07dbaad75cb910a24022c427b7368ef1c54c762d27aa9d918fe9ec3f83cea02454385c2fccd9b7f68d3e142debccb723d46cdcb67e9648503f1c0f57d","name":"SHCI - Sheet2 (1).csv","type":"text/csv","lastModified":1634848821264.985,"size":18787}] 31:{"id":"f2797923af06c487","slug":"sustainable-human-computer-interaction-shci","title":"Sustainable Human-Computer Interaction (SHCI)","thumbnail":"12b65763f4894084e45949e791c9c824d0c4367a3683f8dc45272d59b6b07d41","access_level":"public","create_time":"$D2021-10-21T20:40:21.264Z","update_time":"$D2021-10-21T23:33:34.104Z","view_time":null,"first_public_time":"$D2021-10-21T20:41:30.685Z","has_unpublished_edits":null,"fork":{"id":"0e313ad0e102d11b","slug":"esg-shci-field","title":"Zeya assignment","owner":{"id":"9a798dd33a12ee48","login":"worning77","name":"Jesse Pink"}},"stars":1,"starred":false,"owner":{"type":"team","id":"03d23c51e6d5f9e6","login":"08dfc3a842de1ba9","name":"Zeya Chen","avatar_url":"https://avatars-next.observableusercontent.com/2350dd359026c7772f8b7ccf99ea2a15fae2b0f8bc34819452ad2763ac8b034f","tier":"starter_2024"},"version":282,"publish_version":282,"role":null,"authored":false,"authors":[{"type":"individual","id":"08dfc3a842de1ba9","login":"08dfc3a842de1ba9","name":"Zeya Chen","avatar_url":"https://avatars-next.observableusercontent.com/2350dd359026c7772f8b7ccf99ea2a15fae2b0f8bc34819452ad2763ac8b034f","tier":null}],"members":[{"type":"individual","id":"08dfc3a842de1ba9","login":"08dfc3a842de1ba9","name":"Zeya Chen","avatar_url":"https://avatars-next.observableusercontent.com/2350dd359026c7772f8b7ccf99ea2a15fae2b0f8bc34819452ad2763ac8b034f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sustainable Human-Computer Interaction (SHCI)","cells":[{"id":0,"value":"# Sustainable Human-Computer Interaction (SHCI)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"### Background\nSustainable HCI (SHCI) is a relatively new research field within Human-Computer Interaction (HCI) area. While sustainability-related HCI papers have been published for almost 15 years, the CHI 2007 conference in many respects represented the starting point of systematically thinking about environmental sustainability in the context of HCI. Environmental Sustainability and Interaction, and a landmark paper by Eli Blevis that coined the term “Sustainable Interaction Design” (SID) and argued that “sustainability can and should be a central focus of interaction design (2009).” Since then, SHCI as a concept has been widely used in many design studies. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"### SHCI Examples\nSo far, there is no unified definition of SHCI. But I can use two design examples to briefly introduce some concepts of SHCI. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`#### Hardware: mobilephone recycle service to e-waste\n\n

${Object.assign(await FileAttachment(\"1.jpg\").image(), { alt: 'Hardware', style: 'width: 100%; max-width: 600px;' })}\n\n*(Source: [Link](https://www.apple.com/in/recycling/))*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`#### Software: Digital cloud service to infrastructure pollution\n\n

${Object.assign(await FileAttachment(\"2.jpg\").image(), { alt: 'software', style: 'width: 100%; max-width: 600px;' })}\n\n*(Source: [Link](https://www.greenqueen.com.hk/google-data-centres-are-draining-billions-of-gallons-of-water-despite-renewables-promise/))*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md`### SHCI Topics (2007-2014)\n\nMuch has happened since 2007, but only four literature reviews of the field have been conducted since then: \n\n

${Object.assign(await FileAttachment(\"3.jpg\").image(), { alt: 'software', style: 'width: 100%; max-width: 600px;' })}\n\n*(Source: Hansson, L. K. E. J., Cerratto Pargman, T., & Pargman, D. S. (2021). A Decade of Sustainable HCI. Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems. Published.[Link](https://doi.org/10.1145/3411764.3445069))*\n\nTo sum up, I made this visual model have a better understanding of the common topics that happened in SHCI during 2007-2014.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"photo = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"## Design in SHCI (2011-2021)\nThis is an interactive data-visualization of SHCI literatures in the last decades (2011-2021). I fill the design-related publications with waffle patterns and highlight the works with any specific design focuses. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"## Timeline map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"timeline = {\n const viz = d3.create(\"div\")\n \n const svg = viz.append(\"svg\").attr(\"id\",\"svg2\")\n .attr(\"width\",w)\n .attr(\"height\",h2)\n .attr(\"viewBox\",[0,0,w,h2])\n \n const timeline = svg.append(\"g\")\n .attr(\"transform\",`translate(${w/2-320},50)`)\n .selectAll(\"timeline\")\n .data(timelineData)\n .join(\"rect\")\n .attr(\"class\",\"timeline\")\n .attr(\"x\",(d,i)=>timelineScale(d.YearWritten))\n .attr(\"y\",(d,i)=>i*140)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"stroke-width\",\"3\")\n .attr(\"stroke\",d=> colorScale(d.Design))\n .style(\"fill\",pattern.url())\n \n return viz.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"## Summary\nAlthough SHCI has been development for almost 15 years, there are limited studies of design in it. I see design in SHCI as an emerging area because: 1) theoretical research are much more than real design practice; 2) design in SHCI are changing, gradually transitioning from object/action oriented design to large scale system innovation. \nIn general, due to the annually increasing number of SHCI design literature, I feel very optimistic about the development of design in SHCI.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@6','d3-svg-annotation')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"// adapted from https://observablehq.com/@mbostock/autosize-svg\ngetLabelLength = (label, labelFont = \"12px sans-serif\") => {\n const id = DOM.uid(\"label\").id;\n const svg = html``;\n\n // Add the SVG element to the DOM so we can determine its size.\n document.body.appendChild(svg);\n\n // Compute the bounding box of the content.\n const width = svg.getElementById(id).getBBox().width;\n\n // Remove the SVG element from the DOM.\n document.body.removeChild(svg);\n\n return width;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"textures = require('textures@1.2.0/dist/textures.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"pattern = textures.paths()\n .d(\"nylon\")\n .lighter()\n .shapeRendering(\"crispEdges\")\n .stroke(back);\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"back = \"#b3b3b3\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"w = width;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"h = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"h2 = 3500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"colorScale = d3.scaleOrdinal()\n.domain([\"Participatory Design\",\"Architecture & Urban Design\",\"Fashion Design\",\"Innovation Strategy\",\n \"Product Design\",\"Service Design\",\"Speculative Design\",\"Visual Design\",\"Experience Design\"])\n .range(d3.schemeSpectral[10])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"data = FileAttachment(\"SHCI - Sheet2 (1).csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"timelineData = data.filter(d=>d.Design!=null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"timelineScale = d3.scaleOrdinal()\n .domain(timelineData.map(d=>d.YearWritten))\n .range([250,300])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 32:"$31:body"