30:T4a3,md` ## Additional Resources - D3 v4 and v5 are more or less compatible, and [D3 Tips and Tricks v4.x](https://leanpub.com/d3-t-and-t-v4/read) contains amazing tips that can be applied to both versions. Check it out if you want to learn more! - Here are links to earlier versions of this tutorial, including a more traditional slide format and some illustrating screenshots that might be intuitive: - [HTML+Javascript version of this tutorial, from 2018 spring](https://jsfiddle.net/haldenl/L7gf9ejj/) - [Tutorial slides, Autumn 2018](https://docs.google.com/presentation/d/1izPbshPbJsR0Ujd5JxYgKr0tpJNLGZQmu2qpxkGLpUY/edit?usp=sharing) - [Tutorial slides Spring 2016](https://uwdata.github.io/d3-tutorials/) - A minimal [introduction to Observable and Javascript](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable). - The spring 2019 [notebook artifact of the in-person D3 tutorial](https://observablehq.com/@haldenl/d3-tutorial) (a recreation of the visualization in this notebook). - The [classic webpage version](https://github.com/haldenl/d3-tutorial-webpage-version) of the visualization created in this notebook, hosted on Github Pages. `31:T969,md`Up until now, this course has exposed you to Vega-Lite (or Altair, its Python binding) as a grammar for visualization authoring. The development of Vega-Lite was motivated by a need for _concise specification of visualizations for data analysis_. Its strengths lie in its simplicity and use of _sensible defaults_ to "hide away" much of the nitty gritty of developing a slew of common visualizations and interaction techniques. These reasons are also what make Vega-Lite an excellent tool for learning the fundamentals and grammar of visualization design. However, as we get into the terroritory of exploring even more complex visualizations, Vega-Lite may prove to be inadequate for your needs. While Vega-Lite and the visualization recommendation tools built on top of it trend towards allowing users to think about _what_ they want to see from their data, D3 was designed to give authors complete control over _how_ their data is presented. Visualization authoring tools exist on a spectrum that can largely be characterized as a going from _expressive yet complex_ to _simple and concise_, and D3 lies near the former. Its strengths lie in the tools it offers in allowing its users to manipulate the Document Object Model (DOM) of a webpage. 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_. In Vega-Lite, you specify _what_ you want your visualization to look like, and its pipeline does the necessary work in creating and placing the appropriate visual marks, scales, legends, and interaction techniques. With D3, _you_ are in charge of this process. This means that understanding of the DOM, HTML, CSS, and JavaScript are required, but with that comes a degree of expressiveness that is only really bounded by the limitations of what can be shown in your web browser. This makes D3 the tool of choice for authors of _novel_ and _highly customized_ interactive visualizations. D3 is ubiquitous in data journalism and is the backbone of many interactive analysis systems being built today, including Vega and Vega-Lite! Whether it's Vega-Lite, D3, or any other visualization library, the tool you use depends on the task at hand! With this tutorial, we aim to provide you foundations necessary to add D3 to your visualization toolbox. Let's get started. `32:T69c,md`### A quick note about the code in this notebook Throughout this notebook, we'll be slowly building out our target visualization. To allow us to render multiple stages of this visualization in Observable, we employ a few tactics. __These tactics are only used for chaining these visualizations. You do not need to employ any of these in your own work__. 1. We'll be creating and recreating local elements in a \`____\` object to serve as a pseudo _namespace_. Variables that will be used globally will not be placed in these namespaces. 2. We'll be declaring _D3 selections of DOM elements that become reused_ in namespaces with a [\`mutable\`](https://observablehq.com/@observablehq/introduction-to-mutable-state) qualifier. _This is an Observable construct, not a normal Javascript qualifier_. You don't need to understand how exactly this keyword works, only that it allows us to define a dependency ordering for rendering and allows us to chain modifications to our visualization together without changing previous renderings. When writing your own visualization, you can omit this keyword. 3. When defining our namespaces, we recreate everything defined prior by using a special helper method \`cloneAndAppend\`. You also do not need to know how this works, only that it copies previously defined elements such that modifications are able to be propagated to later visualizations. Again, you will not need to use this in authoring your own visualizations. To see a single view Observable notebook of the visualization we are going to create, check out the [notebook artifact](https://observablehq.com/@haldenl/d3-tutorial) of the in person tutorial from Spring 2019. `33:Td8c,__complete_n__ = { const container = cloneAndAppend(mutable container); const chart = cloneAndAppend(mutable chart, container); const xaxis = cloneAndAppend(mutable xaxis, chart); const yaxis = cloneAndAppend(mutable yaxis, chart); const title = cloneAndAppend(mutable title, container); const ytitle = cloneAndAppend(mutable ytitle, chart); const xtitle = cloneAndAppend(mutable xtitle, chart); const legend = cloneAndAppend(mutable legend, chart); const enterbars = cloneAndAppend(mutable enterbars, chart); container.call(tip); enterbars.on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }); // dynamic legend legend .on('click', d => update(d, 0)) .style('cursor', 'pointer'); legend.selectAll('.legend-rect') .style('opacity', d => d === state.sex ? 1 : 0.5); legend.selectAll('.legend-text') .style('opacity', d => d === state.sex ? 1 : 0.5) .style('font-weight', d => d === state.sex ? 700 : 400); function update(sex, step) { // Step 1. Data. state.sex = sex; state.year += step; const newData = census.filter(row => isYearAndSex(row, state.year, state.sex)); // Step 2. Join. const bars = chart.selectAll('.bar') .data(newData, (d) => { if (d.year === state.year) { // the age for the current year should match the age - step for the previous year. return d.age_group - step; } else { return d.age_group; } }); // Step 3. Enter. bars.enter().append('rect') .attr('class', 'bar') .attr('x', d => x(d.age_group)) .attr('y', d => y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', d => color(d.sex)) .on('mouseenter', function(d) { // show the tooltip on mouse enter tip.show(d, this); d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }) .transition('enter-transition') .duration(500) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) // Step 4. Update. bars .transition('update-transition') .duration(500) .attr('x', d => x(d.age_group)) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) .attr('fill', d => color(d.sex)); // Step 5. Exit. bars.exit() .transition('exit-transition') .duration(500) .attr('height', 0) .attr('y', y(0)) .remove(); // update legend legend.selectAll('.legend-rect') .style('opacity', d => d === state.sex ? 1 : 0.5); legend.selectAll('.legend-text') .style('opacity', d => d === state.sex ? 1 : 0.5) .style('font-weight', d => d === state.sex ? 700 : 400); // update the year text document.getElementById('curr-year-complete').textContent = state.year; } return { container, chart, xaxis, yaxis, title, ytitle, xtitle, legend, enterbars, update }; }34: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} ]35:T4c7,md` 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. `36:T4f9,md`Let's use our new knowledge of \`enter()\` to understand what's going on here. 1. \`chart.selectAll('.bar')\` selects all DOM elements (and their data bindings, if any) in \`chart\` with attribute \`class = 'bar'\`. Because we have not yet added any elements with the class 'bar', this is an empty set of elements. 2. \`\{...\}.data(filteredData)\` performs the equivalent of a database 'join' on the the empty set selected above and the filtered data. The key used for the join, by default, is simply the index of each datum in the data. Because, at this point, all datum have __no__ bound DOM element, the result of this join will be __(a)__ an \`enter()\` set containing a datum + DOM bindings (present or otherwise) for every data point, __(b)__ an empty \`update()\` set, and __(c)__ an empty \`exit()\` set. 3. \`.enter()\` simply selects the \`enter()\` set. 4. \`append('rect')\` creates and appends a DOM element (an svg 'rect') _for every item in the selected set_. In this case, we are creating a rect for every row in our \`filteredData\`. 5. \`attr('class', 'bar')\`, applies the attribute \`class="bar"\` to, again, every element in our selected set. Now, if we perform a \`.selectAll('.bar')\`, we will receive all of the elements we have just created! `37:T444,md`_Update_ can help us display modifications to the data presented by our visualization, without needing to re-render it entirely. This is especially powerful in enabling transitions and animations. Below, we implement a simple update function. This function performs several steps. 1. It takes a sex and a decade \`step\` (e.g. +10, -10), filters out a new subset of the data. 2. Selects all 'bar' elements and joins them with this new data (remember, because we have provided no explicit 'key' function, d3 joins on the index of the data). 3. Selects the \`update()\` set (implicitly), and adjusts the attributes of each bar (e.g. size) to match the new data. Notice that we are not \`appending\` any new elements here! We are simply changing the visual attributes of existing elements to match the new data bound to them. _Transitions_ allow us to interpolate between each bar's previous appearance and the new one we just specified over the given _duration_. We can name a \`transition\` to create a key for it. Transitions with the same name have the ability to override each other.`38:T422,md`_Step 2_. _Join_. Like before, select our 'bar's and join on our new data. _However_, this time we give \`.data()\` a \`key\` function. We wish to match the population of the current census year with its record in the next census year. If \`step\` denotes our census year adjustment, then a row in the next year (\`state.year\`) for age group \`d.age_group\` should be matched with the row in the previous year with age group (the row currently bound to that DOM element) \`d.age_group - step\`. For example, if we are transitioning from 1900 to 1910, then the 10-15 year olds in 1910 should be matched with the 0-5 year olds from 1900. ~~~ js const bars = chart.selectAll('.bar') .data(newData, (d) => { if (d.year === state.year) { // if the datum is from the newData // the age for the year we are updating to should match the age - step for the previous year. return d.age_group - step; } else { // if the datum is from the data currently bound to the DOM elements return d.age_group; } }); ~~~ `39:T571,function updateBetter(sex, step) { // Step 1. Data. state.sex = sex; state.year += step; const newData = census.filter(row => isYearAndSex(row, state.year, state.sex)); // Step 2. Join. const bars = __update_better_n__.chart.selectAll('.bar') .data(newData, (d) => { if (d.year === state.year) { // the age for the current year should match the age - step for the previous year. return d.age_group - step; } else { return d.age_group; } }); // Step 3. Enter. bars.enter().append('rect') .attr('class', 'bar') .attr('x', d => x(d.age_group)) .attr('y', d => y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', d => color(d.sex)) .transition('enter-transition') .duration(500) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) // Step 4. Update. bars .transition('update-transition') .duration(500) .attr('x', d => x(d.age_group)) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) .attr('fill', d => color(d.sex)); // Step 5. Exit. bars.exit() .transition('exit-transition') .duration(500) .attr('height', 0) .attr('y', y(0)) .remove(); // update the year text document.getElementById('curr-year-better').textContent = state.year; }3a:T4a6,md`We now add events listeners to the data-binded rectangle bars, such that the tooltip is triggered correctly. Event listeners can be added to marks to react to events on the underlying selection using the \`on()\` method. The \`on()\` method takes the event name and a callback function that is triggered every time the specified event happens. An anonymous function can be used as the callback for the event listener. The input to the function \`d\` represents the underlying data of the mark. The scope, \`this\`, corresponds to the DOM element. Event listeners include: - \`mousedown\`: Triggered by an element when a mouse button is pressed down over it - \`mouseup\`: Triggered by an element when a mouse button is released over it - \`mouseover\`: Triggered by an element when the mouse comes over it - \`mouseout\`: Triggered by an element when the mouse goes out of it - \`mousemove\`: Triggered by an element on every mouse move over it. - \`click\`: Triggered by a mouse click: mousedown and then mouseup over an element - \`contextmenu\`: Triggered by a right-button mouse click over an element. - \`dblclick\`: Triggered by two clicks within a short time over an element `3b:T6a8,function updateTooltipChart(sex, step) { // Step 1. Data. state.sex = sex; state.year += step; const newData = census.filter(row => isYearAndSex(row, state.year, state.sex)); // Step 2. Join. const bars = __tooltip_n__.chart.selectAll('.bar') .data(newData, (d) => { if (d.year === state.year) { // the age for the current year should match the age - step for the previous year. return d.age_group - step; } else { return d.age_group; } }); // Step 3. Enter. bars.enter().append('rect') .attr('class', 'bar') .attr('x', d => x(d.age_group)) .attr('y', d => y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', d => color(d.sex)) .on('mouseenter', function(d) { // show the tooltip on mouse enter tip.show(d, this); d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }) .transition('enter-transition') .duration(500) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) // Step 4. Update. bars .transition('update-transition') .duration(500) .attr('x', d => x(d.age_group)) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) .attr('fill', d => color(d.sex)); // Step 5. Exit. bars.exit() .transition('exit-transition') .duration(500) .attr('height', 0) .attr('y', y(0)) .remove(); // update the year text document.getElementById('curr-year-tooltipchart').textContent = state.year; }3c:T436,__dynamic_legend_n__ = { const container = cloneAndAppend(mutable container); const chart = cloneAndAppend(mutable chart, container); const xaxis = cloneAndAppend(mutable xaxis, chart); const yaxis = cloneAndAppend(mutable yaxis, chart); const title = cloneAndAppend(mutable title, container); const ytitle = cloneAndAppend(mutable ytitle, chart); const xtitle = cloneAndAppend(mutable xtitle, chart); const legend = cloneAndAppend(mutable legend, chart); const enterbars = cloneAndAppend(mutable enterbars, chart); container.call(tip); enterbars.on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }); return { container, chart, xaxis, yaxis, title, ytitle, xtitle, legend, enterbars }; }3d:T7dc,function updateLegendV2Chart(sex, step) { // Step 1. Data. state.sex = sex; state.year += step; const newData = census.filter(row => isYearAndSex(row, state.year, state.sex)); // Step 2. Join. const bars = __dynamic_legend_n__.chart.selectAll('.bar') .data(newData, (d) => { if (d.year === state.year) { // the age for the current year should match the age - step for the previous year. return d.age_group - step; } else { return d.age_group; } }); // Step 3. Enter. bars.enter().append('rect') .attr('class', 'bar') .attr('x', d => x(d.age_group)) .attr('y', d => y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', d => color(d.sex)) .on('mouseenter', function(d) { // show the tooltip on mouse enter tip.show(d, this); d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }) .transition('enter-transition') .duration(500) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) // Step 4. Update. bars .transition('update-transition') .duration(500) .attr('x', d => x(d.age_group)) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) .attr('fill', d => color(d.sex)); // Step 5. Exit. bars.exit() .transition('exit-transition') .duration(500) .attr('height', 0) .attr('y', y(0)) .remove(); // update legend __dynamic_legend_n__.legend.selectAll('.legend-rect') .style('opacity', d => d === state.sex ? 1 : 0.5); __dynamic_legend_n__.legend.selectAll('.legend-text') .style('opacity', d => d === state.sex ? 1 : 0.5) .style('font-weight', d => d === state.sex ? 700 : 400); // update the year text document.getElementById('curr-year-dynamiclegend').textContent = state.year; }3e:[] 2e:{"title":"Introduction to D3","cells":[{"id":0,"value":"md`# Introduction to D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"md`_Halden Lin, Tongshuang (Sherry) Wu_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3266,"value":"md`**NOTE: This notebook is _deprecated_. Here are some newer tutorials:**\n\n* [Introduction to D3, Part 1](https://observablehq.com/@uwdata/introduction-to-d3-part-1)\n* [Introduction to D3, Part 2](https://observablehq.com/@uwdata/introduction-to-d3-part-2)\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## What is d3.js?\n\n[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!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`## Motivation: Vega-Lite & D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2422,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2809,"value":"md`## What we'll be building\n\nHere's a sneak peek of the visualization we'll be creating in this notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"__complete_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2763,"value":"viewof completeButtons = {\n const decrement = html``;\n decrement.onclick = () => {\n if (state.year > 1900) {\n __complete_n__.update(state.sex, -10);\n }\n };\n \n const increment = html``;\n increment.onclick = () => {\n if (state.year < 2000) {\n __complete_n__.update(state.sex, 10);\n }\n }\n \n const switchSexButton = html``;\n switchSexButton.onclick = () => __complete_n__.update(state.sex === 2 ? 1 : 2, 0);\n \n const view = html`\n

