33:null 34:["$","title",null,{"children":"4 ways to get started with JavaScript for data analysis | Observable | Observable"}] 3a:T67a,## # 1: Play with data on the web, in the web’s language If your data lives on the web (spoiler: a ton of it does), it makes sense to start using JavaScript for data analysis. Luckily, it’s easy to get started. To access so many of these compelling data sources out there in the world, knowing JavaScript is crucial. Otherwise, you’re downloading static data sets — something you’re probably already doing. Then, when that static data set is updated, you find yourself redownloading, replacing, and dealing with version-control headaches. So, how do you work with data on the web? The two most common ways you’ll find data online are through APIs or hosted files. ### What is an API? _API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other._ In this context, it’s the way you can send data from one website to another. When you go to an API endpoint, i.e. a URL, you will see in plain text the data that the endpoint serves. It certainly can get more complicated than that, but many API endpoints are just that easy. And APIs typically return data in JSON format, which is a JavaScript data structure, so working with the data in JavaScript is easy, no translation required. There’s also many datasets available as files you can access by URL. For example, the datasets used by the New York Times Covid trackers are all available on Github as CSVs. (A CSV is a common data structure where values are separated by commas.) Using JavaScript, you can access these directly, which means whenever they update, your analysis will update too. 3b:T4fc,### Using web data in Observable notebooks Here’s what’s so cool about Observable: you can use any URL that returns data, insert it into a notebook and from then on, you’re working with that data. It’s as if you attached a file to your notebook, and it behaves like so, but better. In an Observable notebook, you can easily fetch any hosted dataset. Once you do that, you have all this great data at your fingertips, and every time you open your notebook, your data is refreshed. For example, in less than 3 minutes, I built an analysis from [data on the number of weekly subway riders in New York City](https://new.mta.info/coronavirus/ridership), that is updated every day. Now, every time I open my notebook on weekly subway riders, it’ll show me the newest analysis. I don’t have to worry that I copied and pasted the wrong data set. In other words, I’ve gone straight to the source, with no middleman. Want to get started? Check out [this notebook we created on how to import data](https://observablehq.com/@observablehq/working-with-apis-remote-files) into Observable with just one line of code, and [this series on building your first analysis](https://observablehq.com/@observablehq/hands-on-tutorials-overview?collection=@observablehq/tutorial). 3c:T601,### Data in the wild vs. Observable’s curated datasets What is the difference between (1) going out into the wild of the internet and finding these interesting datasets and (2) using Observable’s handy “[curated datasets](https://observablehq.com/collection/@observablehq/datasets)”? We’ve cleaned the data (most of which are available in API form) and made it easier to cut and manipulate within the context of the notebook setting. We mentioned before the [MoMA curated dataset](https://docs.google.com/document/d/1tDq09fPr01PW90p1qeEC1X6AXHaJqGzn3jzRWMp2mcY/edit#heading=h.5ue2arfa90jf), which is fun for art-lovers to use, but there is a wide range of topics you can get started with, such as our [Google Merchandise Data](https://observablehq.com/@observablehq/google-merchandise-sales-data?collection=@observablehq/datasets), the [Census Monthly Retail Report](https://observablehq.com/@observablehq/monthly-retail-trade-report-data?collection=@observablehq/datasets), [NOAA Hourly Weather data](https://observablehq.com/@observablehq/noaa-weather-data-by-major-u-s-city?collection=@observablehq/datasets), and much more! Another one of my favorites is a recent curated dataset we published on [Stack Overflow Survey results](https://observablehq.com/@observablehq/stack-overflow-developer-survey-data?collection=@observablehq/datasets), and [this analysis](https://observablehq.com/@observablehq/the-stack-overflow-survey-2022) I made on the year over year change in developer’s favorite programming languages. 3d:T505, --- ## #2: Don’t just read the cookbook — make a recipe I think the best way to learn something new is to make it fun and interesting for yourself. For example, you don’t just read a cookbook and then know how to cook. You make a recipe. That’s how you really learn. (Or at least - that’s how I learn) **Make learning JavaScript for data analysis something that’s a part of your day **- however small or large. Aside from making it a hands-on experience, sign yourself up for a deliverable - even if it’s only for yourself. But even better if that deliverable is for your teammates, because then people are depending on you, and you don’t want to let them down. In other words: jump in the deep end, and trust that you can swim. And with all the JavaScript resources at your disposal, the deep end isn’t that deep. You definitely can swim. So, what could that “deliverable” be? Get curious. **Find a problem you want to solve, and then investigate. ** Next, find datasets that live online connect that data to an Observable notebook, and start your recipe. Maybe you’re curious about the relationship between COVID and MTA ridership. Both those datasets are available in API form on the [New York State’s “Open NY”](https://data.ny.gov/). ---3e:T44b,## #4: Fork an Observable notebook that gets your attention If it’s not clear by now, I think that Observable is a really good way to get started with JavaScript. Why is that? **Quick set up.** Back when I was teaching JavaScript, there was a lot that went into the set up. First, since we wanted to save our work, we’d start a local server. Then, we’d start an HTML file, script tag, and open chrome. Then finally, we’d start writing code in the console. With Observable, you skip all those steps but the last one: start writing code. **Notebook saves your work.** Back when I was teaching, if I wrote code in the console (without a local server), and then I hit refresh, that code was gone. The Observable notebook environment automatically saves your work - without the use of a local server. Need to see what you did two days ago? You also have access to each historical version of your notebook - and can revert back anytime. **Collaborative nature.** You have all your code right there in your notebook, or collection of notebooks, that you can collaborate in with your team. 3f:[{"id":"da3d2d09af5850b407a3b27f021b0d2dee1a975ff3934f1aadd4129e7b57b4fa9cd24464047559bc1294b5ebfd6b3391f0d59b80a5a1125521723e7e38c8e99f","href":"https://static.observableusercontent.com/files/da3d2d09af5850b407a3b27f021b0d2dee1a975ff3934f1aadd4129e7b57b4fa9cd24464047559bc1294b5ebfd6b3391f0d59b80a5a1125521723e7e38c8e99f","name":"chart.png","type":"image/png","lastModified":1664457087827.102,"size":258313},{"id":"a354f60bacd24412921dc7412f091124dafead27bf35d84540bb673fde2e35287b01fd352bc80354f5b352d6c1fa87ac33128d1c0d98b074a59c393dc32ce23f","href":"https://static.observableusercontent.com/files/a354f60bacd24412921dc7412f091124dafead27bf35d84540bb673fde2e35287b01fd352bc80354f5b352d6c1fa87ac33128d1c0d98b074a59c393dc32ce23f","name":"Persona_Collab_1.png","type":"image/png","lastModified":1664457087827.102,"size":93509},{"id":"c7f76587da8a38edf33c3960485a731a98084795036a756200f2c05fca54706b9466ed901db4741d43461f34482a8a10e80156bc12b1799a25796a35d695472a","href":"https://static.observableusercontent.com/files/c7f76587da8a38edf33c3960485a731a98084795036a756200f2c05fca54706b9466ed901db4741d43461f34482a8a10e80156bc12b1799a25796a35d695472a","name":"untitled (4).png","type":"image/png","lastModified":1664457087827.102,"size":572435},{"id":"d27dcf1d396501e6520a5b6c569fe6472043f7265dcb2a34ea521764cc5182347d25e0f80c1bdbef266837c698ced24876122012ad0c2ce7ca88dafc995cf199","href":"https://static.observableusercontent.com/files/d27dcf1d396501e6520a5b6c569fe6472043f7265dcb2a34ea521764cc5182347d25e0f80c1bdbef266837c698ced24876122012ad0c2ce7ca88dafc995cf199","name":"artistScatterplot.png","type":"image/png","lastModified":1664457087827.102,"size":651523},{"id":"37bcc2a020723f59c3579ee2efac052a96e2fcb937b05feb0a20d52b0afed03216e740b1e061d4c2c338cca46d4e70d9b340b59842b0ad7a8c8c4077636514e8","href":"https://static.observableusercontent.com/files/37bcc2a020723f59c3579ee2efac052a96e2fcb937b05feb0a20d52b0afed03216e740b1e061d4c2c338cca46d4e70d9b340b59842b0ad7a8c8c4077636514e8","name":"help menu.png","type":"image/png","lastModified":1664457087827.102,"size":577001},{"id":"4e71e67d3a3422b1cf9e4a2e24f9c418cb8e40a7c673dd871722a79724e9d48d2398aaef3d860652b7dd2543854f3a6be4d559b7c78c3eb2d8e68a52ffd2c6a6","href":"https://static.observableusercontent.com/files/4e71e67d3a3422b1cf9e4a2e24f9c418cb8e40a7c673dd871722a79724e9d48d2398aaef3d860652b7dd2543854f3a6be4d559b7c78c3eb2d8e68a52ffd2c6a6","name":"NY open data.png","type":"image/png","lastModified":1664457087827.102,"size":1107915}] 38:{"id":"26d40a5a2f75ac09","slug":"4-ways-to-get-started-with-javascript-for-data-analysis","title":"4 ways to get started with JavaScript for data analysis","thumbnail":"bd0921242e35be3e94a1191af29f0bcb947e75a9ad6fb2faf46684d6d2e04a96","access_level":"public","create_time":"$D2022-09-29T13:11:27.827Z","update_time":"$D2022-11-30T18:03:50.283Z","view_time":null,"first_public_time":"$D2022-09-29T13:21:36.078Z","has_unpublished_edits":null,"fork":true,"stars":6,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","bio":"The end-to-end solution for building and hosting better data apps, dashboards, and reports."},"version":1116,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null,"bio":""}],"members":[{"type":"individual","id":"4530d0072aa49b47","login":"erinn","name":"Erinn Wong","avatar_url":"https://avatars-next.observableusercontent.com/9119ac38e4f1c92d50b28822c47306212f06e085b7d1416e851a1c397194e2d4","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"01e1972879c83ae3","slug":"observable-blog","title":"Observable Blog","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"4 ways to get started with JavaScript for data analysis","cells":[{"id":223,"value":"# 4 ways to get started with JavaScript for data analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":684,"value":"dsBlogHero = FileAttachment(\"Persona_Collab_1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"In my last article, I shared how [JavaScript makes data analysis faster and easier](https://observablehq.com/@observablehq/4-ways-javascript-makes-data-analysis-faster-and-easier). \n\nHere, I’ll talk about hands-on, practical, and simple ways to **get started using JavaScript for data analysis.** \n\nIf you'd like, use the table of contents below (built with JavaScript) to jump to each tip. \n\n ---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1013,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":704,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":955,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":946,"value":"There are several places where you can find unique and engaging datasets in web form. Why would you want to do that? To get started using JavaScript, of course. \n\n### Some datasets I like\n\n1. **[New York City’s Open Data.](https://opendata.cityofnewyork.us/)** You can find thousands of fascinating data sets here. This site provides public access to digital data for collaboration and analysis. Its sole goal is to empower people with data.\n2. **[The MoMA Collection.](https://github.com/MuseumofModernArt/collection)** The entire Museum of Modern Art collection is available as a CSV or JSON on Github. You can access it there directly, or use our [curated version](https://observablehq.com/@observablehq/the-moma-collection-data?collection=@observablehq/datasets).\n3. **[The Giphy API.](https://developers.giphy.com/)** If you want to get a little silly and play around with .gif data, the Giphy API is very easy to use. All you need to do is sign up to get a free API key, add key words, and get gifs. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1061,"value":"

