2a:null 2b:["$","title",null,{"children":"Using Vega Lite to explore Chemistry | Zeke Nierenberg | Observable"}] 30:Te96,md`Chemistry content is hard to play with. Unlike Newtonian physics, the world of chemistry is intangible. You can't shrink yourself down and see an _sp³_ orbital. You can't reach out and touch an _S_N2_ reaction. Sure, there are molecule sets you could tinker with, and of course feedback comes from the professor when you turn in a problem set. But I want a _REPL_. Chemistry is often taught in a linear, rigid way. For example, in high school I was asked to commit the first 20 elements of the periodic table to _memory_, an exercise in futility that I suspect is not uncommon. This strategy "works" to a certain extent—_some_ students learn _some_ things—but it's almost like teaching Shakespeare in morse code: it loses almost everything in translation. In college, chemistry is presented more thoughtfully, but still as a set of rules in sequence. The curriculum was designed around a self-imposed constraint: the belief students have a "[dependency graph](https://en.wikipedia.org/wiki/Dependency_graph) of knowledge." \`A\` must proceed \`B\`, and \`B\` before \`C\` and \`D\`. The math behind quantum chemistry is thought to be too complex for Freshmen. The math gets replaced with handwaving and students are asked to buy into a set of metaphors—a _grammar_, if you will. If you develop an intuition about the framework—a _feel_ for thermodynamics and kinetics—you'll be successful for long enough to get in front of the good stuff. This isn't entirely bad! Again, some students really do learn chemistry. It's just missing a few ingredients and not meeting it's potential. I'm reminded of one of my favorite [Seymour Papert quotes](https://www.thriftbooks.com/w/mindstorms-children-computers-and-powerful-ideas_seymour-papert/278731/item/41971983/?mkwid=3KrTPiKg%7cdc&pcrid=11558858306&pkw=&pmt=be&slid=&product=41971983&plc=&pgrid=3970769380&ptaid=pla-1101002865068&utm_source=bing&utm_medium=cpc&utm_campaign=Bing+Shopping+%7c+Computers+&+Technology&utm_term=&utm_content=3KrTPiKg%7cdc%7cpcrid%7c11558858306%7cpkw%7c%7cpmt%7cbe%7cproduct%7c41971983%7cslid%7c%7cpgrid%7c3970769380%7cptaid%7cpla-1101002865068%7c#idiq=41971983&edition=28870316): > It is generally assumed that children cannot learn formal geometry until well into their school years, and that most cannot learn it too well even then. But we can quickly see that these assumptions are based on extremely weak evidence by asking analogous questions about the ability of children to learn French. If we had to base our opinions on observations of how poorly children learned French in American schools, we would have to conclude that most people were incapable of mastering it. But we know that all normal children would learn it very easily if they lived in France. My conjecture is that much of what we now see as too "formal" or "too mathematical" will be learned just as easily when children grow up in the computer-rich world of the very near future. I want to bring students on a foreign exchange program to ChemistryLand. I want to trust students with stuff they're "not ready for yet", and let them play. I want to teach every Chemistry student Vega Lite and Observable. I'm kind of joking... it doesn't _have_ to be Vega Lite or Observable. But I want to give them the capability to create little personal digital playgrounds to get lost in. To zoom in on just one example of the type of learning I'm talking about, I draw from personal experience. In college, after a few semesters of chemistry, I managed to cobble together a visualization by modifying a D3 Iris SPLOM example and hacking it together with a [ChemDoodle](https://web.chemdoodle.com/) widget. The experience was liberating.`31:T7e8,md` I want to live in a world where chemistry students routinely ask these questions themselves—a world where students aren't limited to the frameworks build into the textbook. I think technologies like Vega Lite and Observable could change how we teach science and math. As a platform, Observable is great for exploration and education. It's flexible, not binding itself to one specific tool (When you run into situations where you outgrow Vega Lite you can go to [D3](https://observablehq.com/@d3/gallery) or right down to the canvas. You can even [use WebGL](https://observablehq.com/@rreusser/faking-transparency-for-3d-surfaces?collection=@rreusser/webgl).) It's collaborative. You can talk to and learn from others. There's a lot to get [inspired by](https://observablehq.com/explore). Lastly, [it's not just for science](https://observablehq.com/@ada-lovecraft/creating-a-canvas-noise-map-for-generative-art). And this article isn't really about chemistry. It's about teaching, learning, and exploring. Vega Lite is special because it's declarative. You don't get bogged down with implementation details, instead you stay close to the data you're working with. To achieve this, Vega Lite gives up some flexibility. You can't express anything you want. But, it covers 95% of what you need to get aquatinted with any given problem space. Interaction is built into the spec, giving it a big leg up on other great declarative visualization tools. If you're wondering why I'm not advocating for Jupyter notebooks or Matplotlib or some other technology, you're mistaking my enthusiasm about these tools for an argument that they're the "right" tools or the only tools to learn with. I'm not saying this stack has some kind of secret sauce. It's just a great one. I'm quite sure the data-vis landscape will continue to mature and will look quite different in 10 years. But, I don't think conventional STEM education is on the same glide-path of progress. (Also, you can use Vega Lite in an Jupyter Notebook) `32:[{"id":"24d80e678acaa04a50ef1ca942a2f4786bed34ef3e8620d6d0dc3997adfcfb7c1f7e9878048e0b60a1e96d6c20bea97c62cd79e734f5a63e34010cabd60de94a","href":"https://static.observableusercontent.com/files/24d80e678acaa04a50ef1ca942a2f4786bed34ef3e8620d6d0dc3997adfcfb7c1f7e9878048e0b60a1e96d6c20bea97c62cd79e734f5a63e34010cabd60de94a","name":"periodictable.csv","type":"text/csv","lastModified":1613400603389.497,"size":14979},{"id":"42ff5dd52391aa3d0f7a7a6ed137b61a546a394b615f4066650b2a0d625c49a2bed36178475748ef9d89013733e747427ed50d5598fa3d7b0df0fedc25d263f7","href":"https://static.observableusercontent.com/files/42ff5dd52391aa3d0f7a7a6ed137b61a546a394b615f4066650b2a0d625c49a2bed36178475748ef9d89013733e747427ed50d5598fa3d7b0df0fedc25d263f7","name":"bg.jpg","type":"image/jpeg","lastModified":1613483980778.088,"size":69126},{"id":"6d68b144c8a3a26bb1d39fffb5c4e300be5239af6ce97a5139cb02f19ca81b7864b919bc691b1714f1b8c95aecd34603c868ffe6ca3946f8c07a24093e0c6c37","href":"https://static.observableusercontent.com/files/6d68b144c8a3a26bb1d39fffb5c4e300be5239af6ce97a5139cb02f19ca81b7864b919bc691b1714f1b8c95aecd34603c868ffe6ca3946f8c07a24093e0c6c37","name":"example.gif","type":"image/gif","lastModified":1614530387838.571,"size":614488}] 2e:{"id":"ceaa8f2faad88e4d","slug":"using-vega-lite-to-explore-chemistry","title":"Using Vega Lite to explore Chemistry","thumbnail":"e17dc00efb044cb44d8effe9c8aad7c38f9b321da38a4d25917620c14998e3a8","access_level":"public","create_time":"$D2021-02-15T14:47:25.516Z","update_time":"$D2025-02-21T17:56:32.197Z","view_time":null,"first_public_time":"$D2021-02-16T03:07:17.290Z","has_unpublished_edits":null,"fork":false,"stars":39,"starred":false,"owner":{"type":"team","id":"b9eb63f17050ccf7","login":"zekenie","name":"Zeke Nierenberg","avatar_url":"https://avatars-next.observableusercontent.com/7346a2f2887cfa1ebd3d2765ca074b2f6990326c21752f6834193815df569cd3","tier":"starter_2024"},"version":678,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9202aa42fa47ffda","login":"zekenie","name":"Zeke Nierenberg","avatar_url":"https://avatars-next.observableusercontent.com/7346a2f2887cfa1ebd3d2765ca074b2f6990326c21752f6834193815df569cd3","tier":null}],"members":[{"type":"individual","id":"9202aa42fa47ffda","login":"zekenie","name":"Zeke Nierenberg","avatar_url":"https://avatars-next.observableusercontent.com/7346a2f2887cfa1ebd3d2765ca074b2f6990326c21752f6834193815df569cd3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Using Vega Lite to explore Chemistry","cells":[{"id":0,"value":"md`# Using Vega Lite to explore Chemistry`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`I studied Chemistry in college, and it was difficult for me. I was doing well enough in classes, but all the tricks I had to thrive weren't working. Since middle-school, I had always tried to connect what I was learning to computation. I did my physics problem sets in javascript. I made my essays into little websites. In chemistry it was harder. I couldn't even take notes on the computer because I needed to quickly capture figures that were difficult to represent on a keyboard.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"imageCard({\n src: await FileAttachment(\"bg.jpg\").url(),\n caption: md`Some of my notes from Orgo`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md`Let's not forget, the periodic _is_ a data visualization, it's just not a particularly good one by modern standards. It was designed by chemists in order to make sense of the world as they were discovering it. It's designed for utility and it was always a second-rate teaching and learning tool.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"imageCard({\n src:\n \"https://upload.wikimedia.org/wikipedia/commons/0/03/Simple_Periodic_Table_Chart-blocks.svg\",\n caption: md`Credit [Wikipedia](https://en.wikipedia.org/wiki/Periodic_table)`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`The word of atoms is so much _weirder_ and more interesting than the periodic table suggests! There are ways to present this information that spark curiosity in the minds of students and invite them to _explore_.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"imageCard({\n src:\n \"https://upload.wikimedia.org/wikipedia/commons/6/62/Spherical_Harmonics.png\",\n caption: md`Credit [Inigo.quilez](https://commons.wikimedia.org/wiki/User:Inigo.quilez) on [Wikipedia](https://en.wikipedia.org/wiki/Periodic_table)`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"html`

${md`## The visualization\nIf we got a random CSV from a scientist containing readings on it, what would we do with it? We'd start by poking around! Try brushing to select certain elements to see what happens. Try changing the \"color by\" property. I highly suggest you take this into full screen.`}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"viewof colorBy = Select([\"Type\", \"Phase\", \"Radioactive\", \"Natural\", \"Metal\"], {\n label: \"Color by\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"figure.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`The very act of making this visualization is empowering. It lets the creator _discover_ the periodic table themselves. After a little play, we can actually see it staring right at us in the data. It's a little bit flipped on it's head, but it's there!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"vl\n .markCircle({ size: 150 })\n .width(300)\n // .select(brush)\n .data(elements)\n //.select(brush)\n .encode(\n vl.tooltip().fieldN(\"Element\"),\n vl\n .x()\n .fieldQ(\"AtomicRadius\")\n .scale({ zero: false }),\n vl\n .y()\n .fieldQ(\"AtomicMass\")\n .scale({ zero: false }),\n vl.color().fieldN(colorBy)\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"md`Let's do another.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"bind(\n Select([\"Type\", \"Phase\", \"Radioactive\", \"Natural\", \"Metal\"], {\n label: \"Color by\"\n }),\n viewof colorBy\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"viewof property = Select(\n [\n \"Density\",\n \"AtomicRadius\",\n \"Electronegativity\",\n \"FirstIonization\",\n \"MeltingPoint\",\n \"BoilingPoint\",\n \"NumberOfIsotopes\",\n \"NumberofValence\",\n \"AtomicMass\",\n \"NumberofNeutrons\",\n \"NumberofProtons\",\n \"NumberofElectrons\"\n ],\n {\n label: \"Property to explore\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"{\n const brush = vl\n .selectInterval()\n .encodings(\"x\")\n .resolve('global');\n const bars = vl\n .markBar({ width: 40 })\n .height(80)\n .select(brush)\n .encode(\n vl\n .x()\n .fieldQ(property)\n .bin(true),\n vl.row().fieldQ(\"Period\"),\n vl.y().count(),\n colorEncoding(brush),\n opacityEncoding(brush)\n )\n .width(500);\n\n return vl\n .vconcat(periodicTable(brush), bars)\n .data(elements)\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"md`These visualizations aren't particularly _inspired_. They're run-of-the-mill Vega Lite. And, that's kind of the point. I didn't spend weeks making them, I spent an hour (and I'm still learning Vega Lite, I'm sure someone who's really learned the API could put this together in a couple of minutes).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`## I did this as a chemistry student in 2012. It was a lot harder back then.\nIn 2012, this was _way_ harder to make. In 2012, I had to worry about DOM nodes... In 2012 I used jQuery UI to handle the brushing for some reason. In 2012, the \"limiting reagent\" was programming knowledge. Granted, I'm a more mature programmer than I was in college, but I feel like that only accounts for a tiny fraction of the improvement. The tools are an order of magnitude better.\n\n(This is fantastic because overall, I don't think we've seen anywhere near an order of magnitude improvement in the cost of computing. More on that thought [here](https://offbyone.us/posts/cost-of-computing/))`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"figure = vl.vconcat(periodicTable(brush), splom(brush)).data(elements)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"brush = vl.selectInterval().resolve('global')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"colorEncoding = _.memoize(brush =>\n vl\n .color()\n .if(brush, vl.fieldN(colorBy))\n .value('grey')\n .scale({ scheme: \"set2\" })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"opacityEncoding = _.memoize(brush =>\n vl\n .opacity()\n .if(brush, vl.value(0.8))\n .value(0.1)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"splom = _.memoize(brush => {\n const numericProperties = [\n \"AtomicMass\",\n //\"NumberofNeutrons\",\n //\"NumberofProtons\",\n //\"NumberofElectrons\",\n \"AtomicRadius\",\n \"Electronegativity\",\n \"FirstIonization\",\n \"Density\",\n \"MeltingPoint\",\n \"BoilingPoint\",\n \"NumberOfIsotopes\"\n //\"NumberofValence\"\n ];\n return vl\n .markCircle()\n .select(brush)\n\n .encode(\n vl\n .x()\n .fieldQ(vl.repeat(\"row\"))\n .scale({ zero: false }),\n vl\n .y()\n .fieldQ(vl.repeat(\"column\"))\n .scale({ zero: false }),\n colorEncoding(brush),\n opacityEncoding(brush)\n )\n .width(100)\n .height(100)\n .repeat({\n row: numericProperties,\n column: numericProperties\n });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"periodicTable = _.memoize(brush => {\n const x = vl\n .x()\n .fieldN(\"Group\")\n .axis(false);\n const y = vl\n .y()\n .fieldN(\"Period\")\n .axis(false);\n const squares = vl\n .markRect({ stroke: \"white\" })\n .width(550)\n .height(250)\n .select(brush)\n .encode(x, y, colorEncoding(brush), opacityEncoding(brush));\n\n const text = vl.markText().encode(x, y, vl.text().field(\"Symbol\"));\n\n return vl.layer(squares, text); //.autosize(\"pad\");\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"elements = aq.fromCSV(await FileAttachment(\"periodictable.csv\").text()).derive({\n displayPeriod: d => d.Period * -1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"imageCard = ({ src, caption }) => {\n return html`

\n ${caption}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { idea, problem, question, conclusion } from \"@zekenie/thought-process\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"import { tweet } from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"import {\n Button,\n Checkbox,\n Toggle,\n Radio,\n Range,\n bind,\n Select,\n Text,\n Search,\n Table\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"import { mdfn, footlist, footnoteCSS } with {\n footnotes\n} from '@formsandlines/linked-markdown-style-footnotes-with-tooltips'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"footnoteCSS","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"