2b:null 2c:["$","title",null,{"children":"DataViz@Urban Component Form | Ben Kates | Observable"}] 31:[{"id":"33f25ce757b7a97fb33df13a9e5df13602e9ecc9877c1c93b6073e95c19410217e0f7d1f38f67af2d83df9de737395cf2f67404f235c10ffebca8e6e84d96902","href":"https://static.observableusercontent.com/files/33f25ce757b7a97fb33df13a9e5df13602e9ecc9877c1c93b6073e95c19410217e0f7d1f38f67af2d83df9de737395cf2f67404f235c10ffebca8e6e84d96902","name":"components@1.js","type":"application/javascript","lastModified":1680125040183.805,"size":225130},{"id":"5a23b1204725dbdf7607cc3c1fe03689762ffbeb0f01625f63633a5e13b3e7764ed1fc56bb7ec2a4be9083b45b94d3b4f879042cd01d541868c6d263bfa8c629","href":"https://static.observableusercontent.com/files/5a23b1204725dbdf7607cc3c1fe03689762ffbeb0f01625f63633a5e13b3e7764ed1fc56bb7ec2a4be9083b45b94d3b4f879042cd01d541868c6d263bfa8c629","name":"us-albers-counties.json","type":"application/json","lastModified":1680116654534.94,"size":1240597},{"id":"983f9097b4f18bbf00419e7c008b2141e9c80f1d383d25761dc69fc501d8b5efc653af33ccbdb1475e9d48bdd0d8664ffcecd33e7fb21a8c4616f2efd2cb761f","href":"https://static.observableusercontent.com/files/983f9097b4f18bbf00419e7c008b2141e9c80f1d383d25761dc69fc501d8b5efc653af33ccbdb1475e9d48bdd0d8664ffcecd33e7fb21a8c4616f2efd2cb761f","name":"components.js","type":"application/javascript","lastModified":1680116798417.137,"size":214159},{"id":"72ebcd9585c8621687c5c4ac666cb7ac391ea3b84aa8c89ceef58a2ad951c2e2d5381578306e62557907dd167263a3701c8a5e0e487567baaf2d9aa0f4ce6e02","href":"https://static.observableusercontent.com/files/72ebcd9585c8621687c5c4ac666cb7ac391ea3b84aa8c89ceef58a2ad951c2e2d5381578306e62557907dd167263a3701c8a5e0e487567baaf2d9aa0f4ce6e02","name":"components@2.js","type":"application/javascript","lastModified":1680288962240.881,"size":216541}] 2f:{"id":"980c0ced6b39f0a9","slug":null,"title":"DataViz@Urban Component Form","thumbnail":"e1a6757539510ec6477fffa5fd8334ebea70a7ae570b84a567f8c779a864bd98","access_level":"public","create_time":"$D2023-03-29T18:50:39.427Z","update_time":"$D2023-04-04T16:58:03.684Z","view_time":null,"first_public_time":"$D2023-03-29T18:50:39.427Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c66fdfa7ca0f9207","login":"benkates","name":"Ben Kates","avatar_url":"https://avatars-next.observableusercontent.com/f64d42b424efb5f5b1856d6df2082b68771971c4df3edefcbb3ed749539c1cd6","tier":"starter_2024"},"version":336,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"794b1c1eb3bbad78","login":"benkates","name":"Ben Kates","avatar_url":"https://avatars-next.observableusercontent.com/a403af350ba2640c9aa5d23aab550636d49cb25b28cd9f0ca681324d3a33f611","tier":null}],"members":[{"type":"individual","id":"794b1c1eb3bbad78","login":"benkates","name":"Ben Kates","avatar_url":"https://avatars-next.observableusercontent.com/a403af350ba2640c9aa5d23aab550636d49cb25b28cd9f0ca681324d3a33f611","tier":null,"role":"editor"},{"type":"individual","id":"5dbade09d97bf642","login":"mitchthorson","name":"Mitchell Thorson","avatar_url":"https://avatars-next.observableusercontent.com/e8365fa37d2b44588fea3209ea02b8038f73e927e25e21022a44d4c91f4de959","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"DataViz@Urban Component Form","cells":[{"id":194,"value":"# DataViz@Urban Component Form\n\nThe form below allows users at Urban Institute to interact with the custom web component `` and enter inputs. Copy the HTML output to use wherever `components.js` is present. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"## Attribute Inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"viewof title = Inputs.text({\n label: \"Title\",\n value:\n \"County Map of the US, Lorem ipsum dolor sit amet, consectetur adipiscing elit\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof subtitle = Inputs.text({\n label: \"Subtitle\",\n value: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof shapefile_location = Inputs.text({\n label: \"Shapefile Location\",\n value:\n \"https://static.observableusercontent.com/files/5a23b1204725dbdf7607cc3c1fe03689762ffbeb0f01625f63633a5e13b3e7764ed1fc56bb7ec2a4be9083b45b94d3b4f879042cd01d541868c6d263bfa8c629\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof shapefile_object_name = Inputs.text({\n label: \"Shapefile Object Name\",\n value: \"collection\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof shapefile_accessor = Inputs.text({\n label: \"Shapefile Accessor\",\n value: \"properties.fips\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof shape_col_name = Inputs.text({\n label: \"Shape Column Name\",\n value: \"GEOID\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"viewof data_location = Inputs.text({\n label: \"Data Location\",\n type:\"url\",\n value:\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSkqxSOj5kvELwWvnzlJjIxWBKeYkMyjStj_d7_sEnxa4lZO-qDp7rFMinHH8qJh0hnFok_erf72aaP/pub?gid=1921071937&single=true&output=csv\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof data_source = Inputs.text({\n label: html`Data Source
(Link or Attribution)`,\n value: \"Urban Institute's Comms Team\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof data_note = Inputs.text({\n label: \"Data Note\",\n value: \"This is a note about how great the data is.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"viewof data_cols = Inputs.text({\n label: html`Data Columns
(Comma Separated)`,\n value: \"median_income,population\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"viewof data_cols_labels = Inputs.text({\n label: html`Data Column Labels
(Comma Separated)`,\n value: \"Median Income,Population\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"viewof selected_metric_name = Inputs.select(data_cols.split(\",\"), {\n label: html`Selected Value
(Initial Dropdown Value)`,\n value: \"median_income\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"viewof data_cols_format = Inputs.text({\n label: html`Data Column Format
(Comma Separated)`,\n value: \"$,.0f|,.0f\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"viewof fill_palette = Inputs.select([\"blue\", \"yellow\", \"magenta\", \"grey\"], {\n label: \"Fill Color Palette\",\n value: \"yellow\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof outline_color = Inputs.color({\n label: \"Outline Color\",\n datalist: d3.schemeTableau10,\n value: \"#7e7977\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof hover_outline_color = Inputs.color({\n label: \"Hover Outline Color\",\n datalist: d3.schemeTableau10,\n value: \"#ffffff\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"viewof na_color = Inputs.color({\n label: \"Stroke\",\n datalist: d3.schemeTableau10,\n value: \"#5c5859\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"viewof logo_flag = Inputs.toggle({ label: \"Include Urban Logo\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"viewof desc_text = Inputs.textarea({\n label: \"Accessible Descriptive Text\",\n placeholder: \"What’s your story?\",\n value:\n \"This is an example of a description text. It can be used to provide more information about the map.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"viewof albers_projection_flag = Inputs.toggle({\n label: \"Albers Projection Flag\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"## Component Output\n```html\n${output()}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"html`${output()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"function output() {\n const attrList = {\n title,\n subtitle,\n shapefile_location,\n shapefile_object_name,\n shapefile_accessor,\n shape_col_name,\n data_source,\n data_note,\n data_cols,\n data_cols_labels,\n outline_color,\n hover_outline_color,\n fill_palette,\n data_cols_format,\n data_location,\n selected_metric_name,\n logo_flag,\n desc_text,\n na_color,\n albers_projection_flag\n };\n // create code variable\n let codePrep = ``;\n return codePrep;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"components_js = (await import(await FileAttachment(\"components@2.js\").url()))\n .SCRIPTS","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"style = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"