25:["$","title",null,{"children":"D3 Lab 1 - D3 Basics | visualization | Observable"}] 49:T85c,--- ## Scalable Vector Graphics (SVG) - Introduction Overall: - SVG used to define vector-based graphics for the Web - SVG defines the graphics in XML format - Every element and every attribute in SVG files can be animated Lets go through each point: ### Graphics Format

#### Advantage As the SVG is using Vector Graphics, it can be adjustable to the desired screen/document resolution. ### XML format An XML file is an extensible markup language file that structures data for storage and transport. It simply consists of tags and text. - [Example 1](https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_myfirst) #### Tags Explanation - **Tags in general are keywords used by the language** - here we see two tags `
b. Open the notebook link provided in Slack.
c. Fork the notebook.
## What is Observable? In this course, we will be utilizing Observable, a programming environment specifically designed for creating visualizations, to share our prepared examples and tutorials with you. This environment is ideal for learning how to build visualizations using D3, as it allows you to easily debug and iteratively develop your visualizations by displaying the output of each cell. Additionally, Observable provides a few helpful libraries that will be utilized throughout the tutorial. Towards the end of the course, we will discuss how you can use an HTML file to load your D3.JS code, but rest, the D3 code won't change much. ## About Observable - **Can be easily shared.** - **The cell has 3 types**: - Markdown (for texts) - JavaScript - HTML - **Cells are separate scripts**: Local variables are only visible to the cell that defines them. - **Cells run in topological order**: Unliked Jupitar notebook, which runs from top to bottom, [observable is different](https://observablehq.com/@observablehq/how-observable-runs) - **Cells re-run when any referenced cell changes.** - **Statements need curly braces, and return.**
More can be found [here](https://observablehq.com/@observablehq/observable-javascript)
We will see more helpful features as we go in the tutorial.4b:T6a4,// TODO in class { const svg = d3.create('svg').attr('width', 500).attr('height', 170); //Example 1 const group = svg.append('g') .attr('transform', 'translate(100,0) rotate(90)') .attr('stroke-width', 1) .attr('stroke', 'brown'); group.append('rect') //Modifications .attr('x', 10) .attr('y', 10) .attr('rx', 5) .attr('ry', 5) //Done .attr('width', 150) .attr('height', 20) .attr('fill', 'lightseagreen') group.append('rect') //Modifications .attr('x', 10) .attr('y', 40) .attr('rx', 5) .attr('ry', 5) //Done .attr('width', 150) .attr('height', 20) .attr('fill', 'salmon') group.append('rect') //Modifications .attr('x', 10) .attr('y', 70) .attr('rx', 5) .attr('ry', 5) //Done .attr('width', 150) .attr('height', 20) .attr('fill', 'bisque') //Example 2 const group2 = svg.append('g') .attr('transform', 'translate(200,0) rotate(90)') .attr('stroke-width', 1) .attr('stroke', 'black'); group2.append('rect') //Modifications .attr('x', 10) .attr('y', 10) .attr('rx', 5) .attr('ry', 5) //Done .attr('width', 150) .attr('height', 20) .attr('fill', 'lightseagreen') group2.append('rect') //Modifications .attr('x', 10) .attr('y', 40) .attr('rx', 5) .attr('ry', 5) //Done .attr('width', 150) .attr('height', 20) .attr('fill', 'salmon') group2.append('rect') //Modifications .attr('x', 10) .attr('y', 70) .attr('rx', 5) .attr('ry', 5) //Done .attr('width', 150) .attr('height', 20) .attr('fill', 'bisque') return svg.node(); }4c:T59d,//TODO they should write the line logic on their own // https://www.w3schools.com/graphics/svg_path.asp { const svg = d3.create('svg').attr('width', 500).attr('height', 450); svg.append('path').attr('d', 'M 100 350 l 150 -300').attr('stroke', 'red').attr('stroke-width', 3).attr('fill', 'none'); svg.append('path').attr('d', 'M 250 50 l 150 300').attr('stroke', 'red').attr('stroke-width', 3).attr('fill', 'none'); svg.append('path').attr('d', 'M 175 200 l 150 0').attr('stroke', 'green').attr('stroke-width', 3).attr('fill', 'none'); svg.append('path').attr('d', 'M 100 350 q 150 -300 300 0').attr('stroke', 'blue').attr('stroke-width', 3).attr('fill', 'none'); const group_points = svg.append('g').attr('stroke-width', 3).attr('fill', 'black'); group_points.append('circle').attr('cx', '100').attr('cy', '350').attr('r', 5); group_points.append('circle').attr('cx', '250').attr('cy', '50').attr('r', 5); group_points.append('circle').attr('cx', '400').attr('cy', '350').attr('r', 5); const group_label = svg.append('g').attr('fill', 'black').attr('font-family', 'sans-serif').attr('stroke', 'none').attr('text-anchor','middle'); group_label.append('text').attr('x', 100).attr('y', 350).attr('dx', -30).text("A"); group_label.append('text').attr('x', 250).attr('y', 50).attr('dy', -10).text("B"); group_label.append('text').attr('x', 400).attr('y', 350).attr('dx', 30).text("C"); return svg.node(); }4d:T68b,{ let group_number = 0; let test = 100; const svg = d3.create('svg') .attr('width', 800) .attr('height', 140); // each group has a different margin point const circles_1 = svg.append('g').attr('class', 'groups_example').attr('transform', 'translate(0,70)'); const circles_2 = svg.append('g').attr('class', 'groups_example').attr('transform', 'translate(350,70)'); circles_1.append('circle') .attr('cx', 120) .attr('r', 25) .attr('fill', 'palevioletred'); circles_1.append('circle') .attr('cx', 240) .attr('r', 25) .attr('fill', 'palevioletred'); circles_2.append('circle') .attr('cx', 120) .attr('r', 25) .attr('fill', 'palevioletred'); circles_2.append('circle') .attr('cx', 240) .attr('r', 25) .attr('fill', 'palevioletred'); //New part svg.selectAll('circle') // select all circles from all groups .attr('fill', 'sandybrown') // Fill with orange instead of pink .attr('stroke', 'sienna') .attr('r', 50); // set the radius of all circles //Second new part - using functions // svg.selectAll('g.groups_example') // .append('text', 'circle') // .text(function() { // let current_group_number = group_number; // group_number += 1; // return ("G" + current_group_number); // }); svg.selectAll('circle') // select all circles from all groups .style('fill', 'teal') // Fill with orange instead of pink .attr('r', function() { // Add a function to change the circle radius return 10 + Math.random() * 40; }); // return the outer SVG element for Observable to render it return svg.node(); }4e:T44d,{ // create our outer SVG element and select it const svg = d3.create('svg') .attr('width', 500) .attr('height', 300); // create one group for each row of circles const rows = svg.selectAll('g') .data(circleGrid) .join('g') // set the y position and color for each row .attr('transform', r => "translate(0,"+ r.y + ")") // .attr('transform', function (r) { // return "translate(0,"+ r.y + ")"; //.attr('transform', row => `translate(0,${row.y})`) // }) .attr('fill', a => a.color); // add one text label to each row rows.append('text') .attr('font-family', 'sans-serif') .attr('y', -30) .text(d => d.label) // we need to do another data join to add the circles for each row rows.selectAll('circle') // row.circles contains the array circles for the row .data(a => a.circles) .join('circle') .attr('fill', circ => circ.color) .attr('cx', circ => circ.x) .attr('r', circ => circ.radius); // return the outer SVG element in order to render it return svg.node(); }4f:T4c2,

Scales with continuous input and continuous output

Type	Function	Description
Linear Scale	`scaleLinear()`	They use a linear function (y = m * x + b) to interpolate across the domain and range.
Power Scale	`scalePow()`	The power scale interpolates using a power (y = m * x^k + b) function. The exponent k is set using `exponent()`.
Squareroot Scale	`scaleSqrt()`	The scaleSqrt scale is a special case of the power scale (where k = 0.5).
Log Scale	`scaleLog()`	Log scales interpolate using a log function (y = m * log(x) + b).
Time Scale	`scaleTime()`	scaleTime is similar to scaleLinear, except the domain is expressed as an array of dates.
Sequential Scale	`scaleSequential()`	scaleSequential is used for mapping continuous values to an output range that is determined by a preset (or custom) interpolator.

50:T4b4,{ let myData = [new Date(2020, 2, 1), new Date(2020, 8, 1),new Date(2021, 5, 25), new Date(2022, 10, 3), new Date(2023, 5, 6)] let timeScale = d3.scaleTime() .domain([new Date(2020, 0, 1), new Date(2023, 7, 16)]) .range([0, 700]); let sequentialScale = d3.scaleSequential() .domain([new Date(2020, 0, 1), new Date(2023, 7, 16)]) .interpolator(d3.interpolateRainbow); //interpolateViridis //Names of the months are wrong, because month starts from 0 let convertDateToString = d3.timeFormat("%b %d, %Y") //("%Y-%m-%d") const svg = d3.create('svg') .attr('width', 760) .attr('height', 40); svg.selectAll('circle') .data(myData) .join('circle') .attr('r', 10) .attr('fill', function(a){ return sequentialScale(a) }) .attr('cy', 10) .attr('cx', function(a) { return timeScale(a); }); svg.selectAll('text') .data(myData) .join('text') .attr('y', 35) .attr('font-size', "11px") .attr('fill', "black") .attr('x', function(a) { return timeScale(a)-28; }) .text(d => convertDateToString(d)) // return the outer SVG element for Observable to render it return svg.node(); }51:Tb8a, { const svg = d3.create('svg') .attr('width', 760) .attr('height', 250); let linearScale = d3.scaleLinear().domain([0, 100]).range([0, 500]); let sqrtScale = d3.scaleSqrt().domain([0, 100]).range([0, 500]); let logScale = d3.scaleLog().domain([10, 1000]).range([0, 500]); let timeScale = d3.scaleTime() .domain([new Date(2020, 0, 1), new Date(2020, 5, 1)]) .range([0, 500]); let bandScale = d3.scaleBand() .domain(['Mon', 'Tue', 'Wed', 'Thu', 'Fri']) .range([0, 500]); let pointScale = d3.scalePoint() .domain(['Mon', 'Tue', 'Wed', 'Thu', 'Fri']) .range([0, 500]); let axis = d3.axisBottom(); let groupLinear = svg.append('g').attr('class', 'axis_groups').attr('transform', 'translate(10, 10)'); let groupSqrt = svg.append('g').attr('class', 'axis_groups').attr('transform', 'translate(10, 50)'); let groupLog = svg.append('g').attr('class', 'axis_groups').attr('transform', 'translate(10, 90)'); let groupTime = svg.append('g').attr('class', 'axis_groups').attr('transform', 'translate(10, 130)'); let groupBand = svg.append('g').attr('class', 'axis_groups').attr('transform', 'translate(10, 170)'); let groupPoint = svg.append('g').attr('class', 'axis_groups').attr('transform', 'translate(10, 210)'); svg.selectAll("g.axis_groups").attr('font-size', '11px').attr("text-anchor", "end"); axis.scale(linearScale); groupLinear.append('text').text('Linear Scale').attr('x', 55); groupLinear.append('g').call(axis).attr('transform', 'translate(80, -5)'); axis.scale(sqrtScale); groupSqrt.append('text').text('Square Scale').attr('x', 55); groupSqrt.append('g').call(axis).attr('transform', 'translate(80, -5)'); axis.scale(logScale); groupLog.append('text').text('Log Scale').attr('x', 55); groupLog.append('g').call(axis).attr('transform', 'translate(80, -5)'); axis.scale(timeScale); groupTime.append('text').text('Time Scale').attr('x', 55); groupTime.append('g').call(axis).attr('transform', 'translate(80, -5)'); axis.scale(bandScale); groupBand.append('text').text('Band Scale').attr('x', 55); groupBand.append('g').call(axis).attr('transform', 'translate(80, -5)'); axis.scale(pointScale); groupPoint.append('text').text('Band Scale').attr('x', 55); groupPoint.append('g').call(axis).attr('transform', 'translate(80, -5)'); //Wrong way of calling the group //axis.scale(linearScale); //d3.select('svg g').call(axis).attr('stroke', 'black'); //Why multiple groups is better - to adjust the transformation seperatly in this case //let group = svg.append('g'); //axis.scale(linearScale); //group.append('text').text('Linear Scale'); //group.append('g').call(axis).attr('stroke', 'black').attr('transform', 'translate(10, 10)'); //axis.scale(sqrtScale); //group.append('text').text('Linear Scale'); //group.append('g').call(axis).attr('stroke', 'black').attr('transform', 'translate(10, 50)'); return svg.node(); }52:T82e,## Loading Data In Observable Files need to be attached to Observable and it can be attached directly or by using the clouds (only available for private notebooks). [comment]: <> (Demonstration || All datasets should be included in a zip file in slack) **Type of Datasets** - CSV - JSON You can use the following easy ways of loading data in your notebook for analysis and visualization. - **Load Inline** - If you want to load a small amount of data, you can embed it in your notebook as code. This can be done using the above mentioned javascript objects or arrays. - **Load Files** - If you want largr amounts of data, you can load files (of less than 15 MB). These files are private to the notebook. This notebook should have a CSV file of Population of Saudi Arabia (Found in Slack). it can be attached by: - Using the ${keyStyled("Shift-Cmd-U")} [keyboard shortcut](/@observablehq/keyboard-shortcuts) - Dragging and dropping a file onto the file attachments pane, which is accessible through the notebook menu or by clicking the paperclip above.53:T768,{ let allYears = Array.from({length:populationEstimatePerYear.length},(v,k)=>populationEstimatePerYear[k].year); let minYear = d3.min(populationEstimatePerYear, function(d) { return d.year; }); let maxYear = d3.max(populationEstimatePerYear, function(d) { return d.year; }); let minPopulation = d3.min(populationEstimatePerYear, function(d) { return d.population; }); let maxPopulation = d3.max(populationEstimatePerYear, function(d) { return d.population; }); let maxWidth = 1000; let maxHeight = 200; let margin = {top: 10, right: 30, bottom: 30, left: 100}; const svg = d3.create('svg') .attr('width', maxWidth) .attr('height', maxHeight); // X axis const xAxis = d3.scaleBand() .domain(populationEstimatePerYear.map(d => d.year)) // data .range([0, maxWidth - margin.left - margin.right]) // Axis length .padding(0.15); svg.append("g") .attr("transform", "translate(" + margin.left + "," + (maxHeight - margin.bottom) + ")") //position .call(d3.axisBottom().scale(xAxis).ticks(uniqueListOfYears.size).tickFormat(d3.format("d"))); // adding axis to the group // Y axis const yAxis = d3.scaleLinear() .domain([minPopulation, maxPopulation]) .range([maxHeight - margin.bottom, margin.top]) .nice(); svg.append("g") .attr("transform", "translate(" + margin.left + "," + 0 + ")") .call(d3.axisLeft().scale(yAxis).tickFormat(d3.format("d"))); svg.append("g") .attr("transform", "translate(" + margin.left + "," + 0 + ")") .attr("fill", "salmon") .selectAll("rect") .data(populationEstimatePerYear) .join("rect") .attr("x", d => xAxis(d.year)) .attr("y", d => yAxis(d.population)) .attr("height", d => (maxHeight - margin.bottom) - yAxis(d.population)) .attr("width", xAxis.bandwidth()) return svg.node(); }54:T815,{ let allYears = Array.from({length:populationEstimatePerYear.length},(v,k)=>populationEstimatePerYear[k].year); let minYear = d3.min(populationEstimatePerYear, function(d) { return d.year; }); let maxYear = d3.max(populationEstimatePerYear, function(d) { return d.year; }); let minPopulation = d3.min(populationEstimatePerYear, function(d) { return d.population; }); let maxPopulation = d3.max(populationEstimatePerYear, function(d) { return d.population; }); console.log(minPopulation); console.log(maxPopulation); let maxHeight = 400; let maxWidth = 1000; let margin = {top: 10, right: 30, bottom: 30, left: 100}, width = maxWidth - margin.left - margin.right, height = maxHeight - margin.top - margin.bottom; let colorsScale = d3.scaleSequential() .domain([minYear, maxYear]) .interpolator(d3.interpolateViridis); const svg = d3.create('svg') .attr('width', maxWidth) .attr('height', maxHeight); // X axis const xAxis = d3.scaleLinear() .domain([minPopulation, maxPopulation]) .range([margin.left , maxWidth - margin.right]) .nice(); svg.append("g") .attr("transform", "translate(" + 0 + "," + (maxHeight - margin.bottom) + ")") .call(d3.axisBottom().scale(xAxis).tickFormat(d3.format("d"))); // Y axis const yAxis = d3.scaleBand() .domain(populationEstimatePerYear.map(d => d.year)) .range([0, maxHeight - margin.bottom]) .padding(0.15); svg.append("g") .attr("transform", "translate(" + margin.left + "," + 0 + ")") .call(d3.axisLeft().scale(yAxis).tickFormat(d3.format("d"))); svg.append("g") //.attr("transform", "translate(" + margin.left + "," + 0 + ")") .selectAll("rect") .data(populationEstimatePerYear) .join("rect") .attr('fill', function(a){ return colorsScale(a.year) }) .attr("x", margin.left) .attr("y", (d) => yAxis(d.year)) .attr("width", (d) => xAxis(d.population) - (margin.left + margin.right)) .attr("height", yAxis.bandwidth()); return svg.node(); }55:T6e5,{ let allYears = Array.from({length:populationEstimatePerYear.length},(v,k)=>populationEstimatePerYear[k].year); let minYear = d3.min(populationEstimatePerYear, function(d) { return d.year; }); let maxYear = d3.max(populationEstimatePerYear, function(d) { return d.year; }); let minPopulation = d3.min(populationEstimatePerYear, function(d) { return d.population; }); let maxPopulation = d3.max(populationEstimatePerYear, function(d) { return d.population; }); let margin = {top: 10, right: 30, bottom: 30, left: 100}, width = 760 - margin.left - margin.right, height = 250 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', 1000) .attr('height', 200); // X axis const x = d3.scaleBand() .domain(populationEstimatePerYear.map(d => d.year)) .range([0, width - margin.right]) .padding(0.15); svg.append("g") .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")") .call(d3.axisBottom().scale(x).ticks(uniqueListOfYears.size).tickFormat(d3.format("d"))); // Y axis const y = d3.scaleLinear() .domain([minPopulation, maxPopulation]) .range([height - margin.bottom, margin.top]) .nice(); svg.append("g") .attr("transform", "translate(" + margin.left + "," + 0 + ")") .call(d3.axisLeft().scale(y).tickFormat(d3.format("d"))); svg.append("path") .attr("transform", "translate(" + margin.left + "," + 0 + ")") .datum(populationEstimatePerYear) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", d3.line() .x(function(d) { return x(d.year) }) .y(function(d) { return y(d.population) }) ); return svg.node(); }56:T61a,{ let minPopulation = d3.min(populationEstimatePerYear, function(d) { return d.population; }); let maxPopulation = d3.max(populationEstimatePerYear, function(d) { return d.population; }); let minYear = d3.min(populationEstimatePerYear, function(d) { return d.year; }); let maxYear = d3.max(populationEstimatePerYear, function(d) { return d.year; }); let maxHeight = 400; let maxWidth = 1000; let margin = {top: 10, right: 30, bottom: 30, left: 100}, width = maxWidth - margin.left - margin.right, height = maxHeight - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const xScale = d3.scaleLinear() .domain(d3.extent(populationEstimatePerYear, d => d.year)) .range([margin.left, maxWidth - margin.right]); const yScale = d3.scaleLinear() .domain([minPopulation, maxPopulation]) .range([maxHeight - margin.bottom, margin.top]) .nice(); const xAxis = d3.axisBottom(xScale).tickFormat(d3.format("d")); const yAxis = d3.axisLeft(yScale); svg.append('g') .attr("transform", "translate(" + 0 + "," + (maxHeight - margin.bottom) + ")") .call(xAxis); svg.append('g') .attr("transform", "translate(" + margin.left + "," + 0 + ")") .call(yAxis); svg.append('g') .selectAll('circle') .data(populationEstimatePerYear) .enter() .append('circle') .attr('cx', d => xScale(d.year)) .attr('cy', d => yScale(d.population)) .attr('r', 5) .attr('fill', 'steelblue'); return svg.node(); }57:T4f6,--- # Resources - [Markdown Basic Syntax](https://www.markdownguide.org/basic-syntax/) - [D3 for the Impatient by Philipp K. Janert](https://learning.oreilly.com/library/view/d3-for-the/9781492046783/) - [Observable - Documentation](https://observablehq.com/collection/@observablehq/documentation) - [W3 SVG](https://www.w3.org/TR/SVG/struct.html) - [SVG Tutorial](https://jenkov.com/tutorials/svg/index.html) - [W3Schools - SVG Tutorial](https://www.w3schools.com/graphics/svg_intro.asp) - [D3 in Depth](https://www.d3indepth.com/introduction/) - [Learn D3 by Example](https://observablehq.com/@d3/learn-d3-by-example) - [D3 Colors](https://codepen.io/bagaski/full/RwKvybw) - [D3 Working with Colors](https://observablehq.com/collection/@d3/d3-color) - [Color Schemes](https://observablehq.com/@d3/color-schemes) - [D3.js Tutorials Points](https://www.tutorialspoint.com/d3js/index.htm) - [D3 Graph Gallery](https://d3-graph-gallery.com/) ## The tutorial is inspired from: - [D3 Introduction Collection](https://observablehq.com/@nyuvis/d3-introduction?collection=@nyuvis/guides-and-examples) - [D3 Tutorials](https://observablehq.com/@uvizlab/d3-tutorial-1-introduction-to-observable) - [25 Days of D3](https://observablehq.com/collection/@thetylerwolf/25-days-of-d3)58:[{"id":"39f8e3e984a398e518e8824c3b584f185588bc4a8cc72ae094166bb65e431718d7db2ba06aa76ee5100a2c7e73b6c56817298bb60da2a0e347c3d75bd309f0b8","href":"https://static.observableusercontent.com/files/39f8e3e984a398e518e8824c3b584f185588bc4a8cc72ae094166bb65e431718d7db2ba06aa76ee5100a2c7e73b6c56817298bb60da2a0e347c3d75bd309f0b8","name":"population.csv","type":"text/csv","lastModified":1688878844059.97,"size":23066},{"id":"cef6ecdfee140b2dd637edbf94b3a4feb74d2c2273a127d1b58e913e07f58c1f63bc0e612ebc4df16fbd99014ad89638b7bfe3d23871487179e0b33a2b109d63","href":"https://static.observableusercontent.com/files/cef6ecdfee140b2dd637edbf94b3a4feb74d2c2273a127d1b58e913e07f58c1f63bc0e612ebc4df16fbd99014ad89638b7bfe3d23871487179e0b33a2b109d63","name":"axis.png","type":"image/png","lastModified":1689052368309.479,"size":14586}] 29:{"id":"46442ac2f43780fb","slug":null,"title":"D3 Lab 1 - D3 Basics","thumbnail":"f353fbc53e48579af2a5ccec4afb5da7e2fb95307b2cb851225cccf733a01821","access_level":"public","create_time":"$D2023-07-05T07:25:37.820Z","update_time":"$D2023-07-19T07:16:27.445Z","view_time":null,"first_public_time":"$D2023-07-05T07:25:37.820Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"f1a0ce40d74c0abe","login":"vccvis","name":"visualization","avatar_url":"https://avatars-next.observableusercontent.com/cde86b79b2fec625fe4da60738ba8a70b39754fb935077f3fb1e519d84eda5c4","tier":"starter_2024","bio":"","following":false},"version":1957,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ac15f3af09588c2c","login":"amaniageeli","name":"Amani Ageeli","avatar_url":"https://avatars-next.observableusercontent.com/74fa389a3a96551d63a64d00d9d14bf552db4ffc6a0609868e2098bc08900200","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"ac15f3af09588c2c","login":"amaniageeli","name":"Amani Ageeli","avatar_url":"https://avatars-next.observableusercontent.com/74fa389a3a96551d63a64d00d9d14bf552db4ffc6a0609868e2098bc08900200","tier":null,"role":"editor"},{"type":"team","id":"f1a0ce40d74c0abe","login":"vccvis","name":"visualization","avatar_url":"https://avatars-next.observableusercontent.com/cde86b79b2fec625fe4da60738ba8a70b39754fb935077f3fb1e519d84eda5c4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Lab 1 - D3 Basics","cells":[{"id":0,"value":"# D3 Lab 1 - D3 Basics\n###### By:Amani Ageeli, Reem Alghamdi, Xingdi Zhang and Markus Hadwiger @KAUST - Use Slack for any questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## Introduction\nD3.js (or just D3, for Data-Driven Documents) is a JavaScript library for manipulating the web elements in order to represent information visually. D3 gives us complete control over the visualizations that we make unlike other libraries. In addition, D3's popularity and wide-spread use makes it a good skill for a data visualization developer to have.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1843,"value":"---\n## objectives\n- Get basic understanding of D3 elements.\n- Comprehend D3 code samples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"---\n## D3 vs Vega-lite\n\n- As seen in the previous week, Vega is a visualization grammar which provides the basic building blocks for a huge range of visualizations.\n- Vega-lite is built ontop of D3.\n- D3 gives the user complete freedom to build and customize everything in the plots, but this comes at the cost of increased complexity.\n\nGenerally speaking, Vega-Lite is a good option for quick plots, while D3 is good for a more customized designs and animations. Examples:\n- https://observablehq.com/@nolanbjohnson/vega-lite-and-d3-comparison-bar-chart\n- https://observablehq.com/@will-r-chase/voronoi-treemap\n- https://observablehq.com/@d3/stacked-to-grouped-bars","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"---\n## D3 Basics\nD3 is a web technology using Javascript, and relies on a collection of other web technologies:\n- The Document Object Model (DOM) API and event model.\n- Cascading Style Sheet (CSS) selectors and properties.\n- The JavaScript object model.\n- Scalable Vector Graphics (SVG).\n\n

\n\nHowever, as we are using Observable, the code is going to be slightly different as Observable has it's own set of functions that we can use. We are going to see some differences in the following days.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1779,"value":"---\n## Javascript\n[Basics of Javascript](https://observablehq.com/@nyuvis/javascript-basics)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"---\n## SVG Basics\n*** we will check some examples before writing our own***\n- [W3Schools - SVG Tutorial](https://www.w3schools.com/graphics/svg_intro.asp)\n- [W3 SVG](https://www.w3.org/TR/SVG/struct.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"---\n## SVG into D3 - Single Elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"// TODO in class\n//https://www.w3schools.com/graphics/svg_circle.asp\n{\n // create our outer SVG element with a size of 100x100 and select it\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n \n // add one circle to the svg element and set its attributes\n svg.append('circle')\n .attr('cx', 50)\n .attr('cy', 50)\n .attr('r', 25)\n .attr('fill', 'palevioletred')\n .attr('stroke-width', 1)\n .attr('stroke', 'black');\n\n // add line\n svg.append('line').attr('x1', 85).attr('y1', 0).attr('x2', 85).attr('y2', 100).attr('stroke', 'darkslategray').attr('stroke-width', 2);\n\n\n // add one rectangle next to the circle\n svg.append('rect')\n //Example 1\n .attr('width', 50)\n .attr('height', 50)\n .attr('fill', 'palevioletred')\n .attr('stroke-width', 1)\n .attr('stroke', 'black')\n .attr('x', 100)\n .attr('y', 25)\n .attr('rx', 2)\n .attr('ry', 2)\n\n \n // return the outer SVG element for Observable to render it\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"---\n## SVG into D3 - Groups and Classes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"// how can we:\n// - add a stroke to all shapes at once ?\n// - apply margin to all shapes\n{\n const svg = d3.create('svg').attr('width', 500).attr('height', 100);\n\n svg.append('rect')\n //Modifications\n .attr('x', 10)\n .attr('y', 10)\n .attr('rx', 5)\n .attr('ry', 5)\n //Done\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'lightseagreen')\n \n svg.append('rect')\n //Modifications\n .attr('x', 10)\n .attr('y', 40)\n .attr('rx', 5)\n .attr('ry', 5)\n //Done\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'salmon')\n\n svg.append('rect')\n //Modifications\n .attr('x', 10)\n .attr('y', 70)\n .attr('rx', 5)\n .attr('ry', 5)\n //Done\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'bisque')\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"// TODO in class\n{\n const svg = d3.create('svg').attr('width', 500).attr('height', 100);\n\n const group = svg.append('g')\n .attr('stroke-width', 5)\n .attr('stroke', 'black');\n \n group.append('rect')\n //Modifications\n .attr('x', 10)\n .attr('y', 10)\n .attr('rx', 5)\n .attr('ry', 5)\n //Done\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'lightseagreen')\n \n group.append('rect')\n //Modifications\n .attr('x', 10)\n .attr('y', 40)\n .attr('rx', 5)\n .attr('ry', 5)\n //Done\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'salmon')\n\n group.append('rect')\n //Modifications\n .attr('x', 10)\n .attr('y', 70)\n .attr('rx', 5)\n .attr('ry', 5)\n //Done\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'bisque')\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"## SVG Conclusion\n\n- SVG is the main building block for D3.\n- CSS represents the attributes of SVG.\n- D3 powerful because we have control over each individual elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"---\n# D3.JS\nMain Topics:\n- D3 Workflow/Basics\n- Loading Datasets\n- Create different graphs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"### Basics of D3\n1. Manipulating elements\n2. Binding data\n3. Scales\n4. Axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":518,"value":"#### 1. Manipulating Elements\n- select\n - **d3.select(element)**: finds the first *element* in the DOM and reference it.\n - **d3.selectAll(element)**: selects all defined element to the DOM.\n- append\n - **d3.append(element)**: appends a defined element into the DOM (new element is added as the last child). *Similar functions are insert and remove.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":531,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"#### 2. Binding Data\n- Append multiple elements\n - ** d3.join(element) **: Add or remove new elements\n- Enter, Exit and Update\n - We will explore this later, very helpful for *animation and interaction*\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":591,"value":"circle_x_position = [10, 20, 30];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"{\n const svg = d3.create('svg')\n .attr('width', 760)\n .attr('height', 140);\n\n const circles_1 = svg.append('g').attr('transform', 'translate(100,20)');\n \n circles_1.selectAll('circle') //Where do you want to add the elements\n .data(circle_x_position)\n .join('circle')\n .attr('cx', function(d, i) {\n return i * 100;\n })\n .attr('cy', 50)\n .attr('r', function(d, i) {\n return d;\n })\n .attr('fill', 'crimson');\n \n // return the outer SVG element for Observable to render it\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"// Challenge\ncircleGrid = [\n {\n y: 50,\n color: 'purple',\n label: 'Row A',\n circles: [\n { x: 25, radius: 5 },\n { x: 75, radius: 10 },\n { x: 125, radius: 15 },\n { x: 175, radius: 20 },\n { x: 225, radius: 25 }\n ]\n },\n {\n y: 150,\n color: 'brown',\n label: 'Row B',\n circles: [\n { x: 25, radius: 25 },\n { x: 75, radius: 20 },\n { x: 125, radius: 15 },\n { x: 175, radius: 10 },\n { x: 225, radius: 5 }\n ]\n },\n {\n y: 250,\n color: 'orange',\n label: 'Row C',\n circles: [\n { x: 25, radius: 20 },\n { x: 75, radius: 10 },\n { x: 125, radius: 5 },\n { x: 175, radius: 10 },\n { x: 225, radius: 20 }\n ]\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"#### 3. Scales\n**Scale functions are JavaScript functions that:**\n- Take an input (usually a number, date or category)\n- Return a value (such as a coordinate, a color, a length or a radius).\nThey're typically used to transform (or 'map') data values into visual variables (such as position, length and color).

\n\n**For example, they can transform:**\n- Data values into lengths between 0 and 500 for a bar chart\n- Data values into positions between 0 and 200 for line charts\n- % change data (+4%, +10%, -5% etc.) into a continuous range of colors (with red for negative and green for positive)\n- Dates into positions along an x-axis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":705,"value":"$4f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":708,"value":"

Scales with continuous input and discrete output

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Type	Function	Description
Quantized Scale	`scaleQuantize()`	scaleQuantize accepts continuous input and outputs a number of discrete quantities defined by the range.
Quantile Scale	`scaleQuantile()`	scaleQuantile maps continuous numeric input to discrete values. The domain is defined by an array of numbers.
Threshold Scale	`scaleThreshold()`	scaleThreshold maps continuous numeric input to discrete values defined by the range. n-1 domain split points are specified, where n is the number of range values.

Scales with discrete input and discrete output

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Type	Function	Description
Ordinal Scale	`scaleOrdinal()`	scaleOrdinal maps discrete values (specified by an array) to discrete values (also specified by an array).
Band Scale	`scaleBand()`	scaleBand will split the range into n bands (where n is the number of values in the domain array) and compute the positions and widths of the bands while taking into account any specified padding.
Point Scale	`scalePoint()`	scalePoint creates the specified range and scale functions that map from a discrete set of values to equally spaced points.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1163,"value":"{\n let myData = [0, \n 0.1, \n 0.5, \n 0.6, \n 1]\n \n let linearScale = d3.scaleLinear();\n linearScale\n .domain([0, 1]) //Numbers -> min of myData and max of myData\n .range([0, 300]); //Positions, colors, radius .. any numerical value, in this case it's the position\n\n const svg = d3.create('svg')\n .attr('width', 760)\n .attr('height', 20);\n\n svg.selectAll('circle')\n\t.data(myData)\n\t.join('circle')\n .attr('r', 10)\n .attr('fill', 'lightblue')\n .attr('cy', 10)\n \t.attr('cx', function(a) {\n \t\treturn linearScale(a);\n \t});\n \n // return the outer SVG element for Observable to render it\n return svg.node();\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"{\n let myData = [0, 0.1, 0.5, 0.6, 1]\n \n let linearScale = d3.scaleLinear();\n linearScale\n .domain([0, 1]) //Numbers\n .range([0, 500]); //Positions, colors, radius .. any numerical value, in this case it's the position\n\n let paint = d3.scaleLinear()\n .domain([0, 1])\n .range([\"white\", \"black\"])\n \n const svg = d3.create('svg')\n .attr('width', 760)\n .attr('height', 20);\n\n svg.selectAll('circle')\n\t.data(myData)\n\t.join('circle')\n .attr('r', 10)\n .attr('fill', function(a){\n return paint(a);\n })\n .attr('cy', 10)\n \t.attr('cx', function(a) {\n \t\treturn linearScale(a);\n \t});\n \n // return the outer SVG element for Observable to render it\n return svg.node();\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"{\n let myData = d3.range(-10, 110, 2);\n\n var linearScale = d3.scaleLinear()\n .domain([-10, 110])\n .range([0, 600]);\n\n let thresholdScale = d3.scaleThreshold()\n .domain([0, 50, 100])\n .range(['salmon', 'lightblue', 'sandybrown', '#ccc']);\n\n const svg = d3.create('svg')\n .attr('width', 760)\n .attr('height', 40);\n\n svg.selectAll('rect')\n \t.data(myData)\n \t.join('rect')\n \t.attr('x', function(d) {\n \t\treturn linearScale(d);\n \t})\n \t.attr('width', 9)\n \t.attr('height', 30)\n \t.style('fill', function(d) {\n \t\treturn thresholdScale(d);\n \t});\n\n // return the outer SVG element for Observable to render it\n return svg.node();\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"{ // Creating horizontal bars\n// let myData = [\n// \t{day : 'Mon', value: 10},\n// \t{day : 'Tue', value: 40},\n// \t{day : 'Wed', value: 30},\n// \t{day : 'Thu', value: 60},\n// \t{day : 'Fri', value: 30}\n// ];\n\n// var bandScale = d3.scaleBand()\n// \t.domain(['Mon', 'Tue', 'Wed', 'Thu', 'Fri'])\n// \t.range([0, 200])\n// \t.paddingInner(0.05)\n// .paddingOuter(0.5);\n\n// const svg = d3.create('svg')\n// .attr('width', 760)\n// .attr('height', 210);\n\n// svg.selectAll('rect')\n// \t.data(myData)\n// \t.join('rect')\n// .attr('fill', 'crimson')\n// \t.attr('y', function(d) {\n// \t\treturn bandScale(d.day);\n// \t})\n// \t.attr('height', bandScale.bandwidth())\n// \t.attr('width', function(d) {\n// \t\treturn d.value;\n// \t});\n\n// return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"#### 4. Axis\nThere are 4 types of axes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1056,"value":"image = FileAttachment(\"axis.png\").image({width: 350})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"Each axis requires a scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":913,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"Axes can be configured by:\n- specify the number of ticks OR specify the tick values\n- specify the format of the tick label (for example, add a percentage sign)\n- specify the tick size","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1069,"value":"\n{\n const svg = d3.create('svg')\n .attr('width', 760)\n .attr('height', 40);\n \n let linearScale = d3.scaleLinear().domain([0, 100]).range([0, 500]);\n \n let axis = d3.axisBottom();\n\n let groupLinear = svg.append('g').attr('class', 'axis_groups').attr('transform', 'translate(10, 10)');\n \n svg.selectAll(\"g.axis_groups\").attr('font-size', '11px').attr(\"text-anchor\", \"end\");\n\n axis.scale(linearScale)\n .tickValues([0, 25, 50, 75, 100])\n .tickPadding(5)\n .tickSize(50);\n \n groupLinear.append('text').text('Linear Scale').attr('x', 55);\n groupLinear.append('g').call(axis).attr('transform', 'translate(80, -5)');\n\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"$52","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"FileAttachment(\"population.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"// Loading CSV as text only\npopulation_text = FileAttachment(\"population.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"// Loading CSV as named data and values - note that everything is a string in this case ( you can notice this by looking at the \"\" )\nFileAttachment(\"population.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"// To convert these strings into dates and numbers, we can set file.csv’s typed option to true. (This is equivalent to passing d3.autoType as the second argument to d3.csvParse, which calls d3.autoType for each row.)\npopulation_data = FileAttachment(\"population.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"#### Customizing Imported Data\nMaybe you want to customize the data type, or your data isn’t compatible with d3.autoType. (If you’re unsure, don’t rely on automatic type inference or [consult the documentation](https://github.com/d3/d3-dsv/blob/master/README.md#autoType).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"//Maybe, you want the year to be an integer not a string\ndata = {\n //var parseTime = d3.timeParse(\"%Y\");\n const parser_result = d3.csvParse(population_text, (d) => {\n return {\n \"age group\": d[\"Age Groups\"], \n year: d.Year,//parseTime(d.Year),\n nationality: d.Nationality,\n gender: d.Gender,\n \"total population\": +d[\"Population estimates\"]\n };\n});\n return parser_result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"d3.min(population_data, function(d) { return d.Year; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"d3.max(population_data, function(d) { return d.Year; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"d3.mean(population_data, function(d) { return d[\"Population estimates\"]; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"uniqueListOfYears = {\n const listOfYears = population_data.map(row => row.Year);\n const uniqueListOfYearsSet = new Set(listOfYears.values());\n const uniqueListOfYearsArray = Array.from(uniqueListOfYearsSet)\n return uniqueListOfYearsArray.sort();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"populationEstimatePerYear = {\n let sum = 0;\n const populationEstimatePerYear = [];\n uniqueListOfYears.forEach(key => populationEstimatePerYear.push({year: key, population: 0}));\n \n population_data.forEach(getTotalEstimate);\n\n function getTotalEstimate(row) {\n for (let index = 0; index < uniqueListOfYears.length; ++index) {\n if(populationEstimatePerYear[index].year == row.Year){\n populationEstimatePerYear[index].population += row[\"Population estimates\"] ;\n break;\n } \n }\n }\n\n return populationEstimatePerYear;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1484,"value":"d3.min(population_data, function(d) { return d.Year; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"## Creating Graphs\n### Histogram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1216,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"### BarCharts ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1571,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1726,"value":"### Line Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1712,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1728,"value":"### Scatter plot ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1734,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1777,"value":"### Pie Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"---\n# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"import {keyStyled} from \"@mbostock/keys\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"d3 = require(\"d3@6\") // Use the latest Version","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$57","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W58","stdlib":"1"}} 24:null