2c:null 2d:["$","title",null,{"children":"Getting Started (Learn JS Data) | dakoop | Observable"}] 32:T8ba,md`# Getting Started (Learn JS Data) *This notebook was generated from the [learnjsdata source](https://github.com/vlandham/js_data) and updated.* ## About Tasks This guide is broken up into a number of tasks, which we can think of as little modules or _recipes_. Each task tries to encapsulate a concrete lesson around common data manipulation and analysis processes. Tasks attempt to be self-contained and stay focused on the, well, _task at hand_. This guide was built with for client side data processing (in the browser), but can easily be used in a server side (Node) application with a bit of tweaking. ## Why D3? [D3.js](http://d3js.org/) is largely known for its data visualization capabilities - and for good reason. It is quickly becoming the de facto standard for interactive visualization on the web. Its core feature of binding data to visual representations happens to require a lot of manipulation of said data. Thus, while this toolkit is focused around visualization, it is well suited for data processing as well! And, a typical output for data manipulation is at least some sort of visualization of that data, in which case you are all ready to go. ## A Note about D3v5 and D3v4 In the not too distant past, a major rewrite of the D3.js library was completed and released into the wild. In includes quite a few API changes and a [very modular structure](https://github.com/d3) (meaning in theory you can just use the bits of D3 that you want and not the rest). The v4 release makes D3 a lot better - but it also makes it more challenging to read and use old code and sometimes to understand the documentation. With the v5 release, there have been a few more changes (most significantly in reading data) although most v4 code will continue to run with minimal changes. The [D3v3](http://learnjsdata.com/v3) and [D3v4](http://learnjsdata.com) versions are still available if you have old code you need help with. ## Why lodash? [Lodash](https://lodash.com) is fast, popular, and fills in some holes in D3's processing features. Plus, it's functional style and chaining capabilities make it work well alongside D3. ## Code Snippets There are a bunch of useful snippets in this guide. Here is an example: `33:T5fa,md` Click the caret to collapse or expand a cell. ## Why Observable? In contrast to previous versions of this guide, the code does not make use of \`console.log\` and instead uses Observable's inline outputs. This provides a more interactive experience in a single browser frame; you can edit any cell and re-run it. For example, go change the 1 in the previous cell to 100 and press \`Shift+Enter\` to re-execute the cell. You can also insert new cells using the \`+\` after any cell to try out your own ideas. In Observable, you may have noticed that there are some differences in how the results are displayed. First, the results are displayed _above_ the code instead of below them. Unforunately, this doesn't seem to work as well for a tutorial and has been a source of [some disagreement](https://talk.observablehq.com/t/new-notebook-cell-toggle-ui-feedback-wanted/379). A second difference is that Observable allows only one global variable to be defined in each cell, usually in a one-line statement (without a semi-colon). Cells are _reactive_ so a change to that global variable triggers updates in all cells that reference that variable. This means that a global variable _cannot_ be defined in more than one cell. You will notice that certain variables have numeric suffixes (e.g. \`regex2, regex3, ...\`) to adhere to this rule. Finally, because each cell produces a single output, we have split up some snippets and wrap blocks of code in brackets, assigning the output value via a return statement. For example,`34:Tb9a,md`Snippets in this guide that are not pure JavaScript will have the functions prefixed with the libraries used to make them work (\`d3\` for D3 and \`_\` for lodash). The libraries are made available via \`require()\` calls that are at the bottom of each notebook. ## Using this Guide Outside of Observable If you wish to use this guide outside of Observable, you will need to manage libraries and run a local server to read data. Below are some tips for doing this. ### Preparing Your Site for Data Processing To get started using these tools for your data processing, you are going to want to include them in your html file along with a JavaScript file to perform the analysis. I typically download these scripts and include local copies in my page. You can keep "libraries" that you are using but didn't write in a \`lib\` folder, and the code you write yourself in a \`src\` folder. Then you want to load all these files on an HTML page. To do this, you would want to have your HTML look something like this: \`\`\`html \`\`\` \`src/analysis.js\` would be where your analysis code goes. I put these \`script\` tags at the end of the \`body\` - just so that if there is other content on the page, it won't be delayed in loading. Typically, I name this main HTML file \`index.html\` - so that its loaded automatically as the root page. ### Running a Local Server D3's functions for [reading data](read_data.html) require you be running the page from a server. You can do this on your own machine by running a local server out of the root directory of your site. There are many options for easy-to-spin-up web servers: - [SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/) for Python - [httpd](http://www.benjaminoakes.com/2013/09/13/ruby-simple-http-server-minimalist-rake/) for Ruby - [http-server](https://github.com/nodeapps/http-server) for Node Lately, I have been using that last option - \`http-server\`. If you have [Node](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) installed, you can grab the required package by installing it from the command line: \`\`\`bash npm install -g http-server \`\`\` (The \`-g\` flag stands for _global_ - which allows you to access \`http-server\` from any directory on your machine. Then \`cd\` to your analysis directory and start it up! \`\`\`bash cd /path/to/dir http-server \`\`\` In your web browser, open up [http://0.0.0.0:8080](http://0.0.0.0:8080) and you should be ready to go! ## See Also - [Installing Node](http://howtonode.org/how-to-install-nodejs) - if you need some help getting \`http-server\` on your machine. ## Navigation - Next Task: [Reading in Data](/@dakoop/reading-in-data-learn-js-data) - [Learn JS Data Notebooks Index](/@dakoop/learn-js-data) `35:[] 30:{"id":"aa4a12e938836aac","slug":"getting-started-learn-js-data","title":"Getting Started (Learn JS Data)","thumbnail":"5c8dd42b1ae2f91d310fd7074634cb2faddbbb2f1e272bf3113c99b8fd73f75f","access_level":"public","create_time":"$D2018-05-16T18:49:07.762Z","update_time":"$D2020-08-31T19:32:46.827Z","view_time":null,"first_public_time":"$D2018-05-17T20:25:04.325Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"55d35d41442ce251","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":"starter_2024"},"version":64,"publish_version":64,"role":null,"authored":false,"authors":[{"type":"individual","id":"0290d485d6927639","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":null}],"members":[{"type":"individual","id":"0290d485d6927639","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Getting Started (Learn JS Data)","cells":[{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"theMax = d3.max([1,2,20,3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"theRange = {\n const d = [1,2,20,3],\n theMin = d3.min(d),\n theMax = d3.max(d);\n return theMax - theMin;\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"