2f:[{"id":"d7d4c97b30101d989d1c857cdbf04669ffb0207574df9d8ae2895a5415afdc7e926c3ac2ae144ed7a7095455c7db824e6b7515160c724d1b6ecb7e166a3154f0","href":"https://static.observableusercontent.com/files/d7d4c97b30101d989d1c857cdbf04669ffb0207574df9d8ae2895a5415afdc7e926c3ac2ae144ed7a7095455c7db824e6b7515160c724d1b6ecb7e166a3154f0","name":"games.csv","type":"text/csv","lastModified":1681055610031.315,"size":28769},{"id":"671528ff0b24443db4bc8fe0045de7b9459f6ca192fa7ff56e538b8a8abb3a66169d93161f397c4be34f774ff1198e1489a4fde3c70f15214fe2e67f2929b696","href":"https://static.observableusercontent.com/files/671528ff0b24443db4bc8fe0045de7b9459f6ca192fa7ff56e538b8a8abb3a66169d93161f397c4be34f774ff1198e1489a4fde3c70f15214fe2e67f2929b696","name":"super.csv","type":"text/csv","lastModified":1681057478749.485,"size":253118},{"id":"3d0a967a65792732746b37054d3abee6d2816a603b6f66a1efc07a666835adedd24baee13b72bdac5656cba046f95effcb219a001c1c791fc3df4b02b461200d","href":"https://static.observableusercontent.com/files/3d0a967a65792732746b37054d3abee6d2816a603b6f66a1efc07a666835adedd24baee13b72bdac5656cba046f95effcb219a001c1c791fc3df4b02b461200d","name":"superheroes.csv","type":"text/csv","lastModified":1681057661773.497,"size":279538}] 2d:{"title":"Superheroes vs. Villains","cells":[{"id":258,"value":"

Superheroes vs. Villains

","pinned":false,"hidden":false,"mode":"html"},{"id":0,"value":"Data from the [**Superhero API**](https://www.superheroapi.com/). I used Mike Bostock's [example](https://observablehq.com/@observablehq/plot-stack?collection=@observablehq/plot) of a stacked plot and modified it to create a plot comparing super power stats for superheroes and villains. All abilities are scaled from 1 to 100. You can toggle to focus on characters from either **DC** or **Marvel** Comics.","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"viewof filters = (\n Inputs.form({\n comic_type: Inputs.select([\"DC Comics\",\"Marvel Comics\"], {label: \"Publisher\", value: \"DC Comics\"}),\n ability: Inputs.select([\"speed\",\"intelligence\",\"strength\",\"power\",\"durability\",\"combat\"], {label: \"Ability\", value: \"strength\"})\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"Plot.plot({\n height: 600,\n width:1000,\n x: {\n label: \"Ability →\",\n grid: true,\n tickSize:0\n },\n y: {\n label: \"← Bad · Good →\",\n labelAnchor: \"center\",\n tickFormat: Math.abs,\n ticks: false\n },\n marks: [\n Plot.dot(subset,\n Plot.stackY2({\n x: filters.ability,\n y: d => d.alignment === \"good\" ? 1 : d.alignment === \"bad\" ? -1 : 0,\n title: d => `${d.name}: ${d[filters.ability]}`,\n //fill: \"alignment\",\n fill: d => d.alignment === \"good\" ? '#FFC20D' : d.alignment === \"bad\" ? '#4C3EAB' : 'black',\n stroke: \"white\",\n r: 8\n })),\n Plot.ruleY([0],{strokeWidth: 3}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"# Tooltips\n\nTo create the tooltip hover effect, I imported Mike Freeman's notebook with Plot. Contains arguments for **title**.","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"# Data\n\nI imported the data as a csv file. Original file stored on my [Github](https://github.com/tashapiro/superhero-comics/blob/main/data/superheroes.csv).\n\nData is used to generate plot above. If you have an R background, it's important to note that the order of cells doesn't matter (doesn't generate top down like R). ","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"superheroes = await FileAttachment(\"superheroes.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"## Subset with SQL\n\nYou can use SQL with dynamic inputs to change the data. Here I pass in input values from above to subset the data.","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"SELECT *\nFROM superheroes\nWHERE publisher = ${filters.comic_type} and alignment IN ('good','bad') and height_in<1000","pinned":false,"hidden":false,"mode":"sql","output":"subset","database":"var:superheroes"},{"id":321,"value":"# Adding CSS \n\nYou can get super detailed customizing plots using CSS - if you're familiar with R ggplot2, think of it like ggplot::them. You can also apply CSS to other components of your notebook like headers and supporting text.","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W2f","stdlib":"1","titling":"auto"}