2d:null 2e:["$","title",null,{"children":"Download data button | Jeremia Kimelman | Observable"}] 33: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" } ]34:[] 31:{"id":"bedb50933413e557","slug":"download-data-button","title":"Download data button","thumbnail":"4ca3136a9999e7b12406e0c331b0698143093da924ad1ce7ad51f77a9a3922dc","access_level":"public","create_time":"$D2020-03-10T00:31:19.269Z","update_time":"$D2025-04-08T01:07:39.417Z","view_time":null,"first_public_time":"$D2020-03-10T00:54:30.326Z","has_unpublished_edits":null,"fork":false,"stars":32,"starred":false,"owner":{"type":"team","id":"53ab69aac59784dd","login":"jeremiak","name":"Jeremia Kimelman","avatar_url":"https://avatars-next.observableusercontent.com/7368920b6513e0b928ca284cfdfda6e944f0e61c6bb9217b878231a2febce907","tier":"starter_2024"},"version":49,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9762765df1e9b90e","login":"jeremiak","name":"Jeremia Kimelman","avatar_url":"https://avatars-next.observableusercontent.com/7368920b6513e0b928ca284cfdfda6e944f0e61c6bb9217b878231a2febce907","tier":null}],"members":[{"type":"individual","id":"9762765df1e9b90e","login":"jeremiak","name":"Jeremia Kimelman","avatar_url":"https://avatars-next.observableusercontent.com/7368920b6513e0b928ca284cfdfda6e944f0e61c6bb9217b878231a2febce907","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":null,"type":"notebook","body":{"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","output":"$undefined","database":"$undefined"},{"id":38,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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.toLocaleString(\"en-US\")} KB)`\n );\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"