2e:null 2f:["$","title",null,{"children":"introdv.f18// Demo 1: Data, Select, Scale | christinaaaa | Observable"}] 34:T43d,md`--- ### Background Reading * D3 Concepts * [Official D3 Introduction](https://d3js.org/#introduction) * [Thinking with Joins](https://bost.ocks.org/mike/join/) * [General Update Pattern](https://bl.ocks.org/mbostock/3808218) * 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_ * [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 `35:[] 32:{"id":"5c243d5023015b4b","slug":"introdv-f18-demo-1-data-select-scale","title":"introdv.f18// Demo 1: Data, Select, Scale","thumbnail":"600f106e2071104d499e775877d5b3b8155ba0ec6192290b9fd16551b5eb045f","access_level":"public","create_time":"$D2018-10-07T19:14:54.042Z","update_time":"$D2018-10-07T19:14:54.042Z","view_time":null,"first_public_time":"$D2018-10-07T19:17:20.611Z","has_unpublished_edits":null,"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":"c1a481971a15d5ec","login":"christinaaaa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b6e33c12304166aeddcb53ad45806d702024a4a94913508ff371e85fd13b4250","tier":"starter_2024"},"version":730,"publish_version":730,"role":null,"authored":false,"authors":[{"type":"individual","id":"dd7208e68c7afe10","login":"christinaaaa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b6e33c12304166aeddcb53ad45806d702024a4a94913508ff371e85fd13b4250","tier":null}],"members":[{"type":"individual","id":"dd7208e68c7afe10","login":"christinaaaa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b6e33c12304166aeddcb53ad45806d702024a4a94913508ff371e85fd13b4250","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"introdv.f18// Demo 1: Data, Select, Scale","cells":[{"id":0,"value":"md`# introdv.f18// Demo 1: Data, Select, Scale\n\n*Part of [Fall 2018 W4995.004 Intro to Data Vis](https://columbiaviz.github.io/2018f_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","output":"$undefined","database":"$undefined"},{"id":335,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`Canvas:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`Basic Shapes:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":29,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`Text:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":156,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`Simple structures:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"arr = [ 5, 10, 15, 20, 25 ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`You can inline tiny CSV files:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":230,"value":"md`Or load hosted CSV files:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`Or call an external JSON API:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"nyt = d3.json(\"https://api.nytimes.com/svc/topstories/v2/home.json?api-key=436e4c0731324a5faa7741a58ba6adec\")\n// see https://developer.nytimes.com for API keys","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"headline = nyt.results[2].title","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":356,"value":"fadein = {\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\", 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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`D3 scales are functions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"scale = d3.scaleLinear()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":636,"value":"scale(2.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"md`\n\\`d3.scaleBand()\\` maps an ordinal input to a continuous range of uniform 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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":707,"value":"data.slice(2, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":715,"value":"arr.sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"data.sort((a, b) => a.value - b.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":725,"value":"arr.map(d => d^2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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. which we'll cover in future demos.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md`\n---\n\n## 6. Putting It All Together\n
\nWalk-through Mike Bostock's [Horizontal Bar Chart](https://beta.observablehq.com/@mbostock/d3-horizontal-bar-chart) example. (We'll cover axes next week!)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"