31:Td54,md`# Intro To D3: *D*ata *D*riven *D*ocuments (with solutions) *Made with <3 by David and inspired by data vis rockstar Shirley Wu.* ## [Learner's copy (without solutions filled in)](https://beta.observablehq.com/@davidnmora/intro-to-d3-d-ata-d-riven-d-ocuments-learners-copy-no-solution) ## Motivation We're in an wildly complex and interconnected world, and one which we increasingly have more data on than we know what to do with. The ability to make sense of that data, and, hopefully, to use that insight to make the world a better place, proves not only invaluable, but in scarce supply. In the face of vast information stores, data visualization is increasingly becoming a powerful medium to explore, understand, and communicate crucial information about our world. The aim of data visualization is simple: *insight*. As tools advance, data vis increasingly gives powerful access to otherwise out-of-reach ideas: from [racial-](https://www.nytimes.com/interactive/2018/03/19/upshot/race-class-white-and-black-men.html) and [gender-based](https://pudding.cool/2017/03/film-dialogue/) disparities to [human creativity](https://pudding.cool/2017/03/hamilton/) to [education](https://www.nytimes.com/interactive/2016/04/29/upshot/money-race-and-success-how-your-school-district-compares.html) to [science](https://github.com/davidnmora/positive-psych-vis/tree/pre-key-phrase-refocus). While the tools to create data vis are diverse, communication of data increasingly turns to one tool in particular: D3.js. ## Overview __D3 is the premier Javascript library for building custom data visualizations for the web__. It's interactive, flexible, expressive, and fast. But D3 is powerful in large part *because* it requires substantial knowledge of the nuts and bolts of web sites to even *begin using*. Most people don't want/need/have that knowledge. They typically copy and paste existing D3 code, and fiddle with what they can. This intro, contrastingly, __aims to get you on the path to mastery of D3__. To do so, we'll start from the ground up, spotlighting each D in D3: 1. __DOCUMENTS: under a web page's hood__ will get your hands dirty with the fundamental ("DOM") elements which compose all web pages. This is essential: D3's core contribution is how it binds these elements with your data. This section is analogous to learning how a card deck works before playing poker. 2. __Data DRIVEN Documents: connecting *the Data* to the *the Document* via D3__ brings into focus D3's central contribution -- binding and updating web page elements based on your data. To continue the metaphor, this is where the game of data vis is actually played. If you solidly understand this section, learing D3 is all down hill from here. 3. __DATA: getting it, formatting it, scaling it__ shows off how D3 makes formatting data easy. This is a bit like learning to shuffle cards effectively: while you could improvise your own methods, using D3 makes this setup process fast and effective. Since you've got the basics of D3, this section introduces data formatting in the context of buildling a visualization of a year's worth of SF weather data. I've noted some useful tidbits/resources below before you begin. Note I am assuming basic knowledge of CSS, HTML, and Javacsript. D3 rewards hard work and careful understanding, not necessarily technical background. Happy learning -- __let's grow our brains!__ `32:T5e3,md `# 1. DOCUMENTS: under a web page's hood __What we're going to do__: Learn to play with the nuts and bolts of a webpage (in web speak: "manipulate DOM elements") __Why this matters for D3:__ D3 puts you in (nearly) direct contact with nuts and bolts of a web page (DOM elements). This makes D3 powerful and flexible. It also makes *learning D3* baffling if a web page feels like a black box. That's why I'm taking you under the hood! __The Gist:__ From the outside, web pages look compartmental and linear. But *under the hood*, every webpage (including this one) is structured as a huge tree (acyclical connected graph). We call this tree the __Document Object Model__ (*DOM*). In this __Model__, the web page is a __Document__ made up of __Objects__ we call "DOM elements." The *language* we use to *"mark up"* how we want to structure that DOM tree is called HTML (Hyper Text Markup Language\*). Each object in the DOM is represented in HTML as a pairs of angle-bracked tags: an opening tag and a closing tag, with content (or children) in between. For example: \`Text that gets displayed\` To create the tree structure of the DOM, we nest *child tags* between the opening and closing tags of a parent. For example: \`Hello World\`. \\*Apparently the creators of the web were *super* excited about "hyper text" (links). So much so they put it in the name of the language.`33:T526,md `## Your first peek under the hood __What to do__: Inspect DOM elements that form this web page (or any web page!) __How to do it__: 1. __Scroll up and right click one the title of this notebook "Intro To D3: Data Driven Documents", then select *inspect* from the dropdown menu__. Note: you can actually inspect *anything on any webpage* (including this sentence), but for some semi-complicated reasons having to do with the fact that Observable Notebooks are websites that *edit themselves*, inspecting lower sections of this notebook works less clearly with Chrome's developer tools. That's why I specify the first section of the webpage.) 2. In the __"inspector"__ which has now opened, you'll see DOM 'tree' itself. Hover over elements to see what they corrospond to on the web page. Double click on a parent element's ... to view it's immediate children. Double click on text inside tags to edit it. Hit enter to save when you're done. You'll see these changes to the DOM get reflected on the webpage. 3. Click an element. Try hitting delete to delete it. 4. WAIT, NO!!! DON'T DELETE IT! You just deleted it for everyone! ... jk, you didn't. You just removed it locally. Refresh the page to reset everything. But next time there's an annoying popup or pay wall, you're ready to hack your way around it. ;) `34:T48e,md `### A. Create SVGs shapes with Pure HMTL __What to do__: 1. Put your cursor in the html code below. Hit shift-enter to generate its output. 2. Add a second rectangle to the page below by adding another svg rect element. Make it a new color. In web speak: __*Append* a new SVG rect element as a child to the parent \`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md `## Building in the DOM using SVGs\n__What you'll do__: Now that you've *seen* under the hood, it's time to start adding to it. Specifically, you'll learn to put SVG shapes into a web page, first using HTML, then D3.\n\n__Why this matters to D3__: D3 creates custom visualizations by manipulating DOM objects, the nuts and bolts of a web page. There are a lot of kids of nuts and bolds: divs, spans, images etc. Despite the vast options, virtually every D3 vis utilizes a single class of DOM elements called SVGs: *Scalable Vector Graphics*. __Why?__ Vector-based graphics are drawn by the browser itself based on information about a shape's points and curves, meaning they can express arbitrary shapes and will appear un-pixilated at all screen sizes. Nifty!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"html`\n

\n \n

\n\n