2f:null 30:["$","title",null,{"children":"Introduction to D3.js and Building a chart together | Giorgi Ghviniashvili | Observable"}] 35:T53c,{ const svg = d3 .create("svg") .attr("width", chartDimensions.width) .attr("height", chartDimensions.height); const chartGroup = svg .append("g") .attr( "transform", `translate(${chartDimensions.margin.left}, ${chartDimensions.margin.top})` ); // Draw y axis const yAxis = chartGroup.append("g").attr("transform", `translate(${0})`); yAxis.call(d3.axisLeft(yScale).tickFormat(d3.format("$,"))); // Draw x axis const xAxis = chartGroup .append("g") .attr("transform", `translate(${0},${chartInnerHeight})`); xAxis.call(d3.axisBottom(xScale)); // Draw area + line const area = d3 .area() .x((d) => xScale(new Date(d.Year, 0, 1))) .y1((d) => yScale(d.Price)) .y0(chartInnerHeight) .curve(d3.curveCardinal); const line = d3 .line() .x((d) => xScale(new Date(d.Year, 0, 1))) .y((d) => yScale(d.Price)) .curve(d3.curveCardinal); const areaSelection = chartGroup .selectAll("path.area") .data([data]) .join("path") .attr("d", area) .attr("class", "area") .attr("fill", "lightblue"); const lineSelection = chartGroup .selectAll("path.line") .data([data]) .join("path") .attr("d", line) .attr("class", "line") .attr("fill", "none") .attr("stroke", "blue"); return svg.node(); }36:[{"id":"2f62f8fff425bd43b39540d2b12e4f1ab25630c51ef8a29afc727e9a20e971b1c719f2b40458068fa68007cb436d5a65a719d65b40dc50333168732ff4aa61b8","href":"https://static.observableusercontent.com/files/2f62f8fff425bd43b39540d2b12e4f1ab25630c51ef8a29afc727e9a20e971b1c719f2b40458068fa68007cb436d5a65a719d65b40dc50333168732ff4aa61b8","name":"scale1.png","type":"image/png","lastModified":1724364991151.113,"size":8317},{"id":"8971a126486588976552d3623680459bee7f4b6bebf6c703a5340f49efd691e581ca546c36063ab3eda5f9d5d740b64cade3af41ec66bdac7c1d04e757653ca8","href":"https://static.observableusercontent.com/files/8971a126486588976552d3623680459bee7f4b6bebf6c703a5340f49efd691e581ca546c36063ab3eda5f9d5d740b64cade3af41ec66bdac7c1d04e757653ca8","name":"image@1.png","type":"image/png","lastModified":1724365351371.943,"size":49772},{"id":"3c1dc1cf32c0c7f68605d9ca86ad250b0860dec05cffa841b5b0edfdb60e3b67c5c9c04227d51e258a350ba78f4b1800ea78fe6891a81617707102247e33fd0b","href":"https://static.observableusercontent.com/files/3c1dc1cf32c0c7f68605d9ca86ad250b0860dec05cffa841b5b0edfdb60e3b67c5c9c04227d51e258a350ba78f4b1800ea78fe6891a81617707102247e33fd0b","name":"image@2.png","type":"image/png","lastModified":1724602003591.608,"size":476026}] 33:{"id":"c84f02e5f05afba4","slug":"introduction-to-d3-js-and-building-a-chart-togethe","title":"Introduction to D3.js and Building a chart together","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-08-22T21:50:05.953Z","update_time":"$D2024-09-09T20:14:06.084Z","view_time":null,"first_public_time":"$D2024-08-25T16:07:26.059Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a072e28fa6ba7108","login":"giorgi-ghviniashvili","name":"Giorgi Ghviniashvili","avatar_url":"https://avatars-next.observableusercontent.com/b624b114af61edb30c3cde2c45d2a17aa19bfa9f7e5e48169e3b0c0680ba77d1","tier":"starter_2024"},"version":433,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b3e040b79540575","login":"giorgi-ghviniashvili","name":"Giorgi Ghviniashvili","avatar_url":"https://avatars-next.observableusercontent.com/b624b114af61edb30c3cde2c45d2a17aa19bfa9f7e5e48169e3b0c0680ba77d1","tier":null}],"members":[{"type":"individual","id":"0b3e040b79540575","login":"giorgi-ghviniashvili","name":"Giorgi Ghviniashvili","avatar_url":"https://avatars-next.observableusercontent.com/b624b114af61edb30c3cde2c45d2a17aa19bfa9f7e5e48169e3b0c0680ba77d1","tier":null,"role":"editor"},{"type":"team","id":"a072e28fa6ba7108","login":"giorgi-ghviniashvili","name":"Giorgi Ghviniashvili","avatar_url":"https://avatars-next.observableusercontent.com/b624b114af61edb30c3cde2c45d2a17aa19bfa9f7e5e48169e3b0c0680ba77d1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Introduction to D3.js and Building a chart together","cells":[{"id":0,"value":"# Introduction to D3.js and Building a chart together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"D3 - Data Driven Documents is a low-level toolbox. It has no concept of “charts”. When you visualize data with D3, you compose a variety of primitives. \n\nTo create charts we need to use different d3 libraries. \n\nFor example, for bar chart, we need to use:\n\n- a **CSV parser or JSON loader** to load data.\n- a **band scale** for horizontal position (x),\n- a **linear scale** for vertical position (y),\n- an **ordinal scale** and **categorical scheme** for color,\n- **axes** for documenting the position encodings, and\n- **selections** for creating **SVG elements**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"### Let's get started with SVG elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"**SVG coordinate system**\n\n- Top left corner of the document is considered to be the point (0,0), or point of origin. \n- Positions are then measured in pixels from the top left corner, with the positive x direction being to the right, and the positive y direction being to the bottom.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"#### Draw a simple circle with svg","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"#### Draw 300 X 200 SVG and want to draw a blue 100X120 rectangle at (50, 50) coordinate: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"#### Draw a straight line from (10, 10) to (50, 50):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"#### Draw a curved line with element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"Draw a filled shape ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"#### <g> element is a container used to group other SVG elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":410,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"## Let's talk about scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"Scales map a dimension of abstract data to a visual representation. In the image below, Y axis **domain** [53.98, 636.23] is projected to axis **range** [0, 210] and X axis **domain** [26 Mar, 1 May] is projected to **range** [0, 530].","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":" $\"scale1.png\"$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"D3 has different scale types:\n\n- Linear scales - for quantitative data\n- Time scales - for time-series data\n- Pow scales - for quantitative data (that has a wide range)\n- Log scales - for quantitative data (that has a wide range)\n- Symlog scales - for quantitative data (that has a wide range)\n- Ordinal scales - for categorical or ordinal data\n- Band scales - for categorical or ordinal data as a position encoding\n- Point scales - for categorical or ordinal data as a position encoding\n- Sequential scales - for quantitative data as a sequential color encoding\n- Diverging scales - for quantitative data as a diverging color encoding\n- Quantile scales - for quantitative data as a discrete encoding\n- Quantize scales - for quantitative data as a discrete encoding\n- Threshold scales - for quantitative data as a discrete encoding\n\nBut we will be using Linear, ordinal and band scales for our examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":412,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"## Let's talk about chart axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":" $\"image@1.png\"$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"The axis component renders human-readable reference marks for position scales. It works with most scale types, including linear, log, band, and time scales as shown above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"## D3 selections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"A selection is a set of elements from the DOM. \n\nSelections allow powerful data-driven transformation of the document object model (DOM): set attributes, styles, properties, HTML or text content, and more. Using the data join’s enter and exit selections, you can also add or remove elements to correspond to data.\n\nMore powerful and data driven than **document.querySelector** or **document.getElementById**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"#### Selecting elements:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"```js\nd3.select(\"body\")\n .append(\"svg\")\n .attr(\"width\", 960)\n .attr(\"height\", 500)\n .append(\"g\")\n .attr(\"transform\", \"translate(20,20)\")\n .append(\"rect\")\n .attr(\"width\", 920)\n .attr(\"height\", 460);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"### Modifying elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"```js\nd3.selectAll(\"p\")\n .attr(\"class\", \"graf\")\n .style(\"color\", \"red\");\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"D3 selections are data driven. We can attach data to html elements using d3 selection and we can handle any data updates: removal, addition or updating existing elements. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"Attaching data to div elements \n\n```js\nconst data = [\n {name: \"Locke\", number: 4},\n {name: \"Reyes\", number: 8},\n {name: \"Ford\", number: 15},\n {name: \"Jarrah\", number: 16},\n {name: \"Shephard\", number: 23},\n {name: \"Kwon\", number: 42}\n];\n\nconst selection = d3.select(\".chart\").selectAll(\"div\").data(data)\n```\n\nSelects all div elements in .chart and attaches data to them. \n\nTo add div elements to the DOM, we need to call join function.\n\nconst divs = selection.join(\"div\")","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"#### Add div elements ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"{\n const data = [\n {name: \"Locke\", number: 4},\n {name: \"Reyes\", number: 8},\n {name: \"Ford\", number: 15},\n {name: \"Jarrah\", number: 16},\n {name: \"Shephard\", number: 23},\n {name: \"Kwon\", number: 42}\n ];\n\n const chart = d3.create(\"div\").attr(\"class\", \"chart\")\n const selection = chart.selectAll(\"div\").data(data)\n selection.join(\"div\").text(d => d.name)\n return chart.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"**Note: If .chart container is not empty and has more div elements than data, join function will remove other divs and only keep those 6.** \n\nD3 will always have exact same number of elements as data because it is data driven.\n\nTo modify elements that are going to be removed we can use .exit selection. Let's say we want to do a fade animation. \n\n```JS\n// Make div's opacity 0 before removing it\nconst exited = selection.exit().attr(\"opacity\", 0).remove()\n```\n\nTo modify only new elements, we can use .enter selection. \n\n```JS\n// Make div's initial width 100px\nconst exited = selection.enter().append(\"div\").attr(\"width\", 100)\n```\n\nNew: Or simply pass three update logic to join function:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"{\n // Hav 6 users initially in the DOM\n const usersList = d3.create(\"div\").html(\n `

User 1

User 2

User 3

User 4

User 5

`\n )\n\n const data = [\n {name: \"Locke\", number: 4},\n {name: \"Reyes\", number: 8},\n {name: \"Ford\", number: 15},\n ];\n\n // Attaching new data, with identification `name`\n const selection = usersList.selectAll(\"div\").data(data, d => d?.name)\n\n // Here is where the magic happens\n selection.join(\n enter => enter.append(\"div\").text(d => d.name), // Add new nodes\n update => update.text(d => d.name), // Update existing ones\n exit => exit.transition().duration(500).delay(1000).style(\"color\", \"red\").remove() // Do transition for old elements before removal\n )\n \n return usersList.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"#### Let's build an area chart together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"#### Median Home Price in Washington. source [ofm.wa.gov](https://ofm.wa.gov/washington-data-research/statewide-data/washington-trends/economic-trends/median-home-price)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"data = d3.csvParse(`Year,Price\n2023,613000\n2022,647900\n2021,560400\n2020,452400\n2019,397900\n2018,362100\n2017,348900\n2016,315900\n2015,289100\n2014,267600\n2013,253800\n2012,236600\n2011,223900\n2010,246300\n2009,250400\n2008,284400\n2007,309600\n2006,293800\n2005,260900\n2004,225000\n2003,203800`, d3.autoType).slice().sort((a, b) => a.Year - b.Year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"chartDimensions = ({\n width: width,\n height: 500,\n margin: {\n top: 10,\n right: 10,\n bottom: 40,\n left: 60\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"chartInnerHeight = chartDimensions.height - chartDimensions.margin.top - chartDimensions.margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"chartInnerWidth = chartDimensions.width - chartDimensions.margin.left - chartDimensions.margin.right\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"xScale = d3.scaleTime()\n .domain([new Date(2003, 0, 1), new Date(2023, 0, 1)])\n .range([0, chartInnerWidth]).clamp(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.Price)])\n .range([chartInnerHeight, 0]).clamp(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"

Median Home Price in Washington

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":315,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"#### Create hierarchical circle pack visualization using d3.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":390,"value":"![image@2.png](${await FileAttachment(\"image@2.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":398,"value":"#### Other uses of D3.js beyond data visualizations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"- number and date formatting\n- data grouping using d3.group and d3.rollup\n- fetch and parse data using d3.dsv, d3.csv, d3.json\n- working with hierarchical data structure using d3.hierarchi\n- using scales to manipulate colors\n- doing animations/transitions easily","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"