2e:null 2f:["$","title",null,{"children":"Learning D3.js - Part 1 - From the Top! | Patrick M. Dudas | Observable"}] 34:[] 32:{"id":"10dfb0baebbcc188","slug":"learning-d3-part-1","title":"Learning D3.js - Part 1 - From the Top!","thumbnail":"7e3167cc382202dced78dd53ad22e4e469f384a6df112d42da2d76ab3d1c4416","access_level":"public","create_time":"$D2020-05-20T15:13:58.050Z","update_time":"$D2020-09-02T19:05:27.810Z","view_time":null,"first_public_time":"$D2020-06-02T19:25:19.515Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"4a43c9904123893c","login":"dudaspm","name":"Patrick M. Dudas","avatar_url":"https://avatars-next.observableusercontent.com/61f0e3a54b7fff3f565785a1eaeeec9b8a5f9cceca03cf7df7c7b94afac71c0e","tier":"starter_2024"},"version":483,"publish_version":483,"role":null,"authored":false,"authors":[{"type":"individual","id":"45342dad908d2c92","login":"dudaspm","name":"Patrick M. Dudas","avatar_url":"https://avatars-next.observableusercontent.com/61f0e3a54b7fff3f565785a1eaeeec9b8a5f9cceca03cf7df7c7b94afac71c0e","tier":null}],"members":[{"type":"individual","id":"45342dad908d2c92","login":"dudaspm","name":"Patrick M. Dudas","avatar_url":"https://avatars-next.observableusercontent.com/61f0e3a54b7fff3f565785a1eaeeec9b8a5f9cceca03cf7df7c7b94afac71c0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":{"id":"d9d7575d62559fe0","slug":"d3-in-observablehq","title":"D3 in ObservableHQ","owner":{"id":"4a43c9904123893c","login":"dudaspm","name":"Patrick M. Dudas"}},"type":"notebook","body":{"title":"Learning D3.js - Part 1 - From the Top!","cells":[{"id":0,"value":"md`# Learning D3.js - Part 1 - From the Top!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md`## From the Top!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`### Why am I here?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md` You are here to learn about D3.js, which is a data visualization library, and how to use D3.js in ObservableHQ. The skills learned in here can easily be translated outside of ObservableHQ, but this is the simplist way to get started with D3.js.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`### Who should be here?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md` This is meant to be an introduction to D3 (and a little bit of introduction to ObservableHQ). I am focused on helping people who have little to no programming experence. I may use a technical term here and there, but my goal is to create analogies whenever I can and include some technical terms to make searching for more details accessible. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md` ### Who am I?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md` I am teacher and D3 user for about 10 years, back when we used to call it [Protovis](http://vis.stanford.edu/papers/protovis). Even before that I was using SVG, XSLT, XPath, and XML to make interactive graphs (note, don't worry about looking these up, this type of development is REALLY old and outdated). \n\nI am very passionate about helping people increase their visual literacy, or simply, using data to tell better visual stories.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`## Let's start`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md` ### Basic Introduction to ObservableHQ`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md` Right now, as I type, I am typing in something called a \"cell.\" These cells make up the entire notebook and these cells can do mutliple things. By default, the cells are assuming you will be typing code (JavaScript to be specific).\n\nLet's see how this looks in the next cell:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"2 + 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md` Here is a super simple piece of code. 2 + 2 and in JavaScript, surprise, surprise, it equals 4.\nIf you move your mouse over top of the cell (where it says 2 + 2) you will see a blue pin. This pin is used to either:\n* show the code ![Show Code Pin](https://raw.githubusercontent.com/dudaspm/ProjectiOn/master/D3Tutorial/Images/showCode.png)\n* hide the code ![Hide Code Pin](https://raw.githubusercontent.com/dudaspm/ProjectiOn/master/D3Tutorial/Images/hideCode.png)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md` For the most part, I will be hiding the code for most of these cells, but feel free to click the pin to toggle this on and off.\n\nNow, it is your turn. Click the plus sign ![plus sign to add cell](https://raw.githubusercontent.com/dudaspm/ProjectiOn/master/D3Tutorial/Images/plus.png) to add a new cell and try... 5 + 10`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`↓ Right Here`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`↑ Right Here`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md` Now the cool thing about these notebooks is the fact that one cell can talk to other cells (AUTOMAGICALLY!). In our next example, we will make something called a variable for the number of cats. We will make another cell that will increment this number. Finally, we will print the number of cats.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"numberOfCats","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"md`↓ Click the button to add more cats! `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"viewof numberOfCats = {\n let value = 0;\n const button = html`

\n\n	\n\n
\nFigure 1 - How most assume an X,Y coordinate would look.\n	\nFigure 2 - How it is done in HTML and thus, D3.js\n