Animated Periodic Table<\/title>\n <style>\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #191919;\n }\n #container {\n max-width: 100%;\n }\n svg {\n max-width: 100%;\n height: auto;\n display: block;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"container\">\n <svg id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" viewBox=\"0 0 641.12 304.82\" width=\"641.12\" height=\"304.82\">\n <defs>\n <style>\n .st0 {\n font-size: 20px;\n }\n\n .st0, .st1 {\n fill: #f2f2f2;\n font-family: Avenir-Roman, Avenir;\n }\n\n .st1 {\n font-size: 16px;\n }\n\n .st2, .st3 {\n fill: #191919;\n }\n\n .st3 {\n stroke: #f2f2f2;\n stroke-miterlimit: 10;\n }\n <\/style>\n <\/defs>\n <g>\n <g>\n <rect class=\"st3\" x=\"532.06\" y=\"67.19\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(536.12 98.95)\"><tspan x=\"0\" y=\"0\">Si<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(556.47 81.86)\"><tspan x=\"0\" y=\"0\">14<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"484.52\" y=\"67.19\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(488.58 98.95)\"><tspan x=\"0\" y=\"0\">Al<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(508.92 81.86)\"><tspan x=\"0\" y=\"0\">13<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"294.35\" y=\"121.93\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(298.41 153.69)\"><tspan x=\"0\" y=\"0\">Co<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(318.76 136.6)\"><tspan x=\"0\" y=\"0\">27<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"246.81\" y=\"121.93\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(250.87 153.69)\"><tspan x=\"0\" y=\"0\">Fe<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(271.22 136.6)\"><tspan x=\"0\" y=\"0\">26<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"151.73\" y=\"121.93\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(155.79 153.69)\"><tspan x=\"0\" y=\"0\">Cr<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(176.14 136.6)\"><tspan x=\"0\" y=\"0\">24<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"104.19\" y=\"121.93\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(108.25 153.69)\"><tspan x=\"0\" y=\"0\">V<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(128.59 136.6)\"><tspan x=\"0\" y=\"0\">23<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"56.64\" y=\"121.93\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(60.71 153.69)\"><tspan x=\"0\" y=\"0\">Ti<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(81.05 136.6)\"><tspan x=\"0\" y=\"0\">22<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"294.35\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(298.41 208.43)\"><tspan x=\"0\" y=\"0\">Rh<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(318.76 191.34)\"><tspan x=\"0\" y=\"0\">45<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"246.81\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(250.87 208.43)\"><tspan x=\"0\" y=\"0\">Ru<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(271.22 191.34)\"><tspan x=\"0\" y=\"0\">44<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"151.73\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(155.79 208.43)\"><tspan x=\"0\" y=\"0\">Mo<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(176.14 191.34)\"><tspan x=\"0\" y=\"0\">42<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"104.19\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(108.25 208.43)\"><tspan x=\"0\" y=\"0\">Nb<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(128.59 191.34)\"><tspan x=\"0\" y=\"0\">41<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"56.64\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(60.71 208.43)\"><tspan x=\"0\" y=\"0\">Zr<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(81.05 191.34)\"><tspan x=\"0\" y=\"0\">40<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"9.1\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(13.16 208.43)\"><tspan x=\"0\" y=\"0\">Y<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(33.51 191.34)\"><tspan x=\"0\" y=\"0\">39<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"294.35\" y=\"231.42\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(298.41 263.18)\"><tspan x=\"0\" y=\"0\">Ir<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(318.76 246.08)\"><tspan x=\"0\" y=\"0\">77<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"199.27\" y=\"231.42\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(203.33 263.18)\"><tspan x=\"0\" y=\"0\">Re<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(223.68 246.08)\"><tspan x=\"0\" y=\"0\">75<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"151.73\" y=\"231.42\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(155.79 263.18)\"><tspan x=\"0\" y=\"0\">W<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(176.14 246.08)\"><tspan x=\"0\" y=\"0\">74<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"104.19\" y=\"231.42\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(108.25 263.18)\"><tspan x=\"0\" y=\"0\">Ta<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(128.59 246.08)\"><tspan x=\"0\" y=\"0\">73<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"56.64\" y=\"231.42\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(60.71 263.18)\"><tspan x=\"0\" y=\"0\">Hf<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(81.05 246.08)\"><tspan x=\"0\" y=\"0\">72<\/tspan><\/text>\n <\/g>\n <\/g>\n <path class=\"st2\" d=\"M-356.33-810.15\"\/>\n <\/svg>\n <\/div>\n\n <script>\n \/\/ Wait for DOM to be fully loaded\n document.addEventListener('DOMContentLoaded', function() {\n const svg = document.getElementById('Layer_1');\n const allGroups = Array.from(svg.querySelectorAll('g > g')); \/\/ Get all element groups\n \n let currentHighlighted = [];\n \n \/\/ Colors\n const HIGHLIGHT_BG = '#fcd400';\n const HIGHLIGHT_TEXT = '#433700';\n const NORMAL_BG = '#191919';\n const NORMAL_TEXT = '#f2f2f2';\n \n function getRandomElements(min, max) {\n const count = Math.floor(Math.random() * (max - min + 1)) + min;\n const shuffled = allGroups.slice().sort(() => 0.5 - Math.random());\n return shuffled.slice(0, count);\n }\n \n function highlightElements(elements) {\n elements.forEach(group => {\n const rect = group.querySelector('rect');\n const texts = group.querySelectorAll('text');\n \n if (rect) {\n \/\/ Use both methods for Safari compatibility\n rect.setAttribute('fill', HIGHLIGHT_BG);\n rect.style.fill = HIGHLIGHT_BG;\n }\n texts.forEach(text => {\n text.setAttribute('fill', HIGHLIGHT_TEXT);\n \/\/ Also update tspan children if they exist\n const tspans = text.querySelectorAll('tspan');\n tspans.forEach(tspan => {\n tspan.setAttribute('fill', HIGHLIGHT_TEXT);\n });\n });\n });\n }\n \n function resetElements(elements) {\n elements.forEach(group => {\n const rect = group.querySelector('rect');\n const texts = group.querySelectorAll('text');\n \n if (rect) {\n \/\/ Use both methods for Safari compatibility\n rect.setAttribute('fill', NORMAL_BG);\n rect.style.fill = NORMAL_BG;\n }\n texts.forEach(text => {\n text.setAttribute('fill', NORMAL_TEXT);\n \/\/ Also update tspan children if they exist\n const tspans = text.querySelectorAll('tspan');\n tspans.forEach(tspan => {\n tspan.setAttribute('fill', NORMAL_TEXT);\n });\n });\n });\n }\n \n function animate() {\n \/\/ Reset previous highlights\n if (currentHighlighted.length > 0) {\n resetElements(currentHighlighted);\n }\n \n \/\/ Wait a bit after reset\n setTimeout(function() {\n \/\/ Select and highlight new elements\n currentHighlighted = getRandomElements(3, 5);\n highlightElements(currentHighlighted);\n \n \/\/ Wait while highlighted, then loop\n setTimeout(animate, 3000);\n }, 500);\n }\n \n \/\/ Start the animation\n animate();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p>Refractory alloys are challenging to design for, in part, because the design space itself is so large. I consider the elements above to be relevant to this space. The animation selects 3\u20135 elements from the above randomly and highlights them. I find this mesmerizing to watch and try to catch any element set being repeated. At a 1 at% grid, fully capturing all alloys in this element set would require ~119 billion billion alloys (1.19×10<sup>20<\/sup>)! For context, this is equivalent to the number of stars in 300 million Milky Ways. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">color-shaded portion of the garnet crystal structure, focused on a dodecahedral site<\/h3>\n\n\n\n<p>(Created in Procreate on iPad and Adobe Illustrator.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1018\" src=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01-1024x1018.jpg\" alt=\"\" class=\"wp-image-39\" srcset=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01-1024x1018.jpg 1024w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01-300x298.jpg 300w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01-150x150.jpg 150w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01-768x764.jpg 768w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01.jpg 1437w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This is one of my absolute favorites. The crystal structure and chemistry of garnets are super fascinating and remarkably complex. To share my research on them, I needed some way to teach the essentials very quickly. The hand-drawn portion of the crystal structure shows how the different polyhedra are connected, without overwhelming the eye by showing <em>all<\/em> polyhedra. The shading brings a pop of color and also functionality tied to the crystal chemistry below. How different elements are distributed between the sites is shown at the very bottom. <\/p>\n\n\n\n<p>This figure was a part of my 2024 presentation at ICACC. The schematic of the crystal structure is heavily inspired by the beautiful figure from <a href=\"https:\/\/pubs.geoscienceworld.org\/msa\/ammin\/article-abstract\/56\/5-6\/791\/540875\/The-Crystal-Chemistry-of-the-Silicate-Garnets\">Novak and Gibbs (1971) <em>The Crystal Chemistry<\/em> <em>of Silicate Garnets<\/em><\/a>. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">timeline of select large language model releases<\/h3>\n\n\n\n<p>(Created in Adobe Illustrator.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-1024x576.jpg\" alt=\"\" class=\"wp-image-34\" srcset=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-1024x576.jpg 1024w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-300x169.jpg 300w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-768x432.jpg 768w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-1536x864.jpg 1536w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-2048x1152.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Entries are colored by the company that trained\/produced the model. Models with open weights or that can be self hosted are beneath the timeline; closed models are above the timeline. I love how well this shows the blowup in development over the past few years. <\/p>\n\n\n\n<p>This figure was included in my presentation on using how large language models can be used to help the research process. A pdf of the presentation is below!<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-6f6259fc-9458-4dab-a30a-3b04e5cdf814\" href=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Holgate-LargeLanguageModels.pdf\">Holgate-LargeLanguageModels<\/a><a href=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Holgate-LargeLanguageModels.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-6f6259fc-9458-4dab-a30a-3b04e5cdf814\">Download<\/a><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">schematic of flyer plate impact<\/h3>\n\n\n\n<p>(Created in Adobe Illustrator.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-1024x462.jpg\" alt=\"\" class=\"wp-image-46\" srcset=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-1024x462.jpg 1024w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-300x135.jpg 300w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-768x346.jpg 768w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-1536x693.jpg 1536w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-2048x924.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I’m quite proud of this figure because it is made to scale and it depicts a complex mode of material failure as easily as I could. The left shows the time of impact between a flyer plate (copper color) and a target held in a momentum ring (in shades of grey), which are used to study high strain rate dynamics. The middle frame zooms into the center region, where pressure waves propagate and create a region of uniaxial strain. The right depicts a x-t (position vs. time) diagram, tracing the pressure wave pathways. Both waves begin as compressive, but transform into tensile waves upon reflection at free surfaces. These tension waves then constructively interfere to create a region of max tension, which can cause the target to rip in half through a process called “spall”.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>I love making figures to describe my data or science. This is less of a single project and more of an ongoing hobby, an expression of art, and a fascination. Here are some of my favorites (updated when new figures are created). animated refractory alloy elements showing random element selection (Created with HTML. Periodic Table […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":20,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/pages\/32\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/media?parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

