25:["$","title",null,{"children":"Getting Started (Learn JS Data) | Peeti | Observable"}] 49:T655,md` ## 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. Also check [Mike Bostock's](@mbostock) pitch for [why you should learn D3](https://observablehq.com/@d3/learn-d3) ## A Note about D3 versions At the time of this writing, v6 was just out of the oven (literally 5 days ago). This new version moved more towards the ES6 standard leveraging native objects such as Map and Set and supporting iterables. Check for more information in [the official CHANGES document](https://github.com/d3/d3/blob/master/CHANGES.md) If you are looking for a D3 v5 version try [David's](https://observablehq.com/@dakoop/getting-started-learn-js-data) or if you need even older versions: [D3@4](http://learnjsdata.com) and [D3@3](http://learnjsdata.com/v3). ## Why ES6 Previous versions of this guide used loadash. Given that the latest ECMAScript standards are widely supported by modern browsers (At least for ES6 in 2020), and that they provide ways of implementing most of loadash features, this version removes that dependency. ## Code Snippets There are a bunch of useful snippets in this guide. Here is an example: `4a: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,`4b:Tb48,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/yourcode.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 - [live-server](https://www.npmjs.com/package/live-server) for Node if you want automatic refreshing in your browser I (John) personally prefer - \`live-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 live-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. `4c:[] 29:{"id":"beb3ce2346dc88f2","slug":null,"title":"Getting Started (Learn JS Data)","thumbnail":"0ccc5edf8fe50e4c30877c03b60a96ff2ae16a9140729dc3d3ebfad4b26890a5","access_level":"public","create_time":"$D2023-04-12T23:38:31.074Z","update_time":"$D2023-04-12T23:38:31.074Z","view_time":null,"first_public_time":"$D2023-04-12T23:38:31.074Z","has_unpublished_edits":null,"fork":{"id":"8c32a743843d18c6","slug":"getting-started-learn-js-data","title":"Getting Started (Learn JS Data)","owner":{"id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a9bf89821413483c","login":"peeti-ucberkeley","name":"Peeti","avatar_url":"https://avatars-next.observableusercontent.com/fdd6b259d8c38774bbc979bf51c5d60060653a9e70bc138e8f0562606bc91782","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":72,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"579bf6a59bb2b176","login":"peeti-ucberkeley","name":"Peeti","avatar_url":"https://avatars-next.observableusercontent.com/fdd6b259d8c38774bbc979bf51c5d60060653a9e70bc138e8f0562606bc91782","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"579bf6a59bb2b176","login":"peeti-ucberkeley","name":"Peeti","avatar_url":"https://avatars-next.observableusercontent.com/fdd6b259d8c38774bbc979bf51c5d60060653a9e70bc138e8f0562606bc91782","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Getting Started (Learn JS Data)","cells":[{"id":59,"value":"md`# Getting Started (Learn JS Data)\n**ES6 and D3@6 Version**\n\n*This notebook was generated from the [learnjsdata source](https://github.com/vlandham/js_data) and updated.*\n\n## About Tasks\n\nThis 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.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null