30:T5f2,

My socials:

31:T533,projects = { return { "prosample": {title: "ProSample", technologies: ["D3", "Svelte", "TypeScript", "Python", "DuckDB", "Numpy", "Pandas", "Scikit Learn"]}, "prosteer": {title: "ProSteer", technologies: ["D3", "React", "TypeScript", "Python", "MySQL", "DuckDB", "Numpy", "Pandas", "Scikit Learn"]}, "prointerest": {title: "ProInterest", technologies: ["D3", "Svelte", "TypeScript", "Python", "DuckDB", "Numpy", "Pandas", "Scikit Learn"]}, "mapblender": {title: "MapBlender", technologies: ["JavaScript", "Webstrates"]}, "revize": {title: "ReVize", technologies: ["TypeScript"]}, "revis": {title: "ReVis", technologies: ["TypeScript", "Vega"]}, "redata": {title: "ReData", technologies: ["TypeScript", "Vega"]}, "colorbrewer-lite": {title: "Vega-Lite enabled ColorBrewer", technologies: ["Vega Lite", "JavaScript"]}, "visflow-lite": {title: "Vega-Lite enabled VisFlow", technologies: ["Vega Lite", "TypeScript", "Vue"]}, "parallelhierarchies": {title: "Parallel Hierarchies", technologies: ["D3", "JavaScript"]}, "visblocks": {title: "VisBlocks", technologies: ["Vega", "TypeScript", "React"]}, "glyphboard": {title: "Glyphboard", technologies: ["D3", "Angular", "TypeScript"]}, "conversationtrainer": {title: "Conversation Trainer", technologies: ["D3", "JavaScript"]}, }; }32:T51a,positions = [ {start: "2022-03-01", end: Date.now(), institution: "Aarhus University", title: "Postdoctoral Researcher", type: "academia", collection: ["mapblender"]}, {start: "2019-03-01", end: "2022-02-26", institution: "Aarhus University", title: "Ph.D. Student", type: "academia", collection: ["prosample", "prosteer", "revize", "revis", "redata", "colorbrewer-lite", "visflow-lite"]}, {start: "2016-10-01", end: "2019-01-31", institution: "Technical University Dresden", title: "MSc. Student in Computer Science", type: "education", collection: ["glyphboard", "conversationtrainer", "visblocks"]}, {start: "2013-10-01", end: "2016-09-30", institution: "Technical University Dresden", title: "BSc. Student in Computer Science", type: "education", collection: []}, {start: "2021-01-01", end: "2021-04-30", institution: "Carnegie Mellon University", title: "Visiting Ph.D. student at DIG Lab", type: "academia", collection: ["prointerest"]}, {start: "2016-10-02", end: "2018-03-30", institution: "Technical University Dresden", title: "Web developer", type: "academia", collection: []}, {start: "2017-09-01", end: "2019-01-31", institution: "SAP", title: "Part-time developer", type: "industry", collection: ["parallelhierarchies"]}, ].sort((a, b) => new Date(a.start) - new Date(b.start));33:[{"id":"df828482fdc0f9c8ff81b40aef878d5c10aa467e85b784bf7a2babe12381db91bb208bc15d0d52cf0b1924bcb06714d8c5e1f107b8690afc614dbc4cdfaf1448","href":"https://static.observableusercontent.com/files/df828482fdc0f9c8ff81b40aef878d5c10aa467e85b784bf7a2babe12381db91bb208bc15d0d52cf0b1924bcb06714d8c5e1f107b8690afc614dbc4cdfaf1448","name":"screenshot-prointerest@2.png","type":"image/png","lastModified":1676289476043.846,"size":227078},{"id":"f1a73854ce6c261b7aade6d81f6e73d200917402f65f3250836b3a20b87efc1b753bcd64a4a84e194437f2cd5e0d99489009dcbc32287b70a9be7267118b9fad","href":"https://static.observableusercontent.com/files/f1a73854ce6c261b7aade6d81f6e73d200917402f65f3250836b3a20b87efc1b753bcd64a4a84e194437f2cd5e0d99489009dcbc32287b70a9be7267118b9fad","name":"screenshot-mapblender.png","type":"image/png","lastModified":1676290026610.698,"size":1367335},{"id":"db8fe964c28a12fbc7198574d2be26832587d48ad6d2c3429c9b46a8df7bf93fdc49589b88ec2f6d963a298535147d461b6db89f523986c1839a2e7c39bdea7d","href":"https://static.observableusercontent.com/files/db8fe964c28a12fbc7198574d2be26832587d48ad6d2c3429c9b46a8df7bf93fdc49589b88ec2f6d963a298535147d461b6db89f523986c1839a2e7c39bdea7d","name":"linkedin-logo.png","type":"image/png","lastModified":1676291421341.207,"size":771},{"id":"5e902e466711083fa16260539d6b9a0c3329bd9a464d17c33c803e1bb14f1c2f2bc3524f6d992c84612cb06f88cc3e89706a3f23046ad44d12bfbcc46cc227c4","href":"https://static.observableusercontent.com/files/5e902e466711083fa16260539d6b9a0c3329bd9a464d17c33c803e1bb14f1c2f2bc3524f6d992c84612cb06f88cc3e89706a3f23046ad44d12bfbcc46cc227c4","name":"scholar-logo.png","type":"image/png","lastModified":1676291573302.004,"size":1352},{"id":"9d8594d411bcec72bbaadba87cd22480c519be2ec5765e79cb9ac0c6f76fdff6a52cc4661b694294b1dde8de96230da0cb0d95d636d009e539485fecdd9c1dda","href":"https://static.observableusercontent.com/files/9d8594d411bcec72bbaadba87cd22480c519be2ec5765e79cb9ac0c6f76fdff6a52cc4661b694294b1dde8de96230da0cb0d95d636d009e539485fecdd9c1dda","name":"screenshot-redata.png","type":"image/png","lastModified":1676291941250.369,"size":57064},{"id":"09ae7c00e208bcc75344ebb97ebdfd5c76a0d49f6fc088bf6fb87d04304b916e0c69fbe8c1d5643534892e2d877dbc736e3651316bf8095c8c459cb7022a7d0f","href":"https://static.observableusercontent.com/files/09ae7c00e208bcc75344ebb97ebdfd5c76a0d49f6fc088bf6fb87d04304b916e0c69fbe8c1d5643534892e2d877dbc736e3651316bf8095c8c459cb7022a7d0f","name":"screenshot-revisualize.png","type":"image/png","lastModified":1676291941842.906,"size":96379},{"id":"d34b20c6275b8b5cf29db24cdc678937afde8b6a04b1ff68e44d60e75ce94c03e7281724690c6686a4e7197f8ab86e66d2f36ebe25277f9c0116eea7012b35ed","href":"https://static.observableusercontent.com/files/d34b20c6275b8b5cf29db24cdc678937afde8b6a04b1ff68e44d60e75ce94c03e7281724690c6686a4e7197f8ab86e66d2f36ebe25277f9c0116eea7012b35ed","name":"screenshot-colorbrewer.png","type":"image/png","lastModified":1676292272062.758,"size":136192},{"id":"aeff0d7bd5e05f995851ed134b888f5ee70c224be50483bb811295a415f4ebd974b55cb6b2852a86f0f604c59f5b3d18e6bbe9da91c5642c4da83c26aa75c831","href":"https://static.observableusercontent.com/files/aeff0d7bd5e05f995851ed134b888f5ee70c224be50483bb811295a415f4ebd974b55cb6b2852a86f0f604c59f5b3d18e6bbe9da91c5642c4da83c26aa75c831","name":"screenshot-visflow@1.png","type":"image/png","lastModified":1676292272726.052,"size":139043},{"id":"ca69f74188a8d68db6c9be4eb5d52657abe457b8ef3c696e760de69327e1c366a6e142b46f2e9e1a012b762e238f20a636a9db25baf4c1bd13d77cace5920875","href":"https://static.observableusercontent.com/files/ca69f74188a8d68db6c9be4eb5d52657abe457b8ef3c696e760de69327e1c366a6e142b46f2e9e1a012b762e238f20a636a9db25baf4c1bd13d77cace5920875","name":"screenshot-parallelhierarchies.png","type":"image/png","lastModified":1676292778097.033,"size":206115},{"id":"df28c16e59660837588749692689ad1a1cb2b1356b79d46a469f7d9efee65440e75929825a35566b79757916f37d9f90ffe808f99251c0e0ec136ec88caf608d","href":"https://static.observableusercontent.com/files/df28c16e59660837588749692689ad1a1cb2b1356b79d46a469f7d9efee65440e75929825a35566b79757916f37d9f90ffe808f99251c0e0ec136ec88caf608d","name":"screenshot-visblocks.png","type":"image/png","lastModified":1676293044259.277,"size":176519},{"id":"250f96aa01e15a1faa08f5912ff10625877427b626c937f8f4746e3f56a25d9784c37f20b51021f12250f50b9cc317c43d1583d23bdb1c7c0856aa4bef7207a5","href":"https://static.observableusercontent.com/files/250f96aa01e15a1faa08f5912ff10625877427b626c937f8f4746e3f56a25d9784c37f20b51021f12250f50b9cc317c43d1583d23bdb1c7c0856aa4bef7207a5","name":"screenshot-conversation-trainer.png","type":"image/png","lastModified":1676303577076.768,"size":122140},{"id":"d6676c970ea2ceadb748ef36bd4a8db55c19903b8420fa3c3e37fd76deb7f8fe06cf415f7758a023dd3454396a239710376472ada337de91e43c901b011d3b9d","href":"https://static.observableusercontent.com/files/d6676c970ea2ceadb748ef36bd4a8db55c19903b8420fa3c3e37fd76deb7f8fe06cf415f7758a023dd3454396a239710376472ada337de91e43c901b011d3b9d","name":"github-logo@2.png","type":"image/png","lastModified":1676295033431.541,"size":1475},{"id":"087eeee40c10ee910d1f1045676ab97f6311f687183cc9b9393fd31fc45eac534bae9244540625e833f61ef407dfa355e0721b53647fed34f61d9bcb5278344c","href":"https://static.observableusercontent.com/files/087eeee40c10ee910d1f1045676ab97f6311f687183cc9b9393fd31fc45eac534bae9244540625e833f61ef407dfa355e0721b53647fed34f61d9bcb5278344c","name":"observable-logo.png","type":"image/png","lastModified":1676357996477.221,"size":1702}] 2e:{"title":"Data Visualization Portfolio","cells":[{"id":0,"value":"# Data Visualization Portfolio\n_An **interactive** visual portfolio of my work developing data visualizations, in chronological order, including the technologies that I used, as well as links for further information._","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":1181,"value":"Here's a quick overview of **technologies I used** across my projects:","pinned":false,"hidden":false,"mode":"md"},{"id":1307,"value":"viewof overviewMode = Inputs.radio([\"stacked\", \"matrix\", \"condensed\"], {value: \"stacked\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"overviewMode === \"matrix\" \n ? generateTechnologyOverview() \n : overviewMode === \"stacked\" \n ? generateStackedTechnologies(\"bottom\")\n : generateTechnologyCells();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1970,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":1936,"value":"And here's a **timeline of my employments** and the projects in each --- it's interactive.","pinned":false,"hidden":false,"mode":"md"},{"id":1928,"value":"generateEventTimeline()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1980,"value":"viewof timelineColorMode = Inputs.radio(colorCategories, {value: colorCategories[0]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"## Researcher at [Aarhus University](https://cs.au.dk) (2019 - current)\nThe majority of my visualization tools was done during my Ph.D., which focused on so-called progressive visualization, a novel idea to interactively explore massive datasets.\n\nRather than waiting until the complete visualization has been generated (can be hours or days), the data is cut up into chunks and then visualized in pieces, and the longer we wait, the more complete the visualization.","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":610,"value":"generateTechnologyBadges(projects.prosample.technologies);","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"\n $\"Screenshot$ \n\n","pinned":false,"hidden":false,"mode":"html"},{"id":97,"value":"### ProSample\nAn interactive visualization tool that I built in TypeScript with D3.js and Svelte for comparing tailorable sampling pipelines for Progressive Visual Analytics. The data is provided by a Python-based backend using DuckDB, Numpy, Pandas, and Scikit learn.\n\n🏆 Won the [Best Paper Honorable Mention award](https://www.eurova.org/best-papers-2022) at EuroVA'22.\n\n* [${templates.github}](https://github.com/vis-au/progressive-steering)\n* [${templates.video}](https://youtu.be/P84Mo2daicU?list=PLSlLplD3pBWi1pLrEOWkXUHwoJJheQXJS&t=60)\n* [${templates.project}](https://vis-au.github.io/prosteer/)\n* [${templates.publication}](https://doi.org/10.1145/3531229) ","pinned":false,"hidden":false,"mode":"md"},{"id":267,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":638,"value":"generateTechnologyBadges(projects.prosteer.technologies);","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"\n $\"Screenshot$ \n","pinned":false,"hidden":false,"mode":"html"},{"id":89,"value":"### ProSteer\nAn interactive visualization tool I built in TypeScript with D3.js and React, giving users interactive control over the data priority during long-running computations. The data is provided by a Python-based backend using MySQL/DuckDB, Numpy, Pandas, and Scikit learn.\n\n* [${templates.github}](https://github.com/vis-au/progressive-steering)\n* [${templates.video}](https://vis-au.github.io/prosteer/static/prosteer_demo.mp4)\n* [${templates.project}](https://vis-au.github.io/prosteer/)\n* [${templates.publication}](https://doi.org/10.1145/3531229)","pinned":false,"hidden":false,"mode":"md"},{"id":327,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":650,"value":"generateTechnologyBadges(projects.prointerest.technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"\n ${await FileAttachment(\"screenshot-prointerest@2.png\").image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":93,"value":"### ProInterest\nAn interactive visualization tool I built in Typescript with D3.js and Svelte demonstrating degree-of-interest functions on progressive visualization. The data is provided by a Python-based backend using DuckDB, Numpy, Pandas, and Scikit learn.\n\n* [${templates.github}](https://github.com/vis-au/prointerest)","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":654,"value":"generateTechnologyBadges(projects.mapblender.technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"\n ${await FileAttachment(\"screenshot-mapblender.png\").image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":333,"value":"### MapBlender\n[${templates.try}](https://demo.webstrates.net/mapblender-release?copy)\n\nA communication platform I built in JavaScript using Webstrates enabling collaboration in hybrid settings for cartographers, building heavily on the amazing prior work in [MirrorBlender](https://doi.org/10.1145/3411764.3445698). Made in collaboration with [ScalgoLive](https://scalgo.com/).\n\n🏆 Won the [First Price](http://cybercarto.ntua.gr/events/agile2022/) in the AGILE'22 Cybercartography Competition.\n\n* [${templates.project}](https://vis-au.github.io/mapblender/)\n* [${templates.video}](https://www.youtube.com/watch?v=dtPdUdcNT8Q)\n* [${templates.publication}](https://doi.org/10.5194/agile-giss-3-37-2022)","pinned":false,"hidden":false,"mode":"md"},{"id":336,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":658,"value":"generateTechnologyBadges(projects.revize.technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"### ReVize\nA toolchaining library for data visualization that I wrote in TypeScript, which increases the reusability of composite charts defined in Vega-Lite across analytics tools.\n\n* [${templates.github}](https://github.com/vis-au/revize)\n* [${templates.video}](https://vis-au.github.io/anyproc/static/features_video.mp4)\n* [${templates.project}](https://vis-au.github.io/toolchaining/)\n* [${templates.publication}](https://doi.org/10.2312/stag.20191375)","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":661,"value":"generateTechnologyBadges(projects.revis.technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"\n ${await FileAttachment(\"screenshot-revisualize.png\").image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":150,"value":"### ReVis\nAn interactive visualization tool utilizing Revize that I built in TypeScript with Vega for decomposing composite charts.\n\n* [${templates.github}](https://github.com/vis-au/revisualize)\n* [${templates.project}](https://vis-au.github.io/toolchaining/)\n* [${templates.publication}](https://doi.org/10.2312/stag.20191375)","pinned":false,"hidden":false,"mode":"md"},{"id":274,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":664,"value":"generateTechnologyBadges(projects.redata.technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"\n ${await FileAttachment(\"screenshot-redata.png\").image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":152,"value":"### ReData\nAn interactive data analysis tool utilizing ReVize that I built in TypeScript for interactively defining data transformation pipelines in Vega-Lite.\n\n* [${templates.github}](https://github.com/vis-au/redata)\n* [${templates.project}](https://vis-au.github.io/toolchaining/)\n* [${templates.publication}](https://doi.org/10.2312/stag.20191375)","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":667,"value":"generateTechnologyBadges(projects[\"colorbrewer-lite\"].technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"\n ${await FileAttachment(\"screenshot-colorbrewer.png\").image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":383,"value":"### Vega-Lite enabled ColorBrewer\n[${templates.try}](https://vis-au.github.io/colorbrewer)\n\nA fork of the popular [ColorBrewer](https://colorbrewer2.org/) that I enhanced with support for Vega-Lite via ReVize, built in JavaScript.\n\n* [${templates.github}](https://github.com/vis-au/colorbrewer)\n* [${templates.video}](https://www.youtube.com/watch?v=AaU9KduGrxw&t=1518s)\n* [${templates.project}](https://vis-au.github.io/toolchaining/)\n* [${templates.publication}](https://doi.org/10.2312/stag.20191375)","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":678,"value":"generateTechnologyBadges(projects[\"visflow-lite\"].technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"\n ${await FileAttachment(\"screenshot-visflow@1.png\").image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":196,"value":"### Vega-Lite enabled VisFlow\nA fork of [VisFlow](https://github.com/yubowenok/visflow) that I enhanced with support for Vega-Lite via ReVize, built in TypeScript and Vue.\n\n* [${templates.github}](https://github.com/vis-au/colorbrewer)\n* [${templates.video}](https://www.youtube.com/watch?v=AaU9KduGrxw&t=1518s)\n* [${templates.project}](https://vis-au.github.io/toolchaining/)\n* [${templates.publication}](https://doi.org/10.2312/stag.20191375)","pinned":false,"hidden":false,"mode":"md"},{"id":314,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":165,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":167,"value":"## Student Developer at [SAP](https://sap.com/) (2017 - 2019)\nI was part of the research and development team of SAP SE in Dresden, Germany, where I was responsible for developing a novel visualization technique for hierarchical aggregate data.","pinned":false,"hidden":false,"mode":"md"},{"id":672,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":675,"value":"generateTechnologyBadges(projects.parallelhierarchies.technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"\n ${await FileAttachment(\"screenshot-parallelhierarchies.png\").image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":77,"value":"### Parallel Hierarchies\n[${templates.try}](https://parallelhierarchies.github.io/demo/index.html)\n\nA novel visualization technique I implemented in JavaScript with D3.js for cross-tabulating hierarchical aggregates.\n\n* [${templates.github}](https://github.com/ParallelHierarchies/ParallelHierarchies)\n* [${templates.video}](https://vimeo.com/279480161)\n* [${templates.project}](https://parallelhierarchies.github.io)\n* [${templates.publication}](https://doi.org/10.1016/j.cag.2018.07.009)","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":182,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":184,"value":"## MSc. student in Media Computer Science at [TU Dresden](https://inf.tu-dresden.de/) (2016 - 2019)\nI did my Bachlor and Master studies in Media Computer Science at TUD and was also employed as a student developer.\n\nAside from the visualizations I developed as employee, I also developed multiple visualization techniques for my Master thesis, course projects.","pinned":false,"hidden":false,"mode":"md"},{"id":522,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":683,"value":"generateTechnologyBadges(projects.visblocks.technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"\n ${await FileAttachment(\"screenshot-visblocks.png\").image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":101,"value":"### VisBlocks\n[${templates.try}](https://mahog.github.io/VisBlocks/)\n\nMy Master thesis project at [TU Dresden](https://mg.inf.tu-dresden.de) that I built in TypeScript with Vega and React. A toolkit for creating custom data visualizations without the need for writing code using a drag-and-drop interface.\n\n* [${templates.github}](https://github.com/mahog/visblocks)","pinned":false,"hidden":false,"mode":"md"},{"id":699,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":695,"value":"generateTechnologyBadges(projects.glyphboard.technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":686,"value":"### Glyphboard\nI co-developed Glyphboard while working as a student developer at the [Chair for Media Design](https://mg.inf.tu-dresden.de), built in TypeScript with D3 and Angular. A visual interface for exploring large-scale data using glyph visualizations.\n\n* [${templates.github}](https://github.com/visualengineers/glyphboard)\n* [${templates.publication}](https://doi.org/10.1109/TVCG.2020.2969060)","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":711,"value":"generateTechnologyBadges(projects.conversationtrainer.technologies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"\n ${await FileAttachment(\"screenshot-conversation-trainer.png\").image()}\n","pinned":false,"hidden":false,"mode":"html"},{"id":143,"value":"### Conversation Trainer\nA Master course project that I built in JavaScript with D3.js, for interactively exploring the training of chat-support staff in collaboration with [Chemmedia AG](https://www.chemmedia.de/).\n\n* [${templates.github}](https://github.com/Mahog/Conversation-Trainer)","pinned":false,"hidden":false,"mode":"md"},{"id":346,"value":"
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":247,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"## Appendix\nThe code generating parts of the document above.","pinned":false,"hidden":false,"mode":"md"},{"id":386,"value":"### Template Strings","pinned":false,"hidden":false,"mode":"md"},{"id":388,"value":"templates = {\n return { \n github: \"👓 Code on Github\",\n project: \"💡 More info\",\n publication: \"📄 Publication\",\n video: \"🎬 Demo video\",\n try: \"👉 Try it yourself\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":629,"value":"### Styling project figures","pinned":false,"hidden":false,"mode":"md"},{"id":1251,"value":"contentWidth = Math.max(0.7 * width, 800); // figures should be at least 800px to keep axis labels readable","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":720,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":631,"value":"### Technology badges","pinned":false,"hidden":false,"mode":"md"},{"id":818,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"function technologyLabelToKey(label) {\n return (label.toLowerCase()).split(\" \").join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"function generateTechnologyBadges(ts) {\n const technologies = document.createElement('div');\n technologies.classList.add(\"technologies\");\n\n ts.forEach(t => {\n const technology = document.createElement('div');\n technology.innerHTML = t;\n const technologyKey = technologyLabelToKey(t);\n technology.classList.add(\"technology\", technologyKey); \n \n for (let prop in stylesPerTechnology[technologyKey] || {}) {\n technology.style[prop] = stylesPerTechnology[technologyKey][prop];\n }\n \n technologies.appendChild(technology);\n });\n\n return technologies;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":957,"value":"Example: ${generateTechnologyBadges(uniqueTechnologies)}","pinned":false,"hidden":false,"mode":"html"},{"id":624,"value":"(colors used for the badges are inspired by their respective tools)\n","pinned":false,"hidden":false,"mode":"html"},{"id":907,"value":"stylesPerTechnology = {\n return {\n svelte: {background: \"#ff3e00\"},\n typescript: {background: \"#3178c6\"},\n javascript: {background: \"#f0db4f\", color: \"#323330\"},\n python: {background: \"#2b5b84\"},\n duckdb: {background: \"rgb(255,240,0)\", color: \"black\"},\n numpy: {background: \"rgb(77, 119, 207)\"},\n pandas: {background: \"#130654\"},\n scikitlearn: {background: \"#ff9c34\"},\n mysql: {background: \"#3E6E93\"},\n react: {background: \"#61dafb\"},\n vue: {background: \"#42d392\"},\n vega: {background: \"steelblue\"},\n vegalite: {background: \"steelblue\"},\n angular: {background: \"#DD0031\"},\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"fillByTechnologyStyle = d => d[\"isUsed\"] ? stylesPerTechnology[technologyLabelToKey(d[\"technology\"])]?.background || \"black\" : \"transparent\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"DEFAULT_COLOR = \"steelblue\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"
\n
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":1035,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":725,"value":"## Development area 🚧\nBelow I'm actively developing the visualizations summarizing my work.","pinned":false,"hidden":false,"mode":"md"},{"id":1438,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1411,"value":"### (Derived) datasets:","pinned":false,"hidden":false,"mode":"md"},{"id":1556,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2092,"value":"colorCategories = [\"institution\", \"type\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1670,"value":"positionTypes = new Set(positions.map(d => d.type))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1846,"value":"positionInstitutions = new Set(positions.map(d => d.institution))","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"technologies = { \n const countPerTechnology = {};\n technologyOccurences.forEach(technology => {\n if (countPerTechnology[technology] === undefined) {\n countPerTechnology[technology] = 0;\n }\n\n countPerTechnology[technology] += 1;\n });\n\n const technologies = [];\n for (let technology in countPerTechnology) {\n console.log()\n technologies.push({\n technology, \n count: countPerTechnology[technology],\n color: stylesPerTechnology[technologyLabelToKey(technology)]?.background || DEFAULT_COLOR\n });\n }\n return technologies;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"technologyOccurences = {\n const technologyOccurences = [];\n for (let project in projects) {\n technologyOccurences.push(...projects[project].technologies);\n }\n return technologyOccurences;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"uniqueTechnologies = new Set(technologyOccurences)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1467,"value":"technologyCounts = d3.rollup(technologyOccurences, d => d.length, d => d);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"technologiesPerProjectTuples = {\n const tuples = [];\n\n for (let project in projects) {\n uniqueTechnologies.forEach(technology => {\n const isUsed = projects[project].technologies.indexOf(technology) > -1;\n const tuple = { project, technology, isUsed };\n tuples.push(tuple);\n });\n }\n\n return tuples;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1436,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1414,"value":"### Overview visualizations","pinned":false,"hidden":false,"mode":"md"},{"id":1166,"value":"generateTechnologyCells()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1112,"value":"function generateTechnologyCells() {\n return Plot.plot({\n width: contentWidth,\n marginLeft: 0,\n x: {\n label: null\n },\n color: {\n scheme: \"ylgnbu\",\n domain: [10, 0.5]\n },\n marks: [\n Plot.cell(technologies, {\n x: \"technology\", \n fill: \"count\", \n // sort: {x: \"fill\", reverse: true}\n }),\n Plot.text(technologies, {\n x: \"technology\",\n text: \"count\",\n stroke: \"white\",\n fill: \"black\",\n fontSize: 14,\n fontWeight: \"lighter\"\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1230,"value":"generateTechnologyOverview()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1192,"value":"function generateTechnologyOverview() {\n return Plot.plot({\n grid: true,\n marginLeft: 100,\n width: contentWidth,\n x: {\n axis: \"top\",\n label: \"Technologies used\"\n },\n y: {\n label: \"Projects\"\n },\n marks: [\n Plot.dot(technologiesPerProjectTuples, {\n x: \"technology\", \n y: \"project\", \n sort: true,\n r: 7, \n fill: d => fillByTechnologyStyle(d)\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1289,"value":"generateStackedTechnologies()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"function generateStackedTechnologies(alignment = \"top\") {\n return Plot.plot({\n height: 220,\n marginLeft: 20,\n width: contentWidth,\n y: {\n grid: true,\n ticks: d3.max(Array.from(technologyCounts.values())),\n tickFormat: Math.abs,\n },\n marks: [\n Plot.dot(technologiesPerProjectTuples, Plot.stackY2({\n x: \"technology\",\n y: d => d.isUsed ? alignment === \"top\" ? -1 : 1 : 0,\n r: 7,\n fill: fillByTechnologyStyle\n })),\n Plot.axisX({anchor: alignment, label: \"Technologies\"}),\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2110,"value":"generateStyles()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2062,"value":"import {generateEventTimeline} with {contentWidth as width, colorCategories as categories, timelineColorMode as activeColorCategory, positions as events} from \"@mahog/event-timeline-collections\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"import {generateStyles} from \"@mahog/event-timeline-collections\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}