I love making figures to describe my data or science. This is less of a single project and more of an ongoing hobby, an expression of art, and a fascination. Here are some of my favorites (updated when new figures are created).<\/p>\n\n\n\n

<\/div>\n\n\n\n

animated refractory alloy elements showing random element selection<\/h3>\n\n\n\n
(Created with HTML. Periodic Table produced in Adobe Illustrator; animation produced with Claude.)<\/p>\n\n\n\n\n\n\n \n \n Animated Periodic Table<\/title>\n <style>\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #191919;\n }\n #container {\n max-width: 100%;\n }\n svg {\n max-width: 100%;\n height: auto;\n display: block;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"container\">\n <svg id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" viewBox=\"0 0 641.12 304.82\" width=\"641.12\" height=\"304.82\">\n <defs>\n <style>\n .st0 {\n font-size: 20px;\n }\n\n .st0, .st1 {\n fill: #f2f2f2;\n font-family: Avenir-Roman, Avenir;\n }\n\n .st1 {\n font-size: 16px;\n }\n\n .st2, .st3 {\n fill: #191919;\n }\n\n .st3 {\n stroke: #f2f2f2;\n stroke-miterlimit: 10;\n }\n <\/style>\n <\/defs>\n <g>\n <g>\n <rect class=\"st3\" x=\"532.06\" y=\"67.19\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(536.12 98.95)\"><tspan x=\"0\" y=\"0\">Si<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(556.47 81.86)\"><tspan x=\"0\" y=\"0\">14<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"484.52\" y=\"67.19\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(488.58 98.95)\"><tspan x=\"0\" y=\"0\">Al<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(508.92 81.86)\"><tspan x=\"0\" y=\"0\">13<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"294.35\" y=\"121.93\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(298.41 153.69)\"><tspan x=\"0\" y=\"0\">Co<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(318.76 136.6)\"><tspan x=\"0\" y=\"0\">27<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"246.81\" y=\"121.93\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(250.87 153.69)\"><tspan x=\"0\" y=\"0\">Fe<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(271.22 136.6)\"><tspan x=\"0\" y=\"0\">26<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"151.73\" y=\"121.93\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(155.79 153.69)\"><tspan x=\"0\" y=\"0\">Cr<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(176.14 136.6)\"><tspan x=\"0\" y=\"0\">24<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"104.19\" y=\"121.93\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(108.25 153.69)\"><tspan x=\"0\" y=\"0\">V<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(128.59 136.6)\"><tspan x=\"0\" y=\"0\">23<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"56.64\" y=\"121.93\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(60.71 153.69)\"><tspan x=\"0\" y=\"0\">Ti<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(81.05 136.6)\"><tspan x=\"0\" y=\"0\">22<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"294.35\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(298.41 208.43)\"><tspan x=\"0\" y=\"0\">Rh<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(318.76 191.34)\"><tspan x=\"0\" y=\"0\">45<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"246.81\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(250.87 208.43)\"><tspan x=\"0\" y=\"0\">Ru<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(271.22 191.34)\"><tspan x=\"0\" y=\"0\">44<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"151.73\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(155.79 208.43)\"><tspan x=\"0\" y=\"0\">Mo<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(176.14 191.34)\"><tspan x=\"0\" y=\"0\">42<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"104.19\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(108.25 208.43)\"><tspan x=\"0\" y=\"0\">Nb<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(128.59 191.34)\"><tspan x=\"0\" y=\"0\">41<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"56.64\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(60.71 208.43)\"><tspan x=\"0\" y=\"0\">Zr<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(81.05 191.34)\"><tspan x=\"0\" y=\"0\">40<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"9.1\" y=\"176.67\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(13.16 208.43)\"><tspan x=\"0\" y=\"0\">Y<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(33.51 191.34)\"><tspan x=\"0\" y=\"0\">39<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"294.35\" y=\"231.42\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(298.41 263.18)\"><tspan x=\"0\" y=\"0\">Ir<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(318.76 246.08)\"><tspan x=\"0\" y=\"0\">77<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"199.27\" y=\"231.42\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(203.33 263.18)\"><tspan x=\"0\" y=\"0\">Re<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(223.68 246.08)\"><tspan x=\"0\" y=\"0\">75<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"151.73\" y=\"231.42\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(155.79 263.18)\"><tspan x=\"0\" y=\"0\">W<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(176.14 246.08)\"><tspan x=\"0\" y=\"0\">74<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"104.19\" y=\"231.42\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(108.25 263.18)\"><tspan x=\"0\" y=\"0\">Ta<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(128.59 246.08)\"><tspan x=\"0\" y=\"0\">73<\/tspan><\/text>\n <\/g>\n <g>\n <rect class=\"st3\" x=\"56.64\" y=\"231.42\" width=\"43.2\" height=\"50.4\" rx=\"2.39\" ry=\"2.39\"\/>\n <text class=\"st0\" transform=\"translate(60.71 263.18)\"><tspan x=\"0\" y=\"0\">Hf<\/tspan><\/text>\n <text class=\"st1\" transform=\"translate(81.05 246.08)\"><tspan x=\"0\" y=\"0\">72<\/tspan><\/text>\n <\/g>\n <\/g>\n <path class=\"st2\" d=\"M-356.33-810.15\"\/>\n <\/svg>\n <\/div>\n\n <script>\n \/\/ Wait for DOM to be fully loaded\n document.addEventListener('DOMContentLoaded', function() {\n const svg = document.getElementById('Layer_1');\n const allGroups = Array.from(svg.querySelectorAll('g > g')); \/\/ Get all element groups\n \n let currentHighlighted = [];\n \n \/\/ Colors\n const HIGHLIGHT_BG = '#fcd400';\n const HIGHLIGHT_TEXT = '#433700';\n const NORMAL_BG = '#191919';\n const NORMAL_TEXT = '#f2f2f2';\n \n function getRandomElements(min, max) {\n const count = Math.floor(Math.random() * (max - min + 1)) + min;\n const shuffled = allGroups.slice().sort(() => 0.5 - Math.random());\n return shuffled.slice(0, count);\n }\n \n function highlightElements(elements) {\n elements.forEach(group => {\n const rect = group.querySelector('rect');\n const texts = group.querySelectorAll('text');\n \n if (rect) {\n \/\/ Use both methods for Safari compatibility\n rect.setAttribute('fill', HIGHLIGHT_BG);\n rect.style.fill = HIGHLIGHT_BG;\n }\n texts.forEach(text => {\n text.setAttribute('fill', HIGHLIGHT_TEXT);\n \/\/ Also update tspan children if they exist\n const tspans = text.querySelectorAll('tspan');\n tspans.forEach(tspan => {\n tspan.setAttribute('fill', HIGHLIGHT_TEXT);\n });\n });\n });\n }\n \n function resetElements(elements) {\n elements.forEach(group => {\n const rect = group.querySelector('rect');\n const texts = group.querySelectorAll('text');\n \n if (rect) {\n \/\/ Use both methods for Safari compatibility\n rect.setAttribute('fill', NORMAL_BG);\n rect.style.fill = NORMAL_BG;\n }\n texts.forEach(text => {\n text.setAttribute('fill', NORMAL_TEXT);\n \/\/ Also update tspan children if they exist\n const tspans = text.querySelectorAll('tspan');\n tspans.forEach(tspan => {\n tspan.setAttribute('fill', NORMAL_TEXT);\n });\n });\n });\n }\n \n function animate() {\n \/\/ Reset previous highlights\n if (currentHighlighted.length > 0) {\n resetElements(currentHighlighted);\n }\n \n \/\/ Wait a bit after reset\n setTimeout(function() {\n \/\/ Select and highlight new elements\n currentHighlighted = getRandomElements(3, 5);\n highlightElements(currentHighlighted);\n \n \/\/ Wait while highlighted, then loop\n setTimeout(animate, 3000);\n }, 500);\n }\n \n \/\/ Start the animation\n animate();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p>Refractory alloys are challenging to design for, in part, because the design space itself is so large. I consider the elements above to be relevant to this space. The animation selects 3\u20135 elements from the above randomly and highlights them. I find this mesmerizing to watch and try to catch any element set being repeated. At a 1 at% grid, fully capturing all alloys in this element set would require ~119 billion billion alloys (1.19×10<sup>20<\/sup>)! For context, this is equivalent to the number of stars in 300 million Milky Ways. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">color-shaded portion of the garnet crystal structure, focused on a dodecahedral site<\/h3>\n\n\n\n<p>(Created in Procreate on iPad and Adobe Illustrator.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1018\" src=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01-1024x1018.jpg\" alt=\"\" class=\"wp-image-39\" srcset=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01-1024x1018.jpg 1024w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01-300x298.jpg 300w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01-150x150.jpg 150w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01-768x764.jpg 768w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/CrystalStructureShaded-01.jpg 1437w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This is one of my absolute favorites. The crystal structure and chemistry of garnets are super fascinating and remarkably complex. To share my research on them, I needed some way to teach the essentials very quickly. The hand-drawn portion of the crystal structure shows how the different polyhedra are connected, without overwhelming the eye by showing <em>all<\/em> polyhedra. The shading brings a pop of color and also functionality tied to the crystal chemistry below. How different elements are distributed between the sites is shown at the very bottom. <\/p>\n\n\n\n<p>This figure was a part of my 2024 presentation at ICACC. The schematic of the crystal structure is heavily inspired by the beautiful figure from <a href=\"https:\/\/pubs.geoscienceworld.org\/msa\/ammin\/article-abstract\/56\/5-6\/791\/540875\/The-Crystal-Chemistry-of-the-Silicate-Garnets\">Novak and Gibbs (1971) <em>The Crystal Chemistry<\/em> <em>of Silicate Garnets<\/em><\/a>. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">timeline of select large language model releases<\/h3>\n\n\n\n<p>(Created in Adobe Illustrator.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-1024x576.jpg\" alt=\"\" class=\"wp-image-34\" srcset=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-1024x576.jpg 1024w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-300x169.jpg 300w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-768x432.jpg 768w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-1536x864.jpg 1536w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Timeline-01-2048x1152.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Entries are colored by the company that trained\/produced the model. Models with open weights or that can be self hosted are beneath the timeline; closed models are above the timeline. I love how well this shows the blowup in development over the past few years. <\/p>\n\n\n\n<p>This figure was included in my presentation on using how large language models can be used to help the research process. A pdf of the presentation is below!<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-6f6259fc-9458-4dab-a30a-3b04e5cdf814\" href=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Holgate-LargeLanguageModels.pdf\">Holgate-LargeLanguageModels<\/a><a href=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/Holgate-LargeLanguageModels.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-6f6259fc-9458-4dab-a30a-3b04e5cdf814\">Download<\/a><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">schematic of flyer plate impact<\/h3>\n\n\n\n<p>(Created in Adobe Illustrator.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-1024x462.jpg\" alt=\"\" class=\"wp-image-46\" srcset=\"https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-1024x462.jpg 1024w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-300x135.jpg 300w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-768x346.jpg 768w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-1536x693.jpg 1536w, https:\/\/csholgate.com\/wp-content\/uploads\/2024\/04\/FlyerPlateTarget-01-2048x924.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I’m quite proud of this figure because it is made to scale and it depicts a complex mode of material failure as easily as I could. The left shows the time of impact between a flyer plate (copper color) and a target held in a momentum ring (in shades of grey), which are used to study high strain rate dynamics. The middle frame zooms into the center region, where pressure waves propagate and create a region of uniaxial strain. The right depicts a x-t (position vs. time) diagram, tracing the pressure wave pathways. Both waves begin as compressive, but transform into tensile waves upon reflection at free surfaces. These tension waves then constructively interfere to create a region of max tension, which can cause the target to rip in half through a process called “spall”.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>I love making figures to describe my data or science. This is less of a single project and more of an ongoing hobby, an expression of art, and a fascination. Here are some of my favorites (updated when new figures are created). animated refractory alloy elements showing random element selection (Created with HTML. Periodic Table […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":20,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/pages\/32\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/csholgate.com\/index.php\/wp-json\/wp\/v2\/media?parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}