2b:null 2c:["$","title",null,{"children":"Demo 1: Data, Select, Scale | Columbia Dataviz Labs | Observable"}] 31:T4dd,md`--- ### Required Reading * D3 Concepts * [D3 Introduction on Observable](https://observablehq.com/collection/@d3/learn-d3) * [D3 In Depth: Data Joins](https://www.d3indepth.com/datajoins/) * Working in Observable * [Five-minute Introduction](https://beta.observablehq.com/@mbostock/five-minute-introduction) * [Introduction to Code](https://beta.observablehq.com/@mbostock/introduction-to-code) * [Introduction to Data](https://beta.observablehq.com/@mbostock/introduction-to-data) * _Optional_ * [Official D3 Project Page](https://d3js.org/) * [JavaScript Arrow \`=>\` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) reference * [JavaScript array methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype) reference * [\`d3-selection\`](https://github.com/d3/d3-selection) API reference * [\`d3-scale\`](https://github.com/d3/d3-scale) API reference * Tutorial on [D3 Scales and Color](http://www.jeromecukier.net/2011/08/11/d3-scales-and-color/) by Jerome Cukier * Textbook: [D3: Interactive Data Visualization for the Web](https://clio.columbia.edu/catalog/13137514) 2nd ed., Scott Murray, O’Reilly (2017) `32:[] 2f:{"id":"f8d9b7c67a2b8877","slug":"demo-1-data-select-scale","title":"Demo 1: Data, Select, Scale","thumbnail":"58a8522b9ca86bafd87ce7ed9ea43899a1ed1a4563aed8ef31d948c34e94f967","access_level":"public","create_time":"$D2022-01-19T17:23:30.685Z","update_time":"$D2022-01-19T17:39:26.849Z","view_time":null,"first_public_time":"$D2022-01-19T17:24:22.506Z","fork":{"id":"25fedec491545965","slug":"introdv-f18-demo-1-data-select-scale","title":"Demo 1: Data, Select, Scale","owner":{"id":"9c4c3824ea673370","login":"agness","name":"Agnes Chang"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8d9ed14129df54c9","login":"columbiaviz-labs","name":"Columbia Dataviz Labs","avatar_url":"https://avatars-next.observableusercontent.com/1b85e28c29c332ec9fe58275b755c8cd1e52e10997e56fe1d5ad47c0ec8a5eb2","tier":"starter_2024"},"version":889,"publish_version":889,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c183278c22a18e8","login":"columbiaviz-s22","name":"Columbia Dataviz Labs","avatar_url":"https://avatars-next.observableusercontent.com/1b85e28c29c332ec9fe58275b755c8cd1e52e10997e56fe1d5ad47c0ec8a5eb2","tier":null}],"members":[{"type":"individual","id":"9c183278c22a18e8","login":"columbiaviz-s22","name":"Columbia Dataviz Labs","avatar_url":"https://avatars-next.observableusercontent.com/1b85e28c29c332ec9fe58275b755c8cd1e52e10997e56fe1d5ad47c0ec8a5eb2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"3a7c0c686b1be2a6","slug":"dataviz-demos","title":"Dataviz Demos","owner":{"id":"8d9ed14129df54c9","login":"columbiaviz-labs","name":"Columbia Dataviz Labs"}},"type":"notebook","body":{"title":"Demo 1: Data, Select, Scale","cells":[{"id":0,"value":"md`# Demo 1: Data, Select, Scale\n\n*Part of [Spring 2022 W4995 Intro to Dataviz](https://columbiaviz.github.io/2022s_w4995), [CS @ Columbia](http://www.cs.columbia.edu/).*\n\nOverview of D3, data binding, how to draw [a bar chart](https://beta.observablehq.com/@mbostock/d3-horizontal-bar-chart).\n\nHow D3 works:\n- **Load** data into the browser’s memory\n- **Bind** data to elements within the document, creating new elements as needed\n- **Transform** those elements by interpreting each element’s bound datum and setting its visual properties accordingly\n- (*later*) **Transition** elements between states in response to user input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"md`---\n\n## 0. SVG primer\n
\nFirst things first:\n* SVG = Scalable Vector Graphics\n* SVG coordinate system has (0,0) at upper left`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"md`Canvas:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"md`Basic Shapes:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"md`Styling SVG\n* \\`fill\\`\n* \\`opacity\\`\n* \\`stroke\\`, \\`stroke-width\\`\n* \\`font-family\\`, \\`font-size\\` for text`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"md`Text:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"md`Layering:\n\nSVG does not support CSS \\`z-index\\` property (planned for SVG v2.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"md`\n---\n\n## 1. Loading Data\n
\nFirst things first, require the D3 library:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"d3 = require(\"d3@5\")\n// Old way still works though:\n// d3 = require(\"https://d3js.org/d3.v4.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"md`Simple structures:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"arr = [ 5, 10, 15, 20, 25 ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":672,"value":"data = [\n {key:'Apple', value: 5},\n {key:'Banana', value: 10},\n {key:'Blueberry', value: 25},\n {key:'Mango', value: 20},\n {key:'Orange', value: 15}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"md`You can inline tiny CSV files:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"population = d3.csvParse(`age,population\n<5,2704659\n5-13,4499890\n14-17,2159981\n18-24,3853788\n25-44,14106543\n45-64,8819342\n≥65,612463`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"md`Or load hosted CSV files:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"flare = d3.csv(\"https://gist.githubusercontent.com/mbostock/4063570/raw/11847750012dfe5351ee1eb290d2a254a67051d0/flare.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"md`Or call an external JSON API:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"nyt = d3.json(\"https://api.nytimes.com/svc/topstories/v2/home.json?api-key=CsL1ghbiApGAWc3sv2AcGXbbXyuAm2RF\")\n// see https://developer.nytimes.com for API keys","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"headline = nyt.results[2].title","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"md`\n---\n\n## 2. Binding Data with \\`enter\\`, \\`update\\`, \\`exit\\`\n
\nFirst let's make a chart object, then:\n- Draw 1 circle\n- Draw 1 circle per data point in \\`arr\\` defined above\n- Bind each circle radius to corresponding data value in \\`arr\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"binddemo = {\n const svg = d3.select(DOM.svg(1000, 100));\n \n // --- 1 circle\n svg.append(\"circle\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 50)\n .attr(\"r\", 25);\n \n // --- bind circle to data\n svg.selectAll(\"circle\")\n .data(arr)\n .enter().append(\"circle\")\n .attr(\"cx\", function(d, i) { return (i+1)*50; })\n .attr(\"cy\", 50)\n .attr(\"r\", function(d) { return d; })\n \n // --- ditto, with JS arrow function\n // svg.selectAll(\"circle\")\n // .data(arr)\n // .enter().append(\"circle\")\n // .attr(\"cx\", (d, i) => (i+1)*50 )\n // .attr(\"cy\", 50)\n // .attr(\"r\", d => d)\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"md`\nBreaking down the enter-append sequence:\n- \\`svg.selectAll(\"circle\")\\` at first returns \"empty\" state, because no circles exist yet.\n- [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) joins the data with our selected (empty) elements, returning a new selection that represents the \"update selection\": elements successfully bound to data. The \\`enter\\` (and \\`exit\\`) selections are defined under this, which we use to add or remove elements to correspond to the data. \n- [*selection*.enter](https://github.com/d3/d3-selection/blob/master/README.md#selection_enter) gets us the enter selection,\n- and finally missing elements are added by calling [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) on the enter selection. This adds a new circle for each data point to the SVG container.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":356,"value":"chart = {\n const svg = d3.select(DOM.svg(500, 100));\n\n svg.selectAll(\"circle\")\n .data(arr)\n .enter().append(\"circle\")\n .attr(\"cx\", (d, i) => (i+1)*50 )\n .attr(\"cy\", 50)\n .attr(\"r\", 0)\n .transition().duration(750)\n .attr(\"r\", d => d);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"md`Summary:\n* Instead of telling D3 *how* to do something, tell D3 *what* you want. Instead of instructing D3 to create circles, tell D3 that the selection \\`\"circle\"\\` should correspond to data. This concept is called the *data join*.\n* The data join is powerful. Later, we'll use the same data join to support dynamic visualizations with only minor modifications for *update* and *exit*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"md`\n---\n\n## 3. Labels\n
\nWe can make our chart more readable by labeling the shapes with text.\n- Use [*selection*.text](https://github.com/d3/d3-selection/blob/master/README.md#selection_text) to make make 1 SVG text element per data point\n- Set text styles, e.g. [*text*.text-anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor)\n- Bind each label to display corresponding string value in \\`data\\`\n- Group all our labels to apply shared attributes, through the SVG [\\`g\\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g) element\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"labeldemo = {\n const svg = d3.select(DOM.svg(1000, 100));\n\n svg.selectAll(\"circle\")\n .data(arr)\n .enter().append(\"circle\")\n .attr(\"cx\", (d, i) => (i+1)*50 )\n .attr(\"cy\", 50)\n .attr(\"r\", d => d);\n \n // --- how many labels?\n // svg.selectAll(\"text\")\n // .data(arr)\n // .enter().append(\"text\")\n // .attr(\"fill\", \"blue\")\n // .attr(\"x\", 30)\n // .attr(\"y\", 30)\n // .text(\"hi\");\n \n // svg.append(\"g\")\n // .attr(\"fill\", \"white\")\n // .attr(\"text-anchor\", \"middle\") // SVG attributes\n // .style(\"font\", \"1em sans-serif\") // CSS styles\n // .selectAll(\"text\")\n // .data(arr)\n // .enter().append(\"text\")\n // .attr(\"x\", (d, i) => (i+1)*50 )\n // .attr(\"y\", 50)\n // .attr(\"dy\", \"0.35em\")\n // .text(d => d);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"md`\n---\n\n## 4. Scales\n
\n[\\`d3-scale\\`](https://github.com/d3/d3-scale) transforms a number in a certain interval *domain* into a number in another interval *range*.\n* If you’re familiar with the concept of *normalization*, that is a specific case of linear *scale*, mapping a numeric value to a new value between 0 and 1. For example, with 365 days in the year, day number 310 maps to about 0.85, or 85% of the way through the year.\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"md`D3 scales are functions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":633,"value":"scale = d3.scaleLinear()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":655,"value":"md`Until we set a domain and range, this function maps input to output on a 1:1 scale.\n
\nNow try updating the function with \\`.domain([100, 500]).range([10, 350])\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":636,"value":"scale(2.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":764,"value":"md`\n\\`d3.scaleOrdinal()\\` maps from a set of discrete values to a set of visual attributes, e.g. colors.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":734,"value":"ordinalScale = d3.scaleOrdinal()\n .domain(['cat', 'dog', 'parrot', 'hamster'])\n .range(d3.schemePaired); // https://github.com/d3/d3-scale-chromatic#schemePaired","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":759,"value":"c = ordinalScale('parrot')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":749,"value":"html`

${c}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"md`\n\\`d3.scaleBand()\\` maps an ordinal input to a continuous range of uniform-width bands. (Most often used for bar charts with a categorical dimension.)\n\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":817,"value":"md`You can read more about scales at [d3 in Depth](https://d3indepth.com/scales/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":546,"value":"md`\n---\n\n## 5. Basic array manipulation\n
\nJavaScript comes with many powerful [array methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype) built-in, for example:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":704,"value":"md`\n[*array*.slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) extracts a section of the array.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":707,"value":"data.slice(2, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":699,"value":"md`[*\\\n array*.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sorts the elements of the array. The default sort order is according to string Unicode code points.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"arr.sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":711,"value":"data.sort((a, b) => a.value - b.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":701,"value":"md`[*array*.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) creates a new array with the result of calling a function on every element in the array.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":725,"value":"arr.map(d => d^2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":696,"value":"md`\nThe [\\`d3-array\\`](https://github.com/d3/d3-array) module contains additional methods for stats (max, min, etc.), search, transformations, etc. some of which we'll cover in future demos.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":773,"value":"md`\n---\n\n## 6. Axes\n
\nD3's axes are also functions, but unlike scales, do not return a value; rather axes functions generates the visual SVG elements, including lines, labels, and tick marks.\n\nD3's [\\`call()\\`](https://github.com/d3/d3-selection#selection_call) function acts upon a _selection_, invoking the specified _function_ once, passing in this selection. Then it returns this selection (and not the return value of the called _function_.) This is equivalent to invoking the function by hand but facilitates method chaining.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":836,"value":"arr2 = arr.map(x => x^2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":789,"value":"xScale = d3.scaleLinear()\n .domain([0, d3.max(arr2)])\n .range([50, (arr2.length+1)*50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":776,"value":"xAxis = function(g) {\n g\n // .attr(\"transform\", `translate(0,70)`)\n .call( \n d3.axisBottom(xScale)\n // .tickSize(20)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":792,"value":"axisdemo = {\n const svg = d3.select(DOM.svg(1000, 100));\n\n svg.selectAll(\"circle\")\n .data(arr2)\n .enter().append(\"circle\")\n .attr(\"cy\", 50)\n .attr(\"cx\", d => xScale(d) )\n .attr(\"r\", 3);\n \n svg.selectAll(\"text\")\n .data(arr2)\n .enter().append(\"text\")\n .attr(\"x\", d => xScale(d))\n .attr(\"y\", 40)\n .text(d => d);\n \n svg.append(\"g\")\n .call(xAxis);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":281,"value":"md`\n---\n\n## 7. Putting It All Together\n
\nWalk-through Mike Bostock's [Let's Make A Bar Chart](https://observablehq.com/@d3/lets-make-a-bar-chart?collection=@d3/lets-make-a-bar-chart) tutorial.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"