31:T585,# Week 4 Lab: First D3 programming session, DOM manipulation, Data binding In this week's lab, we will provide an introduction to [**D3.js**](https://d3js.org/), a JavaScript library that enables you to make sophisticated graphs through the web browser or any JavaScript environment. This week's lab is intended as a walkthrough of core concepts, including the following: - Set up D3 development environment - Create basic selections and data binding - Build a simple bar chart - Add scales and axes ## Documentation There are various resources available to you on how to get started working with D3 on Observable. Here are some standout examples: - [Learn-D3](https://observablehq.com/@d3/learn-d3): a series of Observable notebooks that deal with core concepts, such as importing data and generating simple graphs - [UW Interactive Data Lab's Observable Notebook](https://observablehq.com/@uwdata/introduction-to-d3): a notebook by the UW Interactive Data Lab that provides a condensed introduction about D3. This notebook is deeply inspired by both resources. Furthermore, make sure to read up on [D3's own documentation](https://d3js.org/getting-started). ## A note about this Notebook This notebook requires that proceed through each node **ONE AT A TIME, IN ORDER**. Only proceed to the next block once you are confident that you've achieved the visual or code effect described in the instructions.32:T488,## 0. What is D3.js? As defined by the UW Interactive Data Lab: > [D3](https://d3js.org) is a JavaScript library for data visualization. The core paradigm of D3 is to bind data to Document Object Model (DOM) elements of a web page in order to drive the content and appearance of those elements: hence **D**ata-**D**riven **D**ocuments! > > ... > > The core paradigm of D3 is the _data binding_. An author manipulates the DOM by binding data to its elements and specifying how these elements should behave as a function of their data. ### 0a. D3.js vs Vega-Lite In VL, you dictate to the system how you want the data to be visualized, and VL will do the heavy work for you. For example, if you combine two different charts together and define all the logic for the legend and colors, VL will coordinate the two plots into a single multi-view composition with shared color elements and interactions. However, with D3, _you_ are in chart of this process. In other words, you must tell D3 not just _what_ to visualize but _how_ it must be visualized. It's a bit more of a handful than VL, but it affords you greater control over how the visualization appears.33:T5ca8,census = [ {"year":1900,"age_group":0,"sex":1,"people":4619544}, {"year":1900,"age_group":0,"sex":2,"people":4589196}, {"year":1900,"age_group":5,"sex":1,"people":4465783}, {"year":1900,"age_group":5,"sex":2,"people":4390483}, {"year":1900,"age_group":10,"sex":1,"people":4057669}, {"year":1900,"age_group":10,"sex":2,"people":4001749}, {"year":1900,"age_group":15,"sex":1,"people":3774846}, {"year":1900,"age_group":15,"sex":2,"people":3801743}, {"year":1900,"age_group":20,"sex":1,"people":3694038}, {"year":1900,"age_group":20,"sex":2,"people":3751061}, {"year":1900,"age_group":25,"sex":1,"people":3389280}, {"year":1900,"age_group":25,"sex":2,"people":3236056}, {"year":1900,"age_group":30,"sex":1,"people":2918964}, {"year":1900,"age_group":30,"sex":2,"people":2665174}, {"year":1900,"age_group":35,"sex":1,"people":2633883}, {"year":1900,"age_group":35,"sex":2,"people":2347737}, {"year":1900,"age_group":40,"sex":1,"people":2261070}, {"year":1900,"age_group":40,"sex":2,"people":2004987}, {"year":1900,"age_group":45,"sex":1,"people":1868413}, {"year":1900,"age_group":45,"sex":2,"people":1648025}, {"year":1900,"age_group":50,"sex":1,"people":1571038}, {"year":1900,"age_group":50,"sex":2,"people":1411981}, {"year":1900,"age_group":55,"sex":1,"people":1161908}, {"year":1900,"age_group":55,"sex":2,"people":1064632}, {"year":1900,"age_group":60,"sex":1,"people":916571}, {"year":1900,"age_group":60,"sex":2,"people":887508}, {"year":1900,"age_group":65,"sex":1,"people":672663}, {"year":1900,"age_group":65,"sex":2,"people":640212}, {"year":1900,"age_group":70,"sex":1,"people":454747}, {"year":1900,"age_group":70,"sex":2,"people":440007}, {"year":1900,"age_group":75,"sex":1,"people":268211}, {"year":1900,"age_group":75,"sex":2,"people":265879}, {"year":1900,"age_group":80,"sex":1,"people":127435}, {"year":1900,"age_group":80,"sex":2,"people":132449}, {"year":1900,"age_group":85,"sex":1,"people":44008}, {"year":1900,"age_group":85,"sex":2,"people":48614}, {"year":1900,"age_group":90,"sex":1,"people":15164}, {"year":1900,"age_group":90,"sex":2,"people":20093}, {"year":1910,"age_group":0,"sex":1,"people":5296823}, {"year":1910,"age_group":0,"sex":2,"people":5287477}, {"year":1910,"age_group":5,"sex":1,"people":4991803}, {"year":1910,"age_group":5,"sex":2,"people":4866139}, {"year":1910,"age_group":10,"sex":1,"people":4650747}, {"year":1910,"age_group":10,"sex":2,"people":4471887}, {"year":1910,"age_group":15,"sex":1,"people":4566154}, {"year":1910,"age_group":15,"sex":2,"people":4592269}, {"year":1910,"age_group":20,"sex":1,"people":4637632}, {"year":1910,"age_group":20,"sex":2,"people":4447683}, {"year":1910,"age_group":25,"sex":1,"people":4257755}, {"year":1910,"age_group":25,"sex":2,"people":3946153}, {"year":1910,"age_group":30,"sex":1,"people":3658125}, {"year":1910,"age_group":30,"sex":2,"people":3295220}, {"year":1910,"age_group":35,"sex":1,"people":3427518}, {"year":1910,"age_group":35,"sex":2,"people":3088990}, {"year":1910,"age_group":40,"sex":1,"people":2860229}, {"year":1910,"age_group":40,"sex":2,"people":2471267}, {"year":1910,"age_group":45,"sex":1,"people":2363801}, {"year":1910,"age_group":45,"sex":2,"people":2114930}, {"year":1910,"age_group":50,"sex":1,"people":2126516}, {"year":1910,"age_group":50,"sex":2,"people":1773592}, {"year":1910,"age_group":55,"sex":1,"people":1508358}, {"year":1910,"age_group":55,"sex":2,"people":1317651}, {"year":1910,"age_group":60,"sex":1,"people":1189421}, {"year":1910,"age_group":60,"sex":2,"people":1090697}, {"year":1910,"age_group":65,"sex":1,"people":850159}, {"year":1910,"age_group":65,"sex":2,"people":813868}, {"year":1910,"age_group":70,"sex":1,"people":557936}, {"year":1910,"age_group":70,"sex":2,"people":547623}, {"year":1910,"age_group":75,"sex":1,"people":322679}, {"year":1910,"age_group":75,"sex":2,"people":350900}, {"year":1910,"age_group":80,"sex":1,"people":161715}, {"year":1910,"age_group":80,"sex":2,"people":174315}, {"year":1910,"age_group":85,"sex":1,"people":59699}, {"year":1910,"age_group":85,"sex":2,"people":62725}, {"year":1910,"age_group":90,"sex":1,"people":23929}, {"year":1910,"age_group":90,"sex":2,"people":28965}, {"year":1920,"age_group":0,"sex":1,"people":5934792}, {"year":1920,"age_group":0,"sex":2,"people":5694244}, {"year":1920,"age_group":5,"sex":1,"people":5789008}, {"year":1920,"age_group":5,"sex":2,"people":5693960}, {"year":1920,"age_group":10,"sex":1,"people":5401156}, {"year":1920,"age_group":10,"sex":2,"people":5293057}, {"year":1920,"age_group":15,"sex":1,"people":4724365}, {"year":1920,"age_group":15,"sex":2,"people":4779936}, {"year":1920,"age_group":20,"sex":1,"people":4549411}, {"year":1920,"age_group":20,"sex":2,"people":4742632}, {"year":1920,"age_group":25,"sex":1,"people":4565066}, {"year":1920,"age_group":25,"sex":2,"people":4529382}, {"year":1920,"age_group":30,"sex":1,"people":4110771}, {"year":1920,"age_group":30,"sex":2,"people":3982426}, {"year":1920,"age_group":35,"sex":1,"people":4081543}, {"year":1920,"age_group":35,"sex":2,"people":3713810}, {"year":1920,"age_group":40,"sex":1,"people":3321923}, {"year":1920,"age_group":40,"sex":2,"people":3059757}, {"year":1920,"age_group":45,"sex":1,"people":3143891}, {"year":1920,"age_group":45,"sex":2,"people":2669089}, {"year":1920,"age_group":50,"sex":1,"people":2546035}, {"year":1920,"age_group":50,"sex":2,"people":2200491}, {"year":1920,"age_group":55,"sex":1,"people":1880975}, {"year":1920,"age_group":55,"sex":2,"people":1674672}, {"year":1920,"age_group":60,"sex":1,"people":1587549}, {"year":1920,"age_group":60,"sex":2,"people":1382877}, {"year":1920,"age_group":65,"sex":1,"people":1095956}, {"year":1920,"age_group":65,"sex":2,"people":989901}, {"year":1920,"age_group":70,"sex":1,"people":714618}, {"year":1920,"age_group":70,"sex":2,"people":690097}, {"year":1920,"age_group":75,"sex":1,"people":417292}, {"year":1920,"age_group":75,"sex":2,"people":439465}, {"year":1920,"age_group":80,"sex":1,"people":187000}, {"year":1920,"age_group":80,"sex":2,"people":211110}, {"year":1920,"age_group":85,"sex":1,"people":75991}, {"year":1920,"age_group":85,"sex":2,"people":92829}, {"year":1920,"age_group":90,"sex":1,"people":22398}, {"year":1920,"age_group":90,"sex":2,"people":32085}, {"year":1930,"age_group":0,"sex":1,"people":5875250}, {"year":1930,"age_group":0,"sex":2,"people":5662530}, {"year":1930,"age_group":5,"sex":1,"people":6542592}, {"year":1930,"age_group":5,"sex":2,"people":6129561}, {"year":1930,"age_group":10,"sex":1,"people":6064820}, {"year":1930,"age_group":10,"sex":2,"people":5986529}, {"year":1930,"age_group":15,"sex":1,"people":5709452}, {"year":1930,"age_group":15,"sex":2,"people":5769587}, {"year":1930,"age_group":20,"sex":1,"people":5305992}, {"year":1930,"age_group":20,"sex":2,"people":5565382}, {"year":1930,"age_group":25,"sex":1,"people":4929853}, {"year":1930,"age_group":25,"sex":2,"people":5050229}, {"year":1930,"age_group":30,"sex":1,"people":4424408}, {"year":1930,"age_group":30,"sex":2,"people":4455213}, {"year":1930,"age_group":35,"sex":1,"people":4576531}, {"year":1930,"age_group":35,"sex":2,"people":4593776}, {"year":1930,"age_group":40,"sex":1,"people":4075139}, {"year":1930,"age_group":40,"sex":2,"people":3754022}, {"year":1930,"age_group":45,"sex":1,"people":3633152}, {"year":1930,"age_group":45,"sex":2,"people":3396558}, {"year":1930,"age_group":50,"sex":1,"people":3128108}, {"year":1930,"age_group":50,"sex":2,"people":2809191}, {"year":1930,"age_group":55,"sex":1,"people":2434077}, {"year":1930,"age_group":55,"sex":2,"people":2298614}, {"year":1930,"age_group":60,"sex":1,"people":1927564}, {"year":1930,"age_group":60,"sex":2,"people":1783515}, {"year":1930,"age_group":65,"sex":1,"people":1397275}, {"year":1930,"age_group":65,"sex":2,"people":1307312}, {"year":1930,"age_group":70,"sex":1,"people":919045}, {"year":1930,"age_group":70,"sex":2,"people":918509}, {"year":1930,"age_group":75,"sex":1,"people":536375}, {"year":1930,"age_group":75,"sex":2,"people":522716}, {"year":1930,"age_group":80,"sex":1,"people":246708}, {"year":1930,"age_group":80,"sex":2,"people":283579}, {"year":1930,"age_group":85,"sex":1,"people":88978}, {"year":1930,"age_group":85,"sex":2,"people":109210}, {"year":1930,"age_group":90,"sex":1,"people":30338}, {"year":1930,"age_group":90,"sex":2,"people":43483}, {"year":1940,"age_group":0,"sex":1,"people":5294628}, {"year":1940,"age_group":0,"sex":2,"people":5124653}, {"year":1940,"age_group":5,"sex":1,"people":5468378}, {"year":1940,"age_group":5,"sex":2,"people":5359099}, {"year":1940,"age_group":10,"sex":1,"people":5960416}, {"year":1940,"age_group":10,"sex":2,"people":5868532}, {"year":1940,"age_group":15,"sex":1,"people":6165109}, {"year":1940,"age_group":15,"sex":2,"people":6193701}, {"year":1940,"age_group":20,"sex":1,"people":5682414}, {"year":1940,"age_group":20,"sex":2,"people":5896002}, {"year":1940,"age_group":25,"sex":1,"people":5438166}, {"year":1940,"age_group":25,"sex":2,"people":5664244}, {"year":1940,"age_group":30,"sex":1,"people":5040048}, {"year":1940,"age_group":30,"sex":2,"people":5171522}, {"year":1940,"age_group":35,"sex":1,"people":4724804}, {"year":1940,"age_group":35,"sex":2,"people":4791809}, {"year":1940,"age_group":40,"sex":1,"people":4437392}, {"year":1940,"age_group":40,"sex":2,"people":4394061}, {"year":1940,"age_group":45,"sex":1,"people":4190187}, {"year":1940,"age_group":45,"sex":2,"people":4050290}, {"year":1940,"age_group":50,"sex":1,"people":3785735}, {"year":1940,"age_group":50,"sex":2,"people":3488396}, {"year":1940,"age_group":55,"sex":1,"people":2972069}, {"year":1940,"age_group":55,"sex":2,"people":2810000}, {"year":1940,"age_group":60,"sex":1,"people":2370232}, {"year":1940,"age_group":60,"sex":2,"people":2317790}, {"year":1940,"age_group":65,"sex":1,"people":1897678}, {"year":1940,"age_group":65,"sex":2,"people":1911117}, {"year":1940,"age_group":70,"sex":1,"people":1280023}, {"year":1940,"age_group":70,"sex":2,"people":1287711}, {"year":1940,"age_group":75,"sex":1,"people":713875}, {"year":1940,"age_group":75,"sex":2,"people":764915}, {"year":1940,"age_group":80,"sex":1,"people":359418}, {"year":1940,"age_group":80,"sex":2,"people":414761}, {"year":1940,"age_group":85,"sex":1,"people":127303}, {"year":1940,"age_group":85,"sex":2,"people":152131}, {"year":1940,"age_group":90,"sex":1,"people":42263}, {"year":1940,"age_group":90,"sex":2,"people":58119}, {"year":1950,"age_group":0,"sex":1,"people":8211806}, {"year":1950,"age_group":0,"sex":2,"people":7862267}, {"year":1950,"age_group":5,"sex":1,"people":6706601}, {"year":1950,"age_group":5,"sex":2,"people":6450863}, {"year":1950,"age_group":10,"sex":1,"people":5629744}, {"year":1950,"age_group":10,"sex":2,"people":5430835}, {"year":1950,"age_group":15,"sex":1,"people":5264129}, {"year":1950,"age_group":15,"sex":2,"people":5288742}, {"year":1950,"age_group":20,"sex":1,"people":5573308}, {"year":1950,"age_group":20,"sex":2,"people":5854227}, {"year":1950,"age_group":25,"sex":1,"people":6007254}, {"year":1950,"age_group":25,"sex":2,"people":6317332}, {"year":1950,"age_group":30,"sex":1,"people":5676022}, {"year":1950,"age_group":30,"sex":2,"people":5895178}, {"year":1950,"age_group":35,"sex":1,"people":5511364}, {"year":1950,"age_group":35,"sex":2,"people":5696261}, {"year":1950,"age_group":40,"sex":1,"people":5076985}, {"year":1950,"age_group":40,"sex":2,"people":5199224}, {"year":1950,"age_group":45,"sex":1,"people":4533177}, {"year":1950,"age_group":45,"sex":2,"people":4595842}, {"year":1950,"age_group":50,"sex":1,"people":4199164}, {"year":1950,"age_group":50,"sex":2,"people":4147295}, {"year":1950,"age_group":55,"sex":1,"people":3667351}, {"year":1950,"age_group":55,"sex":2,"people":3595158}, {"year":1950,"age_group":60,"sex":1,"people":3035038}, {"year":1950,"age_group":60,"sex":2,"people":3009768}, {"year":1950,"age_group":65,"sex":1,"people":2421234}, {"year":1950,"age_group":65,"sex":2,"people":2548250}, {"year":1950,"age_group":70,"sex":1,"people":1627920}, {"year":1950,"age_group":70,"sex":2,"people":1786831}, {"year":1950,"age_group":75,"sex":1,"people":1006530}, {"year":1950,"age_group":75,"sex":2,"people":1148469}, {"year":1950,"age_group":80,"sex":1,"people":511727}, {"year":1950,"age_group":80,"sex":2,"people":637717}, {"year":1950,"age_group":85,"sex":1,"people":182821}, {"year":1950,"age_group":85,"sex":2,"people":242798}, {"year":1950,"age_group":90,"sex":1,"people":54836}, {"year":1950,"age_group":90,"sex":2,"people":90766}, {"year":1960,"age_group":0,"sex":1,"people":10374975}, {"year":1960,"age_group":0,"sex":2,"people":10146999}, {"year":1960,"age_group":5,"sex":1,"people":9495503}, {"year":1960,"age_group":5,"sex":2,"people":9250741}, {"year":1960,"age_group":10,"sex":1,"people":8563700}, {"year":1960,"age_group":10,"sex":2,"people":8310764}, {"year":1960,"age_group":15,"sex":1,"people":6620902}, {"year":1960,"age_group":15,"sex":2,"people":6617493}, {"year":1960,"age_group":20,"sex":1,"people":5268384}, {"year":1960,"age_group":20,"sex":2,"people":5513495}, {"year":1960,"age_group":25,"sex":1,"people":5311805}, {"year":1960,"age_group":25,"sex":2,"people":5548259}, {"year":1960,"age_group":30,"sex":1,"people":5801342}, {"year":1960,"age_group":30,"sex":2,"people":6090862}, {"year":1960,"age_group":35,"sex":1,"people":6063063}, {"year":1960,"age_group":35,"sex":2,"people":6431337}, {"year":1960,"age_group":40,"sex":1,"people":5657943}, {"year":1960,"age_group":40,"sex":2,"people":5940520}, {"year":1960,"age_group":45,"sex":1,"people":5345658}, {"year":1960,"age_group":45,"sex":2,"people":5516028}, {"year":1960,"age_group":50,"sex":1,"people":4763364}, {"year":1960,"age_group":50,"sex":2,"people":4928844}, {"year":1960,"age_group":55,"sex":1,"people":4170581}, {"year":1960,"age_group":55,"sex":2,"people":4402878}, {"year":1960,"age_group":60,"sex":1,"people":3405293}, {"year":1960,"age_group":60,"sex":2,"people":3723839}, {"year":1960,"age_group":65,"sex":1,"people":2859371}, {"year":1960,"age_group":65,"sex":2,"people":3268699}, {"year":1960,"age_group":70,"sex":1,"people":2115763}, {"year":1960,"age_group":70,"sex":2,"people":2516479}, {"year":1960,"age_group":75,"sex":1,"people":1308913}, {"year":1960,"age_group":75,"sex":2,"people":1641371}, {"year":1960,"age_group":80,"sex":1,"people":619923}, {"year":1960,"age_group":80,"sex":2,"people":856952}, {"year":1960,"age_group":85,"sex":1,"people":253245}, {"year":1960,"age_group":85,"sex":2,"people":384572}, {"year":1960,"age_group":90,"sex":1,"people":75908}, {"year":1960,"age_group":90,"sex":2,"people":135774}, {"year":1970,"age_group":0,"sex":1,"people":8685121}, {"year":1970,"age_group":0,"sex":2,"people":8326887}, {"year":1970,"age_group":5,"sex":1,"people":10411131}, {"year":1970,"age_group":5,"sex":2,"people":10003293}, {"year":1970,"age_group":10,"sex":1,"people":10756403}, {"year":1970,"age_group":10,"sex":2,"people":10343538}, {"year":1970,"age_group":15,"sex":1,"people":9605399}, {"year":1970,"age_group":15,"sex":2,"people":9414284}, {"year":1970,"age_group":20,"sex":1,"people":7729202}, {"year":1970,"age_group":20,"sex":2,"people":8341830}, {"year":1970,"age_group":25,"sex":1,"people":6539301}, {"year":1970,"age_group":25,"sex":2,"people":6903041}, {"year":1970,"age_group":30,"sex":1,"people":5519879}, {"year":1970,"age_group":30,"sex":2,"people":5851441}, {"year":1970,"age_group":35,"sex":1,"people":5396732}, {"year":1970,"age_group":35,"sex":2,"people":5708021}, {"year":1970,"age_group":40,"sex":1,"people":5718538}, {"year":1970,"age_group":40,"sex":2,"people":6129319}, {"year":1970,"age_group":45,"sex":1,"people":5794120}, {"year":1970,"age_group":45,"sex":2,"people":6198742}, {"year":1970,"age_group":50,"sex":1,"people":5298312}, {"year":1970,"age_group":50,"sex":2,"people":5783817}, {"year":1970,"age_group":55,"sex":1,"people":4762911}, {"year":1970,"age_group":55,"sex":2,"people":5222164}, {"year":1970,"age_group":60,"sex":1,"people":4037643}, {"year":1970,"age_group":60,"sex":2,"people":4577251}, {"year":1970,"age_group":65,"sex":1,"people":3142606}, {"year":1970,"age_group":65,"sex":2,"people":3894827}, {"year":1970,"age_group":70,"sex":1,"people":2340826}, {"year":1970,"age_group":70,"sex":2,"people":3138009}, {"year":1970,"age_group":75,"sex":1,"people":1599269}, {"year":1970,"age_group":75,"sex":2,"people":2293376}, {"year":1970,"age_group":80,"sex":1,"people":886155}, {"year":1970,"age_group":80,"sex":2,"people":1417553}, {"year":1970,"age_group":85,"sex":1,"people":371123}, {"year":1970,"age_group":85,"sex":2,"people":658511}, {"year":1970,"age_group":90,"sex":1,"people":186502}, {"year":1970,"age_group":90,"sex":2,"people":314929}, {"year":1980,"age_group":0,"sex":1,"people":8439366}, {"year":1980,"age_group":0,"sex":2,"people":8081854}, {"year":1980,"age_group":5,"sex":1,"people":8680730}, {"year":1980,"age_group":5,"sex":2,"people":8275881}, {"year":1980,"age_group":10,"sex":1,"people":9452338}, {"year":1980,"age_group":10,"sex":2,"people":9048483}, {"year":1980,"age_group":15,"sex":1,"people":10698856}, {"year":1980,"age_group":15,"sex":2,"people":10410271}, {"year":1980,"age_group":20,"sex":1,"people":10486776}, {"year":1980,"age_group":20,"sex":2,"people":10614947}, {"year":1980,"age_group":25,"sex":1,"people":9624053}, {"year":1980,"age_group":25,"sex":2,"people":9827903}, {"year":1980,"age_group":30,"sex":1,"people":8705835}, {"year":1980,"age_group":30,"sex":2,"people":8955225}, {"year":1980,"age_group":35,"sex":1,"people":6852069}, {"year":1980,"age_group":35,"sex":2,"people":7134239}, {"year":1980,"age_group":40,"sex":1,"people":5692148}, {"year":1980,"age_group":40,"sex":2,"people":5953910}, {"year":1980,"age_group":45,"sex":1,"people":5342469}, {"year":1980,"age_group":45,"sex":2,"people":5697543}, {"year":1980,"age_group":50,"sex":1,"people":5603709}, {"year":1980,"age_group":50,"sex":2,"people":6110117}, {"year":1980,"age_group":55,"sex":1,"people":5485098}, {"year":1980,"age_group":55,"sex":2,"people":6160229}, {"year":1980,"age_group":60,"sex":1,"people":4696140}, {"year":1980,"age_group":60,"sex":2,"people":5456885}, {"year":1980,"age_group":65,"sex":1,"people":3893510}, {"year":1980,"age_group":65,"sex":2,"people":4896947}, {"year":1980,"age_group":70,"sex":1,"people":2857774}, {"year":1980,"age_group":70,"sex":2,"people":3963441}, {"year":1980,"age_group":75,"sex":1,"people":1840438}, {"year":1980,"age_group":75,"sex":2,"people":2951759}, {"year":1980,"age_group":80,"sex":1,"people":1012886}, {"year":1980,"age_group":80,"sex":2,"people":1919292}, {"year":1980,"age_group":85,"sex":1,"people":472338}, {"year":1980,"age_group":85,"sex":2,"people":1023115}, {"year":1980,"age_group":90,"sex":1,"people":204148}, {"year":1980,"age_group":90,"sex":2,"people":499046}, {"year":1990,"age_group":0,"sex":1,"people":9307465}, {"year":1990,"age_group":0,"sex":2,"people":8894007}, {"year":1990,"age_group":5,"sex":1,"people":9274732}, {"year":1990,"age_group":5,"sex":2,"people":8799955}, {"year":1990,"age_group":10,"sex":1,"people":8782542}, {"year":1990,"age_group":10,"sex":2,"people":8337284}, {"year":1990,"age_group":15,"sex":1,"people":9020572}, {"year":1990,"age_group":15,"sex":2,"people":8590991}, {"year":1990,"age_group":20,"sex":1,"people":9436188}, {"year":1990,"age_group":20,"sex":2,"people":9152644}, {"year":1990,"age_group":25,"sex":1,"people":10658027}, {"year":1990,"age_group":25,"sex":2,"people":10587292}, {"year":1990,"age_group":30,"sex":1,"people":11028712}, {"year":1990,"age_group":30,"sex":2,"people":11105750}, {"year":1990,"age_group":35,"sex":1,"people":9853933}, {"year":1990,"age_group":35,"sex":2,"people":10038644}, {"year":1990,"age_group":40,"sex":1,"people":8712632}, {"year":1990,"age_group":40,"sex":2,"people":8928252}, {"year":1990,"age_group":45,"sex":1,"people":6848082}, {"year":1990,"age_group":45,"sex":2,"people":7115129}, {"year":1990,"age_group":50,"sex":1,"people":5553992}, {"year":1990,"age_group":50,"sex":2,"people":5899925}, {"year":1990,"age_group":55,"sex":1,"people":4981670}, {"year":1990,"age_group":55,"sex":2,"people":5460506}, {"year":1990,"age_group":60,"sex":1,"people":4953822}, {"year":1990,"age_group":60,"sex":2,"people":5663205}, {"year":1990,"age_group":65,"sex":1,"people":4538398}, {"year":1990,"age_group":65,"sex":2,"people":5594108}, {"year":1990,"age_group":70,"sex":1,"people":3429420}, {"year":1990,"age_group":70,"sex":2,"people":4610222}, {"year":1990,"age_group":75,"sex":1,"people":2344932}, {"year":1990,"age_group":75,"sex":2,"people":3723980}, {"year":1990,"age_group":80,"sex":1,"people":1342996}, {"year":1990,"age_group":80,"sex":2,"people":2545730}, {"year":1990,"age_group":85,"sex":1,"people":588790}, {"year":1990,"age_group":85,"sex":2,"people":1419494}, {"year":1990,"age_group":90,"sex":1,"people":238459}, {"year":1990,"age_group":90,"sex":2,"people":745146}, {"year":2000,"age_group":0,"sex":1,"people":9735380}, {"year":2000,"age_group":0,"sex":2,"people":9310714}, {"year":2000,"age_group":5,"sex":1,"people":10552146}, {"year":2000,"age_group":5,"sex":2,"people":10069564}, {"year":2000,"age_group":10,"sex":1,"people":10563233}, {"year":2000,"age_group":10,"sex":2,"people":10022524}, {"year":2000,"age_group":15,"sex":1,"people":10237419}, {"year":2000,"age_group":15,"sex":2,"people":9692669}, {"year":2000,"age_group":20,"sex":1,"people":9731315}, {"year":2000,"age_group":20,"sex":2,"people":9324244}, {"year":2000,"age_group":25,"sex":1,"people":9659493}, {"year":2000,"age_group":25,"sex":2,"people":9518507}, {"year":2000,"age_group":30,"sex":1,"people":10205879}, {"year":2000,"age_group":30,"sex":2,"people":10119296}, {"year":2000,"age_group":35,"sex":1,"people":11475182}, {"year":2000,"age_group":35,"sex":2,"people":11635647}, {"year":2000,"age_group":40,"sex":1,"people":11320252}, {"year":2000,"age_group":40,"sex":2,"people":11488578}, {"year":2000,"age_group":45,"sex":1,"people":9925006}, {"year":2000,"age_group":45,"sex":2,"people":10261253}, {"year":2000,"age_group":50,"sex":1,"people":8507934}, {"year":2000,"age_group":50,"sex":2,"people":8911133}, {"year":2000,"age_group":55,"sex":1,"people":6459082}, {"year":2000,"age_group":55,"sex":2,"people":6921268}, {"year":2000,"age_group":60,"sex":1,"people":5123399}, {"year":2000,"age_group":60,"sex":2,"people":5668961}, {"year":2000,"age_group":65,"sex":1,"people":4453623}, {"year":2000,"age_group":65,"sex":2,"people":4804784}, {"year":2000,"age_group":70,"sex":1,"people":3792145}, {"year":2000,"age_group":70,"sex":2,"people":5184855}, {"year":2000,"age_group":75,"sex":1,"people":2912655}, {"year":2000,"age_group":75,"sex":2,"people":4355644}, {"year":2000,"age_group":80,"sex":1,"people":1902638}, {"year":2000,"age_group":80,"sex":2,"people":3221898}, {"year":2000,"age_group":85,"sex":1,"people":970357}, {"year":2000,"age_group":85,"sex":2,"people":1981156}, {"year":2000,"age_group":90,"sex":1,"people":336303}, {"year":2000,"age_group":90,"sex":2,"people":1064581} ]34:T75d,## Part 3: Data Binding The _data bind_ is a core programming paradigm in D3. A _data binding_ is similar to a _data join_. In short, it's a step that makes your elements aware of the data: you can pass this data in the form of an array or object, and "bind" your data to the DOM elements you selected using methods like \`d3.selectAll()\`. This is what it looks like: ~~~ js d3.selectAll('').data() ~~~ ### What's happening here? * \`selectAll('')\` selects all _DOM_ elements and their data bindings (if any) in a given D3 container (if we use \`d3.selectAll\`, we are looking on the entire page, if we do \`chart.selectAll\`, it'll select within the \`chart\` container). Abstractly, the result of a selection that has data bound will look something like this: ~~~ [ { id: 0, element: , datum: }, { id: 1, element: , datum: } ... ] ~~~ * \`.data()\` _binds_ the data to the elements selected (replacing old bindings if they exist) by performing the equivalent of a database 'join' on the selection above and the data given. The key used for the join, by default, is simply the index of each datum in the data. ### What results from a binding? The result of a binding is three sets of _element + data_ pairs. 1. \`enter()\`: The set of _data_ that __do not have__ bound _DOM elements_. 2. \`update()\*\`: The set of _DOM elements_ that __already have__ _data_ (\* note: this is an implicit set. It is the set of elements that will be modified if neither \`enter()\` nor \`exit()\` are selected from the result of \`data()\`. 3. \`exit()\`: The set of _DOM elements_ that __do not have__ _data_ bound. It may be helpful to remember the symmetry here! There is also a helpful fourth set, \`merge()\`, the union of \`enter()\` and \`update()\` sets.35:[{"id":"9a33fd3a0ce9a1c8116403d5cbad6dbd06adb4013fa4ed9783d891539ed5530fca7f48106da059882170c91db2bede7b5241e429e28855feb580a06014e50c57","href":"https://static.observableusercontent.com/files/9a33fd3a0ce9a1c8116403d5cbad6dbd06adb4013fa4ed9783d891539ed5530fca7f48106da059882170c91db2bede7b5241e429e28855feb580a06014e50c57","name":"Iris.csv","type":"text/csv","lastModified":1758892098178.405,"size":5107}] 2f:{"title":"Week 4 Lab: First D3 programming session, DOM manipulation, Data binding","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"## 1. Loading Data\n\n### 1a. Raw Data Sources\n\nVery similar to Vega-Lite, you can import data using D3. An example is provided below - take note of the syntax used. The example imports Vega-Lite's `cars.json` dataset.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"cars = d3.json(\"https://vega.github.io/vega-datasets/data/cars.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"cars","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"The general syntax for D3 when it comes to data imports is the following:\n\n- `d3.json(...)`: We want to import a JSON dataset (for CSV, use `d3.csv(...)`)\n- The URL within can source an online-hosted JSON or CSV file\n\nNote that there is nothing stopping you from using VL's own `FileAttachment(...).json({typed:true})` or `.csv({typed:true})` that we've been using before. ","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"#### [TO-DO]\nLet's try to import a CSV file and a JSON file using D3, into the following variables:\n\n- `weather_data`: https://vega.github.io/vega-datasets/data/seattle-weather.csv\n- `driving`: https://vega.github.io/vega-datasets/data/driving.json\n\nIf you're successful, the two tables below should be populated properly.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"weather_data = ","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"weather_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"driving = ","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"driving","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"### 1b. Importing from Files on Observable\n\nThe solution above assumes you have a dataset you want to load that is hosted online. It obviously saves the hassle of dealing with uploading files to Observable. Sometimes though, you really do need to upload a dataset manually. In this case, you wouldn't rely on D3, but instead rely on the original `FileAttachment(...)` method we've worked with thus far.\n\n#### [TO-DO]\nFrom Kaggle, navigate to the [Iris Species Dataset](https://www.kaggle.com/datasets/uciml/iris) and download the dataset onto your computer (you will need a Kaggle account to access the download option). Manually upload the file onto this notebook, and import it into this notebook as the variable `iris`.","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"iris = ","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"iris","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"## 2. D3 Basics\n\nD3 and HTML interact through HTML's `