3e:null 3f:["$","title",null,{"children":"Download data button | Sharon Machlis | Observable"}] 45:Tf88,data = [ { fips: "01", abbreviation: "AL", name: "Alabama" }, { fips: "02", abbreviation: "AK", name: "Alaska" }, { fips: "03", abbreviation: "AS", name: "American Samoa" }, { fips: "04", abbreviation: "AZ", name: "Arizona" }, { fips: "05", abbreviation: "AR", name: "Arkansas" }, { fips: "06", abbreviation: "CA", name: "California" }, { fips: "07", abbreviation: "CZ", name: "Canal Zone" }, { fips: "08", abbreviation: "CO", name: "Colorado" }, { fips: "09", abbreviation: "CT", name: "Connecticut" }, { fips: "10", abbreviation: "DE", name: "Delaware" }, { fips: "11", abbreviation: "DC", name: "District Of Columbia" }, { fips: "12", abbreviation: "FL", name: "Florida" }, { fips: "13", abbreviation: "GA", name: "Georgia" }, { fips: "14", abbreviation: "GU", name: "Guam" }, { fips: "15", abbreviation: "HI", name: "Hawaii" }, { fips: "16", abbreviation: "ID", name: "Idaho" }, { fips: "17", abbreviation: "IL", name: "Illinois" }, { fips: "18", abbreviation: "IN", name: "Indiana" }, { fips: "19", abbreviation: "IA", name: "Iowa" }, { fips: "20", abbreviation: "KS", name: "Kansas" }, { fips: "21", abbreviation: "KY", name: "Kentucky" }, { fips: "22", abbreviation: "LA", name: "Louisiana" }, { fips: "23", abbreviation: "ME", name: "Maine" }, { fips: "24", abbreviation: "MD", name: "Maryland" }, { fips: "25", abbreviation: "MA", name: "Massachusetts" }, { fips: "26", abbreviation: "MI", name: "Michigan" }, { fips: "27", abbreviation: "MN", name: "Minnesota" }, { fips: "28", abbreviation: "MS", name: "Mississippi" }, { fips: "29", abbreviation: "MO", name: "Missouri" }, { fips: "30", abbreviation: "MT", name: "Montana" }, { fips: "31", abbreviation: "NE", name: "Nebraska" }, { fips: "32", abbreviation: "NV", name: "Nevada" }, { fips: "33", abbreviation: "NH", name: "New Hampshire" }, { fips: "34", abbreviation: "NJ", name: "New Jersey" }, { fips: "35", abbreviation: "NM", name: "New Mexico" }, { fips: "36", abbreviation: "NY", name: "New York" }, { fips: "37", abbreviation: "NC", name: "North Carolina" }, { fips: "38", abbreviation: "ND", name: "North Dakota" }, { fips: "39", abbreviation: "OH", name: "Ohio" }, { fips: "40", abbreviation: "OK", name: "Oklahoma" }, { fips: "41", abbreviation: "OR", name: "Oregon" }, { fips: "42", abbreviation: "PA", name: "Pennsylvania" }, { fips: "43", abbreviation: "PR", name: "Puerto Rico" }, { fips: "44", abbreviation: "RI", name: "Rhode Island" }, { fips: "45", abbreviation: "SC", name: "South Carolina" }, { fips: "46", abbreviation: "SD", name: "South Dakota" }, { fips: "47", abbreviation: "TN", name: "Tennessee" }, { fips: "48", abbreviation: "TX", name: "Texas" }, { fips: "49", abbreviation: "UT", name: "Utah" }, { fips: "50", abbreviation: "VT", name: "Vermont" }, { fips: "51", abbreviation: "VA", name: "Virginia" }, { fips: "52", abbreviation: "VI", name: "Virgin Islands" }, { fips: "53", abbreviation: "WA", name: "Washington" }, { fips: "54", abbreviation: "WV", name: "West Virginia" }, { fips: "55", abbreviation: "WI", name: "Wisconsin" }, { fips: "56", abbreviation: "WY", name: "Wyoming" } ]46:[] 43:{"id":"7ddf7379ed429422","slug":null,"title":"Download data button","thumbnail":"2d7e77f257d46e2171b35b82c0344c9e2c147ebd589331ea4ba1e71496df4fc6","access_level":"public","create_time":"$D2023-01-26T15:05:23.603Z","update_time":"$D2023-01-26T15:05:23.603Z","view_time":null,"first_public_time":"$D2023-01-26T15:05:23.603Z","has_unpublished_edits":null,"fork":{"id":"bedb50933413e557","slug":"download-data-button","title":"Download data button","owner":{"id":"53ab69aac59784dd","login":"jeremiak","name":"Jeremia Kimelman"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e6626e0c554e7cd9","login":"smach","name":"Sharon Machlis","avatar_url":"https://avatars-next.observableusercontent.com/9c8b2ebc3314083debee9a2f5877cc4e485b983fe06b765f08075c4d7e67a4d4","tier":"starter_2024","bio":"Director, Editorial Data & Analytics at Foundry (formerly IDG Communications). Somewhat R-obsessed. Find me on Mastodon @smach@fosstodon.org","following":false},"version":45,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"783027c963c28368","login":"smach","name":"Sharon Machlis","avatar_url":"https://avatars-next.observableusercontent.com/9c8b2ebc3314083debee9a2f5877cc4e485b983fe06b765f08075c4d7e67a4d4","tier":null,"bio":"Director, Editorial Data & Analytics at Foundry (formerly IDG Communications). Somewhat R-obsessed. Find me on Mastodon @smach@fosstodon.org","following":false}],"members":[{"type":"individual","id":"783027c963c28368","login":"smach","name":"Sharon Machlis","avatar_url":"https://avatars-next.observableusercontent.com/9c8b2ebc3314083debee9a2f5877cc4e485b983fe06b765f08075c4d7e67a4d4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Download data button","cells":[{"id":0,"value":"{\n const div = DOM.element('div');\n const csvBtn = button(data, 'fips.csv');\n const jsonBtn = button(data, 'fips.json');\n const csvText = md`# Download data button\n\nThe button function takes two positional arguments:\n\n1. **Required** - An array of the data to download as a CSV or a JSON file\n2. The name of the file to be downloaded, defaults to data.csv\n\nFor example, this code will create the following button\n\nbutton(data, 'fips.csv')\n\n`;\n const jsonText = md`And if you use a filename that ends in .json, then the button will download a JSON document instead of a CSV.\n\n\nbutton(data, 'fips.json')\n`;\n\n div.appendChild(csvText);\n div.appendChild(csvBtn);\n div.appendChild(jsonText);\n div.appendChild(jsonBtn);\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"button = (data, filename = 'data.csv') => {\n if (!data) throw new Error('Array of data required as first argument');\n\n let downloadData;\n if (filename.includes('.csv')) {\n downloadData = new Blob([d3.csvFormat(data)], { type: \"text/csv\" });\n } else {\n downloadData = new Blob([JSON.stringify(data, null, 2)], {\n type: \"application/json\"\n });\n }\n\n const size = (downloadData.size / 1024).toFixed(0);\n const button = DOM.download(\n downloadData,\n filename,\n `Download ${filename} (~${size} KB)`\n );\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"