45:["$","title",null,{"children":"D3 Tutorial_w209_week_3 | Sagar Limbu | Observable"}] 4d:T605,{ const target= html`` // select the TARGET with SVG element applying const svg= d3.select(target); // SVG margin which will be Move around by 'group' element const margin= { left: 30, right: 40, top: 10, bottom: 20}, iwidth= width - margin.left -margin.right, iheight= height- margin.top -margin.bottom; // SVG drawing where we group by element // PUT all elements inside this CRITERIA const gDrawing= svg.append("g") .attr("transform" , `translate( ${margin.left}, ${margin.top})`); //SCALE LINEAR for x-axis and y-axis const x= d3.scaleLinear() .domain( [0, d3.max(data_arr, d=> d.age)]) .range([0, iwidth]); const y= d3.scaleLinear() .domain([0, d3.max( data_arr, d => d.height_a)]) .range([iheight, 0]); // X-axis and Y-axis FEATURES appending inside x and y variables gDrawing.append("g") .attr("class", "x-axis") .attr("transform", `translate(0, ${iheight})`) .call(d3.axisBottom(x)); // Y-axis range using margin gDrawing.append("g") .attr("class", "y-axis") // .attr("transform", `translate( ${margin.left}, 0)`) .call(d3.axisLeft(y)); // BACKGROUND color by adding RECT as new element gDrawing.append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "grey"); // select all circles and pass DATA const circles= gDrawing.selectAll("circle") .data(data_arr) .join("circle") .attr("cx", d => x(d.age)) .attr("cy", d => y(d.height_a)) .attr("r", 3); return target; }4e:T7d1,{ const target= html`` // select the TARGET with SVG element applying const svg= d3.select(target); //////////////////////////////////// // SVG margin which will be Move around by 'group' element const margin= { left: 30, right: 40, top: 10, bottom: 20}, iwidth= width - margin.left -margin.right, iheight= height- margin.top -margin.bottom; //////////////////////////////////// // SVG drawing where we group by element // PUT all elements inside this CRITERIA const gDrawing= svg.append("g") .attr("transform" , `translate( ${margin.left}, ${margin.top})`); //////////////////////////////////// //SCALE LINEAR for x-axis and y-axis const x= d3.scaleLinear() .domain( [0, d3.max(data_arr, d=> d.age)]) .range([0, iwidth]); const y= d3.scaleLinear() .domain([0, d3.max( data_arr, d => d.height_a)]) .range([iheight, 0]); //////////////////////////////////// // COLOR for CATEOGORICAL attributes const color= d3.scaleOrdinal() .domain( Array.from( new Set( data_arr.map( d=> d.profession)).values())) .range(["steelblue", "salmon", "cyan"]); //////////////////////////////////// // X-axis and Y-axis FEATURES appending inside x and y variables gDrawing.append("g") .attr("class", "x-axis") .attr("transform", `translate(0, ${iheight})`) .call(d3.axisBottom(x)); // Y-axis range using margin gDrawing.append("g") .attr("class", "y-axis") // .attr("transform", `translate( ${margin.left}, 0)`) .call(d3.axisLeft(y)); // BACKGROUND color by adding RECT as new element gDrawing.append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "grey"); // select all circles and pass DATA const circles= gDrawing.selectAll("circle") .data(data_arr) .join("circle") .attr("cx", d => x(d.age)) .attr("cy", d => y(d.height_a)) // use color function .attr("fill", d => color( d.profession)) .attr("r", 3); return target; }4f:[] 49:{"id":"48a51143f25c725f","slug":"d3-tutorial_w209_week_3","title":"D3 Tutorial_w209_week_3","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-09-09T17:27:23.115Z","update_time":"$D2022-09-11T16:13:50.618Z","view_time":null,"first_public_time":"$D2022-09-09T17:42:13.722Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3d6d0e61ccf3a479","login":"sagarlimbu","name":"Sagar Limbu","avatar_url":"https://avatars-next.observableusercontent.com/cc219e01998c665a55eec34dddd997cfeac79bb70130ceec892bf6a863e91892","tier":"starter_2024","bio":"","following":false},"version":216,"publish_version":216,"role":null,"authored":false,"authors":[{"type":"individual","id":"b87cdf596bee611d","login":"sagarlimbu","name":"Sagar Limbu","avatar_url":"https://avatars-next.observableusercontent.com/cc219e01998c665a55eec34dddd997cfeac79bb70130ceec892bf6a863e91892","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b87cdf596bee611d","login":"sagarlimbu","name":"Sagar Limbu","avatar_url":"https://avatars-next.observableusercontent.com/cc219e01998c665a55eec34dddd997cfeac79bb70130ceec892bf6a863e91892","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Tutorial_w209_week_3","cells":[{"id":0,"value":"# D3 Tutorial_w209_week_3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"#### D3 Selections\n- Generate random values for three columns: Age, height, profession","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"// RETURNS HTML element\n{\n const target= html``\n\n return target\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// creating a function which should be wrapped in {}\ndata_arr= Array.from({ length: 200}).map((d, i) =>({\n age: Math.random() * 90,\n height_a: Math.random() * 50,\n profession: [\"Teacher\", \"Lawyer\", \"Pilot\"][ Math.floor(Math.random() * 3)]\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"### SVG element to fill with Array","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"## USING d3 selector","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"{\n const target= html``;\n\n // D3 selector\n const svg= d3.select(target);\n\n // now creat attributes for the svg\n\n for (let d of data_arr){\n svg.append(\"circle\")\n .attr(\"cx\", d.age * 5)\n .attr(\"cy\", d.height_a * 5)\n .attr(\"r\", 6)\n .style(\"fill\", \"green\");\n\n //adding text\n svg.append(\"text\")\n .attr(\"x\", d.age *5)\n .attr(\"y\", d.height_a *5)\n .style(\"fill\", \"red\");\n }\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"data_a= Array.from({ length: 40}).map( d => ({\n x: Math.random() * 30,\n y: Math.random() * 40\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"## BINDING data with D3 selector for ALL CIRCLEs\n- using term `selectAll` and selecting all terms\n- `join` will append all circles together by SEARCHING any circle\n- Using the function `d` to get the attributes","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"#### Scale LINEAR: to create the x and y axis RANGE\n- This will allow us to create FUNCTIONS: x and y where we can pass the datapoints\n- Rsizes according to width and height of windows","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"{\n const target= html``\n\n // select the TARGET with SVG element applying\n const svg= d3.select(target);\n\n //SCALE LINEAR\n const x= d3.scaleLinear()\n .domain( [0, 90])\n .range([0, width]);\n\n const y= d3.scaleLinear()\n .domain([0, 50])\n .range([0, height]);\n \n // select all circles and pass DATA\n const circles= svg.selectAll(\"circle\")\n .data(data_arr)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.age))\n .attr(\"cy\", d => y(d.height_a))\n .attr(\"r\", 3);\n\n return target;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"# MARGIN: left, right, top, bottom","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"## AXIS range display using D3 features\n- d3.axisBottom()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"# CATEGORICAL SCALE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"#### Color keys from cat. feature","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"// CREATE a new array\ncolorKeys= Array.from( new Set(data_arr.map( d=> d.profession)).values())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height= 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3= require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null