\n ${decrement}\n \n ${state.year}\n \n ${increment}\n
\n ${switchSexButton}\n

\n`\n return view;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3048,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"md`To create a visualization, we need some data!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`Every 10 years, the census bureau documents the demographic make-up of the United States, influencing everything from congressional districting to social services. We will work with a dataset that contains a high-level summary of census data for two years a century apart: 1900 and 2000.\n\nThe data is a JSON list that describes the U.S. population:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`\nIt consists of the following columns:\n\n- \\`year\\`: The year of the census.\n- \\`age_group\\`: Age group, in 5 year bins from 0-4 years old to 90+.\n- \\`sex\\`: The reported sex (binary in this dataset): 1→male, 2→female.\n- \\`people\\`: The population count of the group.\n\nHere are the first 10 rows:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"printTable(census.slice(0, 10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`Now, let's start coding!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`First, we need to import d3. The suffix \\`@5\\` here denotes version 5.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`## Create and Append`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`First, let's create a \\`container\\` to hold the visual elements that we are going to add.\n\nTo create our container, we first define the width, height, as well as margins for our visualization. We expect the dimensions of our visualization to be \\`width\\` by \\`height\\`, with surrounding \\`margin\\` for elements such as axes and titles.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"margin = ({\n top: 50,\n right: 50,\n bottom: 50,\n left: 100\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`Our enclosing container will be an \\`svg\\`, or **S**calable **V**ector **G**raphics, element. We can create this by using d3's \\`create\\` method. Notice the \\`mutable\\` qualifier here. Don't freak out! This is discussed above __\"A quick note about the code...\"__ and is not necessary for your own work.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"mutable container = d3.create('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom);\n\n/** In your notebook (without mutable):\n\ncontainer = d3.create('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom);\n \n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`Notice that we've assigned \\`attr\\` (attributes) to the element we've just created. For a full list of attributes assignable to svg elements, check out the documentation [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`Within this container, we can insert our \\`chart\\`. To do this, we create a \\`g\\` element (a \"group\"), which is translated within our \\`container\\` such that we achieve our \\`margin\\`. This is where the graphical elements bound to the __data__ of our visualization will lie.\n\nWe add the created \\`g\\` using the \\`append()\\` function – it allows us to add new elements anywhere. We can also get rid of elements with \\`remove()\\`.\n\nWe store \\`chart\\` with a variable for future use.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"mutable chart = (mutable container).append('g')\n .attr('id', 'chart')\n .attr('transform', `translate(${margin.left}, ${margin.top})`);\n\n/** In your notebook (without mutable):\n\nchart = container.append('g')\n .attr('id', 'chart')\n .attr('transform', `translate(${margin.left}, ${margin.top})`);\n \n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`If we render this right now, we will see only a large blank rectangle:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"container.node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"md`## Selections\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2582,"value":"md`_namespace definition with everything we've created so far._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2550,"value":"__selections_n__ = {\n const container = cloneAndAppend(mutable container);\n\n const chart = cloneAndAppend(mutable chart, container);\n \n return {\n container,\n chart\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2800,"value":"md`_and now we continue._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2082,"value":"\nmd`\\`append()\\` is part of the d3 selection family, which helps to create and access page elements.\n\n\\`d3.select()\\` and \\`d3.selectAll()\\` can be used to access elements by name, class, id, or many other [CSS selectors](https://www.w3schools.com/cssref/css_selectors.asp). \\`d3.select()\\` selects only the first element that matches the CSS selectors while \\`d3.selectAll()\\` selects all matched elements. To select an element within a selection we've already defined (e.g., our \\`container\\` or \\`chart\\`) we can use _selection_.\\`select()\\` or _selection_.\\`selectAll()\\`.\n\nYou can access and modify the properties of selections with \\`attr()\\`, \\`text()\\`, \\`style()\\`, and other operators. Most d3 selection methods return the selection, allowing us to chain the operator calls.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`Let's try to modify attributes and styles of \\`container\\` and \\`chart\\` to help clear up their positions. Below is what you would see if:\n\n_First_. Our svg \\`container\\` were filled by a pink \\`rect\\` (note that we use \\`insert\\` before ':first-child' instead of \\`append\\` here to insert the rect as a first child of the container so as to not occlude our \\`chart\\` group).\n\nRemember that we are creating variables designated for specific sections with \\`__

__\\` namespaces, and thus the \\`__selections__\\`. You __do not__ need to do this if you are developing a visualization on your own. This is simply for the purpose of iteration throughout this notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2098,"value":"__selections_n__.container\n .insert('rect', ':first-child')\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('fill', '#ff96ca');\n\n/** In your notebook (without namespace):\n ** Same container as before!\n ** (In this notebook, if don't use the namespace here,\n ** we'll also modify the render of the previous stage.\n ** Try it if you are curious!)\n \ncontainer\n .insert('rect', ':first-child')\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('fill', '#ff96ca');\n \n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":2110,"value":"md`_Second_. And our chart (selected by \\`#chart\\` id) had a blue box of dimensions \\`width\\` by \\`height\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2102,"value":"__selections_n__.chart\n .append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('fill', '#42adf4');\n\n/** In your notebook (without namespace):\n ** Same chart as before!\n ** (In this notebook, if don't use the namespace here,\n ** we'll also modify the render of the previous stage.\n ** Try it if you are curious!)\n \nchart\n .append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('fill', '#42adf4');\n \n*/\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"__selections_n__.container.node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2117,"value":"md`Note the imbalence in left/right margins. We're saving room to eventually add a left-positioned axis.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"md`_Tips_\n\n- The [d3 selections page](https://github.com/d3/d3-selection) is extremely helpful!\n- Keep in mind that the origin for positioning elements is the upper left corner!\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`## Domains\n\nBefore we can begin plotting our data, we first need to define our \\`x\\`, \\`y\\` and \\`color\\` domains and scales for our bar chart.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`_Age Domain_. This produces an array of all the ages in the data. \\`array.map\\` returns an array of identical length by mapping values in the original array to new ones, decided by the given function (in our case, we want an array of just ages). We defined a helper function \\`unique\\` that will give us the unique values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"ageDomain = unique(census.map((row) => { return row.age_group }));","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`_People Domain_. We want the minimum to be 0, as this is a bar chart, and the maximum to be the maximum \\`people\\` count in the data. We pass a function to tell \\`d3.max\\` how to access the \\`people\\` count given a data record.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"peopleDomain = [0, d3.max(census, row => row.people)];","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`_Sex domain_. The \\`sex\\` column in our data codes male as \\`1\\` and female as \\`2\\`, and so we can just use them directly as the domain.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"sexDomain = [1, 2];","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`## Scales\n\nUsing these domains, we can now define scales for our encoding channels.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"md`As you have learned with Vega-Lite / Altair, _scales_ are functions that map from a domain to a range (a domain of chart). \\`d3\\` has multiple built in scale functions. Before building the actual scale function, let's take a look at the type of functions we are going to use:\n\n- \\`d3.scaleLinear()\\` creates a linear mapping between a continuous domain and range. We also have \\`d3.scaleLog()\\`, \\`d3.scaleSqrt()\\`, and so on. \n- \\`d3.scaleOrdinal()\\` specifies an explicit mapping from a set of ordered, discrete data values to a corresponding set of visual attributes (such as colors). \n- \\`d3.scaleBand()\\` maps a discrete domain to a continous range, by dividing the continous range into uniform _bands_. Band scales are often used for bar charts with an ordinal or categorical dimension – just like our \\`age\\` field!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`We want to visualize \\`age\\` on the \\`x\\`-axis. We use an ordinal scale to match the data. \\`range\\` denotes the bounds in the visualization, and \\`domain\\` denotes the bounds in the data. Recall that scales are functions that take a domain value, i.e., age, and map it to a visual range value, i.e., position: \\`x = f(age) => position\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"x = d3.scaleBand().rangeRound([0, width])\n .padding(0.1)\n .domain(ageDomain);","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"md`Similarly, we want a quantitative \\`y\\` scale for population count. Our range here is from \\`height\\` to \\`0\\` (as opposed to \\`0\\` to \\`height\\`) because in HTML/d3 land things are drawn downward, where \\`(0, 0)\\` is the top-left corner.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"y = d3.scaleLinear()\n .range([height, 0])\n .domain(peopleDomain);","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"md`We encode \\`sex\\` with colors. We first define the the colors representing the male and female, and use those as the range of an ordinal scale. For the purposes of this visualization, we'll start with a \"conventional\" color association of blue (male) and pink (female), but feel free to change them below as you see fit!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"color = {\n const maleColor = '#42adf4';\n const femaleColor = '#ff96ca';\n\n // create a scale function that maps 1 to the male color and 2 to the female color\n return d3.scaleOrdinal()\n .range([maleColor, femaleColor])\n .domain(sexDomain);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"md`_Additional tips:_ D3 also handles temporal scales like \\`d3.scaleTime()\\`, and contains default color scales like \\`d3.schemeCategory10()\\` (so you don't have to manually define colors, as in our case). Check out the [d3js Scales](https://github.com/d3/d3-scale) page for more information.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"md`## Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2595,"value":"md`_namespace definition with everything we've created so far._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2543,"value":"__axes_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n\n return {\n container,\n chart,\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2797,"value":"md`_and now we continue._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"md`With scales defined, we can add corresponding axes to our svg container. \n\nAxes can be generated based on the scales in your visualization. Axes are defined based on their position using axis generator functions \\`d3.axisTop()\\`, \\`d3.axisBottom()\\`, \\`d3.axisRight()\\`, or \\`d3.axisLeft()\\`.\n\nTo create an axis, we must create or select the element in which we want to place it, then invoke the selection \\`call()\\` method to apply our axis generator function to it.\n\nSee the [d3 Axes page](https://github.com/d3/d3-axis) for more information.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"mutable xaxis = __axes_n__.chart\n .append('g')\n .attr('class', 'axis axis--x')\n .attr('transform', `translate(0, ${height})`)\n .call(d3.axisBottom(x));\n\n/** In your notebook (without mutable and namespace):\n\nxaxis = chart\n .append('g')\n .attr('class', 'axis axis--x')\n .attr('transform', `translate(0, ${height})`)\n .call(d3.axisBottom(x));\n\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"mutable yaxis = __axes_n__.chart\n .append('g')\n .attr('class', 'axis axis--y')\n .call(d3.axisLeft(y));\n\n/** In your notebook (without mutable and namespace):\n\nyaxis = chart\n .append('g')\n .attr('class', 'axis axis--y')\n .call(d3.axisLeft(y));\n\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"md`Our container now displays x and y axes!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"__axes_n__.container.node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`## Titles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2607,"value":"md`_namespace definition with everything we've created so far._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2529,"value":"__titles_n__ = {\n const container = cloneAndAppend(mutable container);\n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2794,"value":"md`_and now we continue._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`In D3, axis generators do not automatically create titles for you. You can manually add _labels_ to your axes (or other elements!) by adding text marks. As with any other mark, you can programmatically specify both HTML attributes and CSS styles.\n\nLet's add titles for the chart, and x and y axes:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1358,"value":"// make the font consistent\n__titles_n__.container.selectAll('text').style(\"font-family\", \"sans-serif\");\n\n/** In your notebook (without namespace).\n\ncontainer.selectAll('text').style(\"font-family\", \"sans-serif\");\n\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":1345,"value":"mutable title = __titles_n__.container.append(\"text\")\n .attr(\"transform\", `translate(${(width + margin.left + margin.right)/2},20)`)\n .style(\"text-anchor\", \"middle\")\n .style(\"font-weight\", 700)\n .text(\"Census Age Group and Population by Sex\");\n\n\n/** In your notebook (without mutable and namespace):\n\ntitle = container.append(\"text\")\n .attr(\"transform\", `translate(${(width + margin.left + margin.right)/2},20)`)\n .style(\"text-anchor\", \"middle\")\n .style(\"font-weight\", 700)\n .text(\"Census Age Group and Population by Sex\");\n\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"// text label for the y axis\nmutable ytitle = __titles_n__.chart.append(\"text\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"y\", 0 - margin.left)\n .attr(\"x\", 0 - (height / 2))\n .attr(\"dy\", \"1em\")\n .style(\"text-anchor\", \"middle\")\n .text(\"Population\");\n\n/** You know the drill. In your own notebook you can ignore mutable and __titles__.\n ** We'll stop reminding you at this point to save space. */","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"// text label for the x axis\nmutable xtitle = __titles_n__.chart.append(\"text\") \n .attr(\"transform\", `translate(${(width/2)}, ${(height + margin.top - 10)})`)\n .style(\"text-anchor\", \"middle\")\n .text(\"Age Group\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":2162,"value":"__titles_n__.container.node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1678,"value":"md`## Legends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2614,"value":"md`_namespace definition with everything we've created so far._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2517,"value":"__auto_legend_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2791,"value":"md`_and now we continue._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"md`Similarly, you will also need to construct _legends_. The [\\`d3-legend\\`](https://d3-legend.susielu.com/#summary) library can be used to help automatically create it:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"d3Legend = require('d3-svg-legend')","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"legend_auto = d3Legend\n .legendColor()\n .scale(color)\n .labels([\"Male\", \"Female\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"md`Similar to axes, we can then add the legend with the call function: \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2173,"value":"__auto_legend_n__.container.append(\"g\")\n .attr(\"class\", \"legend_auto\")\n .style('font-size', 12)\n .style('font-family', 'sans-serif')\n .attr(\"transform\", \"translate(650, 100)\")\n .call(legend_auto)","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"md`Take a look at our container with the axis titles and the color legend:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"__auto_legend_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"md`Now that we've setup the frame of our chart, let's start to deal with the real data!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"md`## Data Bindings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1584,"value":"md`The result of a binding is three sets of _element + data_ pairs.\n\n1. \\`enter()\\`: The set of _data_ that __do not have__ bound _DOM elements_.\n2. \\`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()\\`.\n3. \\`exit()\\`: The set of _DOM elements_ that __do not have__ _data_ bound.\n\nIt may be helpful to remember the symmetry here! There is also a helpful fourth set, \\`merge()\\`, the union of \\`enter()\\` and \\`update()\\` sets.\n\nTo understand this paradigm, let's go through each of these sets step by step.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`\n### Data binding 101: Recreate the legends manually with Enter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2627,"value":"md`_namespace definition with everything we've created so far._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2503,"value":"__manual_legend_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2788,"value":"md`_and now we continue._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2620,"value":"md`As a small first example to data binding, let's recreate the legend manually. We can do so by creating new DOM elements using the \\`enter()\\` set. Manual legends are just like the other elements of your visualization: by creating a new set of marks, binding the data, and using scales to style the attributes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"md`Programmatically, data binding goes through several steps (we will see more when we talk about interactions later):\n\n1. _select_ all of elements with the \\`legend\\` class with \\`selectAll()\\`. Because we haven't created any yet, the result of \\`selectAll\\` will be an empty set.\n2. _bind_ our data with \\`.data()\\` (in this case, the domain of \\`color\\`, which is the values of \\`sex\\`.)\n3. Invoke \\`enter()\\` to work on the set of input data without a corresponding bound DOM element. \n4. \\`append()\\` a new DOM element for every data point in the enter set. We append the \\`g\\` for each sex value (hence we have two). \n5. Invoke \\`attr()\\` for each element with anonymous functions \\`function(d, i)\\` which are then applied to the bound data, and return values based on two parameters \\`d\\` (our bound datum) and \\`i\\` (the index of our datum). Here, we specify an offset of 20 vertical pixels between \\`g\\` elements.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"mutable legend = __manual_legend_n__.chart\n .selectAll(\".legend\") // step 1\n .data(color.domain()) // step 2\n .enter() // step 3\n .append(\"g\") // step 4\n .attr(\"class\", \"legend\") // step 5\n .attr(\"transform\", function(d, i) { // step 5\n // i is the index\n return `translate(0, ${i * 20})`; \n })\n .style('font-family', 'sans-serif');","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"md`Then, we can further append elements onto the wrapper group \\`g\\`. By appending elements onto \\`legend\\`, elements get automatically mapped to each datum in our \\`color.domain()\\`. Hence, we will have two \\`rect\\` elements (rectangles) in total, one for each sex. Inside the \\`g\\` for each sex, both \\`rect\\`s are placed at (x=360, y=65). Recall that the two \\`g\\` elements have a 20 pixel offset in between them, which means we will also have a 20 pixel vertical gap between the rectangles. Think of it as an inherited padding.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"mutable legend.append(\"rect\")\n .attr('class', 'legend-rect')\n .attr(\"x\", width + margin.right-12)\n .attr(\"y\", 65)\n .attr(\"width\", 12)\n .attr(\"height\", 12)\n .style(\"fill\", color);","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"md`Similarly, we can append text to create the legend labels, and set their text to be Male and Female, instead of the uninformative 1 and 2.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"mutable legend.append(\"text\")\n .attr('class', 'legend-text')\n .attr(\"x\", width + margin.right-22)\n .attr(\"y\", 70)\n .style('font-size', \"12px\")\n .attr(\"dy\", \".35em\")\n .style(\"text-anchor\", \"end\")\n .text(function(d) { return d === 1 ? 'Male' : 'Female'; });","pinned":true,"hidden":false,"mode":"ojs"},{"id":2240,"value":"__manual_legend_n__.container.node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"md`\n### Creating bars with Enter\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2634,"value":"md`_namespace definition with everything we've created so far._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2483,"value":"__bars_enter_namespace__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n const legend = cloneAndAppend(mutable legend, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n legend\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2821,"value":"md`_and now we continue_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2630,"value":"md`Similar to how we've created the legend, let's bind our data onto elements for the bars of our visualization.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1644,"value":"md`As a starting point, suppose we are interested in seeing the population distribution for a given year (\\`1900\\`) and sex (\\`2 = female\\`). We can define these values in a \\`state\\` object, which we will manipulate later.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"state = ({year: 1900, sex: 2})","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`To filter our data to specific rows of interest (recall that we are interested in a specific year and sex), we define a function on a row. Recall that a row is a JSON object that looks like the following:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`\\`{ \"year\": 1900, \"age_group\": 0, \"sex\": 1,\"people\": 4619544 }\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"function isYearAndSex(row, year, sex) {\n return row.year === year && row.sex === sex;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"filteredData = census.filter(row => isYearAndSex(row, state.year, state.sex));","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"printTable(filteredData);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1774,"value":"md`We can now perform a data binding on our filtered dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"bars = __bars_enter_namespace__.chart.selectAll('.bar').data(filteredData);","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"md`The bar selection will be an empty \\`selectAll\\`, because we have yet to draw any. This means all the data points will be in the \\`.enter()\\` set of the binding.\n\nNow, for everything in the enter set, append a \\`rect\\` element and size / position appropriately. Think of this as: for each datapoint, create a rect with the given attributes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"mutable enterbars = bars\n .enter()\n .append('rect')\n .attr('class', 'bar')\n .attr('x', (d) => x(d.age_group))\n .attr('y', (d) => y(d.people))\n .attr('width', x.bandwidth())\n .attr('height', (d) => height - y(d.people))\n .attr('fill', (d) => color(d.sex));","pinned":true,"hidden":false,"mode":"ojs"},{"id":1610,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1539,"value":"md`The visual attributes of each bar are calculated as follows:\n\n* Its x position is a function of the \\`age_group\\` of its datum \\`d\\`. We created this function earlier, it's the \\`x\\` scale!\n* Its y position is a function of the \\`people\\`, as determined by our \\`y\\` scale.\n* Its width is \\`bandwidth\\` of our ordinal scale (the space reserved for each column).\n* Its height is the distance between its starting y position and the 'bottom' of the chart, where the x axis lies. Remember that (0, 0) is in our top left corner, so a y position of \\`height\\` is our 'bottom'.\n* Its fill color is a function of the \\'sex\\' of its datum, as determined by our \\`color\\` scale.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"md`Our static visualization is officially complete! Note that this is displaying the population of a single decade and sex. In the next section, we will look at how we can incorporate _interaction_ into our visualization to allow users to change the filter being applied to the data. ` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"__bars_enter_namespace__.container.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"md`### Creating a dynamic visualization with Update`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2649,"value":"md`_namespace definition with everything we've created so far._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2398,"value":"__update_naive_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n const legend = cloneAndAppend(mutable legend, chart);\n \n const enterbars = cloneAndAppend(mutable enterbars, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n legend,\n enterbars\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2782,"value":"md`_and now we continue._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2646,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"function updateNaive(sex, step) {\n // Step 1\n state.year += step;\n state.sex = sex;\n const newData = census.filter(row => isYearAndSex(row, state.year, state.sex));\n \n // Step 2\n const bars = __update_naive_n__.chart.selectAll('.bar')\n .data(newData);\n \n // Step 3\n bars\n .transition('update')\n .duration(500)\n .attr('x', d => x(d.age_group))\n .attr('y', d => y(d.people))\n .attr('height', d => height - y(d.people))\n .attr('fill', d => color(d.sex));\n \n document.getElementById('curr-year-naive').textContent = state.year;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":853,"value":"__update_naive_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"viewof timeButtonsNaive = {\n const decrement = html``;\n decrement.onclick = () => {\n if (state.year > 1900) {\n updateNaive(state.sex, -10);\n }\n };\n \n const increment = html``;\n increment.onclick = () => {\n if (state.year < 2000) {\n updateNaive(state.sex, 10);\n }\n }\n \n \n const switchSexButton = html``;\n switchSexButton.onclick = () => updateNaive(state.sex === 2 ? 1 : 2, 0);\n \n const view = html`\n

\n ${decrement}\n \n ${state.year}\n \n ${increment}\n
\n ${switchSexButton}\n

\n`\n \n return view;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"md`We can now cycle through the decades of our dataset and switch the filtered sex!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"md`### Conveying temporal movement with Enter + Update + Exit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2663,"value":"md`_namespace definition with everything we've created so far._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2656,"value":"__update_better_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n const legend = cloneAndAppend(mutable legend, chart);\n \n const enterbars = cloneAndAppend(mutable enterbars, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n legend,\n enterbars\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2779,"value":"md`_and now we continue._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2660,"value":"md`While our simple \\`update\\` above covers the basics of interaction, there is room for improvement. Recall that the census is taken every 10 years. This means that a population that is 0-5 years old in one census reading will be 10-15 in the next. In our basic update implementation, this idea is hidden! Bars grow and shrink, but without knowledge of the dataset or careful attention, it would be otherwise unclear how the population is aging.\n\nWe can combine _enter_, _update_, and _exit_ to achieve this temporal encoding through animation. Here's how we'll do it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"md`_Step 1_. _Data_. Like before, modify our state and filter our data to match it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"md`_Step 3_. _Enter_. If we are stepping forward in time, our enter set will contain the age groups 0-5 and 5-10, as those people are yet to be born. We should append new bars for these datum and animate them in.\n\n~~~ js\n bars.enter()\n .append('rect')\n .attr('class', 'bar')\n .attr('x', d => x(d.age_group))\n .attr('y', d => y(0))\n .attr('width', x.bandwidth())\n .attr('height', 0)\n .attr('fill', d => color(d.sex))\n .on('mouseenter', function(d) {\n // show the tooltip on mouse enter\n updateBetterTip.show(d, this);\n d3.select(this).style('opacity', 0.7);\n })\n .on('mouseout', function(d) { \n // hide the tooltip on mouse out\n updateBetterTip.hide();\n d3.select(this).style('opacity', 1)\n })\n .transition('enter-transition')\n .duration(500)\n .attr('y', d => y(d.people))\n .attr('height', d => height - y(d.people))\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"md`\n_Step 4_. _Update_. For bars in our update set, we need to shift them over to the appropriate \\`x\\` position and adjust their height.\n\n~~~ js\n bars\n .transition('update-transition')\n .duration(500)\n .attr('x', d => x(d.age_group))\n .attr('y', d => y(d.people))\n .attr('height', d => height - y(d.people))\n .attr('fill', d => color(d.sex));\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"md`_Step 5_. _Exit_. If we are stepping forward in time, our exit set will contain the age groups 85-90 and 95+. We need to transition these out, as they will be replaced by the age groups 75-85 and 80-85 from the previous decade (note that the catch-all of a 95+ age group slightly breaks the analogy).\n\n~~~ js\n bars.exit()\n .transition('exit-transition')\n .duration(500)\n .attr('height', 0)\n .attr('y', y(0))\n .remove();\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":1025,"value":"__update_better_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"viewof timeButtonsBetter = {\n const decrement = html``;\n decrement.onclick = () => {\n if (state.year > 1900) {\n updateBetter(state.sex, -10);\n }\n };\n \n const increment = html``;\n increment.onclick = () => {\n if (state.year < 2000) {\n updateBetter(state.sex, 10);\n }\n }\n \n \n const switchSexButton = html``;\n switchSexButton.onclick = () => updateBetter(state.sex === 2 ? 1 : 2, 0);\n \n const view = html`\n

\n ${decrement}\n \n ${state.year}\n \n ${increment}\n
\n ${switchSexButton}\n

\n`\n \n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"md`This concludes our tour of the core ideas in D3! 🏄‍♀️🏄‍\n\nRead on to learn more about mouse events and other interaction techniques.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1696,"value":"md`## Other Interaction Techniques`","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"md`\n### Creating tooltips` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2680,"value":"md`_namespace definition with everything we've created so far._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2673,"value":"__tooltip_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n const legend = cloneAndAppend(mutable legend, chart);\n \n const enterbars = cloneAndAppend(mutable enterbars, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n legend,\n enterbars\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2776,"value":"md`_and now we continue._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2677,"value":"md`Making tooltips from scratch is usually difficult. Similar to legends, useful libraries like [\\`d3-tip\\`](https://github.com/Caged/d3-tip) can be handy.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"md`Import the library:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"d3Tip = require(\"d3-tip\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"md`Essentially, d3-tip is creating a carefully styled HTML element block for you. You will need to customize it in the following ways when creating the tooltip: \n1. Provide some style for the tooltip.\n2. Make an offset so the tip is on the top.\n3. Use \\`html\\` to set the html element you would like to display in the tooltip block. The input to the function \\`d\\` represents the underlying data of the mark, of which the tooltip is displaying the information.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"tip = d3Tip()\n .attr('class', \"d3-tip\")\n .style(\"color\", \"white\")\n .style(\"background-color\", \"black\")\n .style(\"padding\", \"6px\")\n .style(\"border-radius\", \"4px\")\n .style(\"font-size\", \"12px\")\n .offset([-10, 0])\n .html(function(d) { return `${d3.format(',')(d.people)} people`; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1174,"value":"md`_Tip:_ \\`d3.format()\\` can help you display number in a more human-friendly format. Check out more possible formats [here](https://github.com/d3/d3-format)!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"md`Add the tooltip to the figure with \\`call()\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"__tooltip_n__.container.call(tip);","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"__tooltip_n__.chart\n .selectAll('.bar')\n .on('mouseover', function(d) {\n // show the tooltip on mouse over\n tip.show(d, this);\n // when the bar is mouse-overed, we slightly decrease opacity of the bar.\n d3.select(this).style('opacity', 0.7);\n }) \n .on('mouseout', function(d) { \n // hide the tooltip on mouse out\n tip.hide();\n d3.select(this).style('opacity', 1)\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":2736,"value":"md`We also have to add these listeners to any bars we \\`append\\` in our update function (collapsed for space).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2718,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"md`Hover on the bars to see what's happening!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"__tooltip_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1720,"value":"viewof tooltipChartButtons = {\n const decrement = html``;\n decrement.onclick = () => {\n if (state.year > 1900) {\n updateTooltipChart(state.sex, -10);\n }\n };\n \n const increment = html``;\n increment.onclick = () => {\n if (state.year < 2000) {\n updateTooltipChart(state.sex, 10);\n }\n }\n \n \n const switchSexButton = html``;\n switchSexButton.onclick = () => updateTooltipChart(state.sex === 2 ? 1 : 2, 0);\n \n const view = html`\n

\n ${decrement}\n \n ${state.year}\n \n ${increment}\n
\n ${switchSexButton}\n

\n`\n return view;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"md`### Dynamic & clickable legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2692,"value":"md`_namespace definition with everything we've created so far._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2684,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":2846,"value":"md`_and now we continue_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2689,"value":"md`Since our visualizaton is only ever showing a single sex at any given point, it'd be helpful if:\n\n1. Our legend displayed the selected sex.\n2. Users were able to use the legend as a form of input to update our visualization.\n\n#### Displaying the selected sex\n\nRemember that our legend was bound to the data! When we (manually) created it, we bound it to the domain of our color scale. This means we can style it according to this data (as we have with its fill).\n\nWe can make the opacity of each rect a function of the data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1967,"value":"__dynamic_legend_n__.legend\n .selectAll('.legend-rect')\n .style('opacity', d => d === state.sex ? 1 : 0.5);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1908,"value":"md`And bold the text / modify its opacity similarly`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1958,"value":"__dynamic_legend_n__.legend\n .selectAll('.legend-text')\n .style('opacity', d => d === state.sex ? 1 : 0.5)\n .style('font-weight', d => d === state.sex ? 700 : 400);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1914,"value":"md`Our \\`update\\` function needs to apply these changes as well (collapsed for space).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1917,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1942,"value":"md`#### Adding click events to the legend\n\nTo invoke an update when a legend item is clicked, we introduce a 'click' event listener to the legend items. When an item is clicked, we update our visualization by passing in the bound sex and a step of 0.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1948,"value":"__dynamic_legend_n__.legend\n .on('click', d => updateLegendV2Chart(d, 0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1951,"value":"md`Finally, we change the cursor to be a 'pointer' over the legend.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1953,"value":"__dynamic_legend_n__.legend\n .style('cursor', 'pointer');","pinned":true,"hidden":false,"mode":"ojs"},{"id":1933,"value":"__dynamic_legend_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1940,"value":"viewof legendV2ChartButtons = {\n const decrement = html``;\n decrement.onclick = () => {\n if (state.year > 1900) {\n updateLegendV2Chart(state.sex, -10);\n }\n };\n \n const increment = html``;\n increment.onclick = () => {\n if (state.year < 2000) {\n updateLegendV2Chart(state.sex, 10);\n }\n }\n \n \n const switchSexButton = html``;\n switchSexButton.onclick = () => updateLegendV2Chart(state.sex === 2 ? 1 : 2, 0);\n \n const view = html`\n

\n ${decrement}\n \n ${state.year}\n \n ${increment}\n
\n ${switchSexButton}\n

\n`\n return view;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`## Imports & Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"function unique(array) {\n return array.filter((v, i) => array.indexOf(v) === i);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"import { printTable } from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2863,"value":"function cloneAndAppend(child, parent) {\n const childClones = [];\n \n child.each(function(p, j) {\n const original = d3.select(this);\n const cloneNode = original.node().cloneNode(true);\n const cloneSelection = d3.select(cloneNode);\n cloneSelection.datum(original.datum());\n \n cloneSelection.select('*'); // propogate data down.\n childClones.push(cloneNode);\n\n if (parent) {\n parent.node().appendChild(cloneNode);\n }\n });\n \n return d3.selectAll(childClones);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}