3e:null 3f:["$","title",null,{"children":"Exploratory Data Analysis | Table 3 | Observable"}] 45:Tb54,// From D3 Visualization notes... //// = new stuff chart1 = { //console.log("ran it"); // Define and select the SVG let svg = d3 .create("svg") .attr("width", width-100) .attr("height", 700) //.attr("viewBox", [0, 0, width, height]) .style("border", "0.1px solid lightgrey") let text1=svg .append("text") .attr("x", 100) .attr("y",30) .html("Popularity of Data Science degrees: Select a bar to find out!"); var y_axis = d3.axisLeft().scale(yScale_New).ticks(25); svg.append("g") .attr("transform", `translate(${margin.left + 110}, 0)`) .call(y_axis) .append("text") .style("fill", "black") .style("font-size","14px") .attr("transform", `translate(-40,250) rotate(-90)`) .html("Frequency"); svg.append("g") .attr("transform", "translate(0," + 555 + ")") .call(d3.axisBottom(xScale_New)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.3em") .attr("dy", ".12em") .attr("transform", "rotate(-65)"); //// Define details-on-demand tag let bars = svg // MARKS: maps data rows to rects .selectAll("rect") .data(degreeSheet1) .join("rect") // creates new rects for each data row // CHANNELS: maps data columns to rect attributes .attr("x", (r) => xScale_New(r["Skill Name"])) .attr("width", xScale_New.bandwidth()-20) .attr("y", (r) => yScale_New(r["Occurance Count"])) .attr("height", (r) => yScale_New(0) - yScale_New(r["Occurance Count"])) .style("fill", (r) => cScale(r["Average Salary With Skill"])) ////.style('fill', r => (r.PercentCollegeGrad >= filter ? 'steelblue' : 'lightgrey')) // Poor performance, using 'filter' here causes cell re-execution when filter changes //// Interaction events .on("mouseover", (event, r) => { bg = d3.select(event.target).style("fill"); // save the current color of the rect for mouseout d3.select(event.target).style("fill", "pink"); // Modify SVG DOM // text.html(r["Skill Name"]+ " " + "(" + r["Occurance Count"] + ")"); // text.attr("x", xScale_New(r["Skill Name"])); //.attr("y", yScale(r.PercentCollegeGrad)); mutable hover1 = r; // Export hover selection }) .on("mouseout", (event, r) => { d3.select(event.target).style("fill", bg); }); let bg = null; //if hover text is needed // let text = svg // .append("text") // .attr("x", 20) // .attr("y", 300) // .style("font", "12px Arial") // .html("Select a bar"); bars.append("title").text((r, i) => r["Skill Name"]+ " " + "(" + r["Occurance Count"] + ")"); svg.node().filterBy = function (filterMin) { bars.style("fill", (r) => r["Average Salary With Skill"] >= filterMin ? cScale(r["Average Salary With Skill"]) : "grey" ); }; //Good performance return svg.node(); }46:Tb44,// From D3 Visualization notes... //// = new stuff chart2 = { //console.log("ran it"); // Define and select the SVG let svg1 = d3 .create("svg") .attr("width", width-100) .attr("height", 700+50) //.attr("viewBox", [0, 0, width, height]) .style("border", "0.1px solid lightgrey") let text1=svg1 .append("text") .attr("x", 170) .attr("y",30) .html("Popularity of Job Titles in Data Science : Select a bar to find out!"); var y_axis = d3.axisLeft().scale(yScale_2).ticks(25); svg1.append("g") .attr("transform", `translate(${margin.left + 110}, 0)`) .call(y_axis) .append("text") .style("fill", "black") .style("font-size","14px") .attr("transform", `translate(-40,250) rotate(-90)`) .html("Frequency"); svg1.append("g") .attr("transform", "translate(1," + 555 + ")") .call(d3.axisBottom(xScale_2)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.3em") .attr("dy", ".12em") .attr("transform", "rotate(-65)"); //// Define details-on-demand tag let bars = svg1 // MARKS: maps data rows to rects .selectAll("rect") .data(dataSheet2) .join("rect") // creates new rects for each data row // CHANNELS: maps data columns to rect attributes .attr("x", (r) => xScale_2(r["Job_title"])) .attr("width", xScale_2.bandwidth()-12) .attr("y", (r) => yScale_2(r["Frequency"])) .attr("height", (r) => yScale_2(0) - yScale_2(r["Frequency"])) .style("fill", (r) => cScale_2(r["Frequency"])) ////.style('fill', r => (r.PercentCollegeGrad >= filter ? 'steelblue' : 'lightgrey')) // Poor performance, using 'filter' here causes cell re-execution when filter changes //// Interaction events .on("mouseover", (event, r) => { bg = d3.select(event.target).style("fill"); // save the current color of the rect for mouseout d3.select(event.target).style("fill", "pink"); // Modify SVG DOM // text.html(r["Skill Name"]+ " " + "(" + r["Occurance Count"] + ")"); // text.attr("x", xScale_New(r["Skill Name"])); //.attr("y", yScale(r.PercentCollegeGrad)); mutable hover2 = r; // Export hover selection }) .on("mouseout", (event, r) => { d3.select(event.target).style("fill", bg); }); let bg = null; //if hover text is needed // let text = svg // .append("text") // .attr("x", 20) // .attr("y", 300) // .style("font", "12px Arial") // .html("Select a bar"); bars.append("title").text((r, i) => r["Job_title"]+ " " + "(" + r["Frequency"] + ")"); svg1.node().filterBy = function (filterMin) { bars.style("fill", (r) => r["Frequency"] >= filterMin ? cScale_2(r["Frequency"]) : "grey" ); }; //Good performance //setupDrag(svg1, bars); setupBrush(svg1, bars); return svg1.node(); }47:[{"id":"38be0b1e9749828d694f8b0beef73160ae306d59885b973270fcd6f99dc5155c2a4b81fb5782d22a6220a2c638dbb58bc9091659338e5bc3da7c1e718c38b2a8","href":"https://static.observableusercontent.com/files/38be0b1e9749828d694f8b0beef73160ae306d59885b973270fcd6f99dc5155c2a4b81fb5782d22a6220a2c638dbb58bc9091659338e5bc3da7c1e718c38b2a8","name":"Job titles.csv","type":"text/csv","lastModified":1667355791635.254,"size":427},{"id":"1beacf08f83d7651af0224e31dd973c907d63cafdde2645133c39e985305a718fe9f8c69b052e2da2584e67b3a889d2fb9a7cbf294cbd4040ea6f4a2fa54c94f","href":"https://static.observableusercontent.com/files/1beacf08f83d7651af0224e31dd973c907d63cafdde2645133c39e985305a718fe9f8c69b052e2da2584e67b3a889d2fb9a7cbf294cbd4040ea6f4a2fa54c94f","name":"Job titles@1.csv","type":"text/csv","lastModified":1667358619115.572,"size":402},{"id":"f73dc09e39b5bea6abd45f6a5ab5eeeff94fd24c0e86bd9db38b1e19d81ec6581ecbf7efb728ef11ccba7f6d9280d4a534c05f2e8c804b12904cd139f62b3d10","href":"https://static.observableusercontent.com/files/f73dc09e39b5bea6abd45f6a5ab5eeeff94fd24c0e86bd9db38b1e19d81ec6581ecbf7efb728ef11ccba7f6d9280d4a534c05f2e8c804b12904cd139f62b3d10","name":"Degree - Sheet1.csv","type":"text/csv","lastModified":1667180038815.371,"size":543},{"id":"3db95f1a2235247c074c026a7eab8e68cad950476e41dbf80fa28352bdfea3e590e21a53668a6cdc2085fb917c3c96b8d17945f9b26dba23d7d28a729a62153e","href":"https://static.observableusercontent.com/files/3db95f1a2235247c074c026a7eab8e68cad950476e41dbf80fa28352bdfea3e590e21a53668a6cdc2085fb917c3c96b8d17945f9b26dba23d7d28a729a62153e","name":"Degree - Sheet1@1.csv","type":"text/csv","lastModified":1667232939515.541,"size":364}] 43:{"id":"4f647f9b9d6715fa","slug":null,"title":"Exploratory Data Analysis","thumbnail":"ee63a10ea51823940fc75afa560b88afa848c55032927cea95aee7ae162e9880","access_level":"public","create_time":"$D2022-10-31T01:33:58.815Z","update_time":"$D2022-11-02T17:16:06.556Z","view_time":null,"first_public_time":"$D2022-10-31T01:33:58.815Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1761781073f1cca5","login":"5764-team3","name":"Table 3","avatar_url":"https://avatars-next.observableusercontent.com/8dcbc34d120ce444f537765d7447ac4604980435f29b916a53d53cfe30e88f72","tier":"starter_2024","bio":"","following":false},"version":1350,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"36454dded1571279","login":"nishamariyalr","name":"Nisha Mariyal Radhakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/a4bca5e9409efe52e724d42ab72e08cf2018b263a9f27fb0ec6056de3efaba94","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"1761781073f1cca5","login":"5764-team3","name":"Table 3","avatar_url":"https://avatars-next.observableusercontent.com/8dcbc34d120ce444f537765d7447ac4604980435f29b916a53d53cfe30e88f72","tier":"starter_2024","role":"editor"},{"type":"individual","id":"36454dded1571279","login":"nishamariyalr","name":"Nisha Mariyal Radhakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/a4bca5e9409efe52e724d42ab72e08cf2018b263a9f27fb0ec6056de3efaba94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Exploratory Data Analysis","cells":[{"id":1033,"value":"# Exploratory Data Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1096,"value":"### Exploratory Data Analysis - 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"degreeSheet1 = FileAttachment(\"Degree - Sheet1@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"xScale_New = d3\n .scaleBand()\n .domain(degreeSheet1.map((d) => d[\"Skill Name\"]))\n .range([150, width-250])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"yScale_New = d3.scaleLinear().domain([1, 1200]).range([555, 55])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"cScale = d3.scaleSequential(d3.interpolateGreens).domain([90000, 165000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":" Filter by salary which ranges between 90k and 165k! You selected salary greater than ${filter}. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":976,"value":"viewof filter = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"legend({\n color: cScale,\n title: \"Averge Salary ($) based on degree type \"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"You selected ${hover1[\"Skill Name\"]} which has an average salary of ${hover1[\"Average Salary With Skill\"]} and occurs ${hover1[\"Occurance Count\"]} time(s)","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":554,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"filter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"chart1.filterBy(filter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"mutable hover1=null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"### Exploratory Data Analysis -2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1114,"value":"dataSheet2 = FileAttachment(\"Job titles@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"dataSheet2[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"xScale_2 = d3\n .scaleBand()\n .domain(dataSheet2.map((d) => d[\"Job_title\"]))\n .range([150, width-250])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"yScale_2\n= d3.scaleLinear().domain([0, 640]).range([555, 45])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"cScale_2 = d3.scaleSequential(d3.interpolateCool).domain([0, 650])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"legend({\n color: cScale_2,\n title: \"Frequency of Job titles \"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1249,"value":"Your brush selected the following job titles. Their frequencies are:
${brushed.map((key,element)=>{return key.Job_title + \" -> \" + key.Frequency + \" times\" + \", \"\n })} ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1130,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"mutable hover2=null;\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1239,"value":"mutable brushed = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1241,"value":"function pointInRect(p, r) { // p=[x,y], r=[[l,t],[r,b]]\n const [x, y] = p;\n const [[left, top], [right, bottom]] = r;\n return left <= x && x <= right && top <= y && y <= bottom;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1237,"value":"function setupBrush(svg, rects) {\n // D3 Brush API\n const brush = d3.brush().on(\"start brush end\", brushing);\n //.extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])\n svg.append(\"g\").call(brush); // Create brush and regiser events\n\n // Brush event callback function\n function brushing(event) {\n if (event.selection) {\n //console.log(event.selection);\n const [[left, top], [right, bottom]] = event.selection; // The brush pixel coordinates\n \n //// do brush stuff here...\n rects.style(\"fill\", (r) =>\n pointInRect(\n [xScale_2(r.Job_title), yScale_2(r.Frequency)],\n event.selection\n )\n ? \"gold\"\n : cScale_2(r[\"Frequency\"]) \n );\n mutable brushed = dataSheet2.filter((r) =>\n pointInRect(\n [xScale_2(r.Job_title), yScale_2(r.Frequency)],\n event.selection\n )\n );\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"function setupDrag(svg, rects) {\n // D3 Drag API\n const drag = d3.drag().on(\"start drag end\", dragging);\n rects.call(drag); // register drag events on all rects\n\n // Drag event callback function\n function dragging(event, d) {\n //// do drag stuff here... 'this' is the dragged element\n d3.select(this).attr(\"x\", event.x).attr(\"y\", event.y);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"