\n \n

A visualization of artists from my notebook on The MoMA Collection

\n \n

In any Observable notebook, click on the question mark to the left of the notebook to open up the help menu, and then navigate down to “Exploring Data.”

\n \n

A visualization from The Stack Overflow Survey on the year over year change in developer’s favorite programming languages.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":971,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":965,"value":"## #3: Learn just enough JavaScript to play in an Observable notebook\n\nIf you are new to JavaScript, [this notebook is for you](https://observablehq.com/@observablehq/learn-javascript-introduction). \n\nThere are many great JavaScript tutorials online, and if you're interested to learn more, we recommend checking out [Eloquent JavaScript](https://eloquentjavascript.net/) and the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript). \n\nBut if you want to learn just enough to get dangerous in Observable, you've come to the right place.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":930,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":538,"value":"So, a great way to get started with JavaScript for Data Analysis is to find an existing Observable notebook that you like, and use it as a template to play with - aka “fork” it. \n\n### How do you find cool Observable notebooks? \n\nCheck out [trending](https://observablehq.com/trending) or an [all-time most liked](https://observablehq.com/top) notebooks. The D3 Gallery is also a great resource. \n\nHead over to our [Ambassador Stories](https://observablehq.com/@observablehq/ambassador-maxene-graze?collection=@observablehq/ambassador-stories): each Observable Ambassador lists the notebooks they find the most engaging - whether it be due to a cool new visualization technique, a solve for a nagging data question, or something else. \n\nLast, you could fork an [Observable Template](https://observablehq.com/collection/@observablehq/observable-templates). \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1089,"value":"

\n \n

The first D3 visualization that inspired me to learn D3, the difference chart from the D3 gallery.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":767,"value":"\n---\n\nTo get started with a data analysis and visualization tool that uses JavaScript (as well as SQL, snippets, and more), [try Observable for free.](https://observablehq.com/solutions/data-analysts)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":450,"value":"________________________\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"banner(\n \"Interested in learning more about collaborating with data?\",\n \"Sign up for free\",\n \"https://observablehq.com/product\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"import {banner} from \"@observablehq/brand-assets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 39:"$38:body"