2c:null 2d:["$","title",null,{"children":"Introduction to D3 Course | Observable | Observable"}] 32:T62b,33:[{"id":"b112d11da9ca02154fd65d51e7b75a9308c0ee7bdda377f331832808cf34347eea19e6414adb639e772f53368875d6b5242a798a34b4877c5b43b8d3577f5842","href":"https://static.observableusercontent.com/files/b112d11da9ca02154fd65d51e7b75a9308c0ee7bdda377f331832808cf34347eea19e6414adb639e772f53368875d6b5242a798a34b4877c5b43b8d3577f5842","name":"paul.jpg","type":"image/jpeg","lastModified":1693605394422.044,"size":76635}] 30:{"id":"c3f0f39a378fe759","slug":"introduction-to-d3-course","title":"Introduction to D3 Course","thumbnail":"fcfddef83ebfa8041c0ff7c1a63677db0988f1478eec84c2d3b02674601f7b27","access_level":"public","create_time":"$D2023-09-01T21:56:34.422Z","update_time":"$D2023-09-27T20:02:45.448Z","view_time":null,"first_public_time":"$D2023-09-01T22:44:58.521Z","has_unpublished_edits":null,"fork":{"id":"a74da54e6959031e","slug":"learn-observable-workshop-info","title":"Learn Observable Workshop","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":29,"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":606,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"09230d7adcec9aeb","login":"waynesutton","name":"Wayne Sutton","avatar_url":"https://avatars-next.observableusercontent.com/49c28637703fbcb401c1c13d18e199b8b41788339fd93f55121719c62d89ee0a","tier":null,"bio":"Community & Events Manager | Based in San Francisco, CA | 🏍 rider"},{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null,"bio":""}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":45,"collection":{"id":"ae60512df676e777","slug":"introduction-to-d3-course","title":"Introduction to D3 Course","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Introduction to D3 Course","cells":[{"id":483,"value":" \n\n

\n
\n 5 part course series\n

Introduction to D3

\n \n

\nInstructor
\nPaul Buffa
\nHead of Product Education at Observable

\n\n

\nDate and time
\n September 25th - 29th
\n at 9:00 AM PT | 12:00 PM ET
\n

\n\n

\n \n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"# What you'll learn!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"D3 is a popular ([200M downloads](/@mbostock/npm-daily-downloads?name=d3) and [100K stars](https://github.com/d3/d3)) framework for building bespoke data visualizations for the web. This five-part course will teach you the fundamentals of how to build data visualization with D3. In the course, we will cover the basics of HTML, CSS, SVG and JavaScript, common chart forms like scatterplots, line charts, bar charts, as well as some of D3's most unique capabilities with animation and interaction.\n\nObservable is the ideal environment for learning D3 because it [simplifies code](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0) with dataflow, [like a spreadsheet](/@observablehq/how-observable-runs). As you edit, cells run automatically for rapid feedback. You can add interaction or animation with almost no code! We’ll cover Observable’s [quirks and features](/@observablehq/observables-not-javascript) as we go along.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":541,"value":"___\n## Who is this course for? \n\nThis course is for anyone who wants to learn the basics of building data visualization for the web with D3. Ideally, you should have some background with web development, but you can also go through our pre-requisites if you are completely new to the field. \n____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"\n## Prerequisites\n\nWe'll be doing our lessons in Observable notebooks, so you'll want to have an Observable account ([sign-up](https://observablehq.com/login?screen=signup&utm_medium=social&utm_campaign=d3_092023&utm_source=luma)), know a little bit about Observable by reading [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable?collection=%40observablehq%2Fgetting-started&utm_medium=social&utm_campaign=d3_092023&utm_source=luma), as well as the basics of JavaScript by reading [Learn Just Enough JavaScript](https://observablehq.com/@observablehq/learn-javascript-introduction?collection=%40observablehq%2Ftutorial&utm_medium=social&utm_campaign=d3_092023&utm_source=luma). HTML and CSS are great to know as well, and [this tutorial series](https://www.codecademy.com/catalog/language/html-css) can be helpful if you're new to the area. \n\n_____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"prerequisites","database":"$undefined"},{"id":549,"value":"## Sessions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":551,"value":"details(\n md`\n### D3 & Web-Based Data Visualization\n** September 25th **\n- Observable walkthrough\n- Basics of HTML, CSS, JavaScript\n- What is D3?`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"details(\n md`### Scatterplots\n** September 26th **\n- Scales, margins, axes\n- Marks, SVG elements, circles\n- Joining data to elements\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"details(\n md`### Lines charts and Bar charts\n** September 27th **\n- SVG path, path generators\n- Rectangles, stack layouts`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"details(\n md`### Updating Data & Transitions\n** September 28th **\n- General Update Pattern\n- D3.join(), enter, update, exit\n- Transitions, animations`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"details(\n md`### Thinking in D3\n** September 29th **\n- Data structures & the DOM.\n- Small multiples \n- Interaction, listeners`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"___\n## Course Format\n- 5x 1-hour live events. \nThese sessions will be recorded and found in the 'Introduction to D3' playlist on the Observable YouTube channel. You can access them using the following link after the course starts: [Introduction to D3 Playlist on Observable YouTube Channel](https://www.youtube.com/playlist?list=PLOHIJAFwtkEcK_mLLScnX2B-yHDjzSxuR).\n________","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":547,"value":"\n## Connect with other course participants in Slack\nConnect with course participants in the Observable Community Slack. \n\nSign-up [here](https://bit.ly/3f6D2I6) and join the **#introduction-to-d3** channel.\n_____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":429,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"register","database":"$undefined"},{"id":246,"value":"___\n## About the Instructor\nPaul Buffa is a data visualization developer with a background in data analysis and teaching. He’s spent years building custom data visualization tools and stories on topics such as machine learning, cyber security, education, and fitness. At Observable, he leads our product education team, teaching the community about topics such as data visualization, analysis and JavaScript.\n\n\nConnect: [Observable](https://observablehq.com/@pstuffa) | [LinkedIn](https://www.linkedin.com/in/paul-buffa/) | [Twitter](https://twitter.com/pbbuffa) \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"bannerpaul(\"Interested in learning more about collaborating with data?\", \"Sign up for free\", \"https://observablehq.com/product?utm_medium=social&utm_campaign=sql_course&utm_source=observablehq.com\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"import {buttonCTA} from \"@observablehq/buttons\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"import {details} from \"@observablehq/callout-boxes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"import {bannerpaul} from \"@observablehq/coursestyle\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"function localTime(dateString = new Date()) {\n return new Date(dateString).toLocaleString(undefined, {\n weekday: \"long\",\n month: \"short\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\",\n timeZoneName: \"long\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"