34:["$","title",null,{"children":"Scatter plot with D3. OCO2/OCO3 data viz. (Work-in-progress) | Sagar Limbu | Observable"}] 3c:T5b1,{ const target= html``; const svg_sel= d3.select(target); // TOOLTIP var tooltip= svg_sel //.append("div") .style("opacity", 0) .attr("class", "tooltip") .style("background-color", "white") .style("border", "solid"); // Hovering the mous var mouseover= function(d) { tooltip.style("opacity", 1) d3.select(this) .style("stroke", "black") .style("opacity", 0.8) }; // When the mouse moves var mousemove= function(d){ tooltip .html("XCO2: "+ d.value) .style("left", (d3.mouse(this)[0] + 70) + "ppm") .style("top", (d3.mouse(this)[1] ) + "ppm") }; var mouseleave= function(d){ tooltip .style("opacity", 0) d3.select(this) .style("stroke", "none") .style("opacity", 0.8) }; // let svg_selection = d3.select(svg); svg_sel.selectAll('path') .data(california) .join('path') .attr('d', s => path(s)) .attr('stroke', 'black') .attr('fill', 'white'); //add data points from OCO2 datasets // XCO2 displayed as CIRCLE reflect scattered points svg_sel.selectAll('cricle') .data(data_oco2) .join('circle') .attr('cx', d => projection( [d.Longitude, d.Latitude])[0]) .attr('cy', d=> projection( [d.Longitude, d.Latitude])[0]) .attr('fill', d=> colorPM1( d.Xco2)) .attr('r', 2) .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave); return svg_sel; }3d:[{"id":"84fb88038aa220e193bc3c9b4bb47e4912bbf137c47a37e7adc38b630ad8d5d983c1622e36ba89b7ae060788845caef1bd7550fa5d8bab7cb12efdbdd7163dd6","href":"https://static.observableusercontent.com/files/84fb88038aa220e193bc3c9b4bb47e4912bbf137c47a37e7adc38b630ad8d5d983c1622e36ba89b7ae060788845caef1bd7550fa5d8bab7cb12efdbdd7163dd6","name":"oco2_2019@1.csv","type":"text/csv","lastModified":1663176062765.526,"size":840431},{"id":"13e6e273b1edaac23696f7b54735412183f6130a4094a4a3cbfad8b1cc50b5fc920ed3321dbdb68fa5a4eca8632dad4b5aabfa8319571c9cb08107fedb8ee05d","href":"https://static.observableusercontent.com/files/13e6e273b1edaac23696f7b54735412183f6130a4094a4a3cbfad8b1cc50b5fc920ed3321dbdb68fa5a4eca8632dad4b5aabfa8319571c9cb08107fedb8ee05d","name":"xco2_color_bar.png","type":"image/png","lastModified":1663623605538.092,"size":8340},{"id":"9ae0065a982633ce86113542e87177bf23da02b1ea369cf30d94e273ecb7e71e7edbfb6634eea97d80ab27f16c431ab74d7c72ec0c046dedce3d869df6758f05","href":"https://static.observableusercontent.com/files/9ae0065a982633ce86113542e87177bf23da02b1ea369cf30d94e273ecb7e71e7edbfb6634eea97d80ab27f16c431ab74d7c72ec0c046dedce3d869df6758f05","name":"oco2_2019.png","type":"image/png","lastModified":1663625409575.441,"size":149251},{"id":"2e9cc78e0b6688d4a331e1c255ee623bf736aabe201d707e3a266c7e9117d24cd0c61af2e528dde423829df4e926e9d76cfee9dc363b73675c739c26edc0e03c","href":"https://static.observableusercontent.com/files/2e9cc78e0b6688d4a331e1c255ee623bf736aabe201d707e3a266c7e9117d24cd0c61af2e528dde423829df4e926e9d76cfee9dc363b73675c739c26edc0e03c","name":"006_22_09_03_.png","type":"image/png","lastModified":1662481184509.232,"size":145471},{"id":"e451a1e2de4f989b6500c63fbc574aa615e591bf89d9bd032f2e6c61ba5b670af94e0ade84958ff6aa2727dd7ece199a6a5c88df150d7324cc4c6925bcb68056","href":"https://static.observableusercontent.com/files/e451a1e2de4f989b6500c63fbc574aa615e591bf89d9bd032f2e6c61ba5b670af94e0ade84958ff6aa2727dd7ece199a6a5c88df150d7324cc4c6925bcb68056","name":"cali_2018_2020@2.csv","type":"text/csv","lastModified":1663084400539.156,"size":2774649}] 38:{"id":"79aac456b76c87ed","slug":"mapping-scatter-plot-with-d3-oco2-oco3-data-viz","title":"Scatter plot with D3. OCO2/OCO3 data viz. (Work-in-progress)","thumbnail":null,"access_level":"public","create_time":"$D2022-09-02T15:59:16.500Z","update_time":"$D2022-09-27T21:55:50.929Z","view_time":null,"first_public_time":"$D2022-09-02T19:23:46.755Z","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":752,"publish_version":752,"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":{"id":"de646e8f95b6a940","slug":"oco2-oco3","title":"OCO2/OCO3","owner":{"id":"3d6d0e61ccf3a479","login":"sagarlimbu","name":"Sagar Limbu"}},"type":"notebook","body":{"titling":"auto","title":"Scatter plot with D3. OCO2/OCO3 data viz. (Work-in-progress)","cells":[{"id":0,"value":"# Scatter plot with D3. OCO2/OCO3 data viz. (Work-in-progress)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"// mapSVG= \n// svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"## STEPS: Creating time lapse by total number of records\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":725,"value":"## SELECTING data for year 2019","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"// grouping the data\ntotal_data= d3.group(data_2019, d=> d.Index)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"times= Array.from(total_data.keys())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"timeData= total_data.get(currentTime)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"// scrubber import to time lapse\nimport { Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"viewof currentTime = Scrubber(times,\n {autoplay: false},\n {loop: false},\n {delay: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"new Date(currentTime * 100).toString()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"# OCO2- 2019_california\n- By monthly","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":698,"value":"color_bar.image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"mapSVG= \n svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"color_bar= \n FileAttachment(\"xco2_color_bar.png\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"### Scatterplot to view XCO2 by month and year 2019","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":739,"value":"xco2_scatter= FileAttachment(\"oco2_2019.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"## COLOR BAR: by rect attribute, WIP","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":639,"value":".domain([ 400, 408, 411, 414])\n.range([ \"blue\", \"green\", \"yellow\", \"red\"])","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":482,"value":"{\n const target= html``\n\n const svg_sel =d3.select(target);\n \n var data = d3.range(20);\n\n var colors = //d3.scaleQuantize()\n d3.scaleLinear(d3.interpolateTurbo)\n// .domain([0,20]) //.interpolator(d3.interpolatePlasma);\n .domain([ 400, 405, ,410, 417])\n .range([\"blue\", \"green\", \"yellow\", \"orange\", \"red\"]);\n// .domain( d3.extent( data_oco2, d=> d.Xco2));\n\n // var colors = d3.scaleQuantize()\n // .domain( d3.extent( data_oco2, d=> d.Xco2))\n // // .range([\"#5E4FA2\", \"#66C2A5\", \"#ABDDA4\", \"#E6F598\"]);\n // // \"#FFFFBF\", \"#FEE08B\", \"#FDAE61\", \"#F46D43\", \"#D53E4F\", \"#9E0142\"]);\n \n // .range([\"blue\", \"green\", \"yellow\", \"orange\", \"red\"]);\n\n svg_sel.selectAll(\".rects\")\n\t.data(data_oco2)\n\t.enter()\n\t.append(\"rect\")\n\t.attr(\"y\", 10)\n\t.attr(\"height\", 10)\n\t.attr(\"x\", (d,i)=> 10 + i* 20)\n\t.attr(\"width\", 20)\n\t.attr(\"fill\", d=>colors(d.Xco2))\n\t.attr(\"stroke\", \"gray\");\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":592,"value":"## Get unique values from YEAR","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":594,"value":"//new Set(data_oco2.map ( d => d.Year)).values();\n{\n// HUE COLOR\nconst color= d3.scaleOrdinal(d3.schemeCategory10)\n.domain(new Set(data_oco2.map( d=> d.Year)).values());\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"### Using Filtered the OCO2 dataset by region and plotting on California region","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"// mapSVG= \n// svg``\n\n const svg_sel= d3.select(target)\n\n const margin= { left: 30, top: 40, right: 20, bottom: 10},\n iwidth= width - margin.left -margin.right,\n iheight= height- margin.top -margin.bottom;\n \n // grouping\n const grouping= svg_sel.append(\"g\")\n .attr(\"transform\", `translate( ${margin.left}, ${margin.top})`);\n\n //x axis and y-axis\n const x= d3.scaleLinear()\n .domain([ 0, 12])\n .range([0, iwidth]);\n\n const y= d3.scaleLinear()\n .domain([ 400, 420])\n .range([iheight, 0]);\n \n // append the svg\n const circles= grouping.selectAll(\"circle\")\n .data(data_oco2)\n .join(\"circle\")\n .attr(\"cx\", d=> x(d.Month))\n .attr(\"cy\", d=> y(d.Xco2))\n .attr(\"r\", 1)\n .attr(\"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":363,"value":"{\n const target= html``;\n\n const svg_sel= d3.select(\"target\");\n\n var slider = d3\n .sliderHorizontal()\n .min(0)\n .max(10)\n .step(1)\n .width(300)\n .displayValue(false)\n .on('onchange', (val) => {\n d3.select('#value').text(val);\n });\n\n svg_sel.attr('width', 500)\n .attr('height', 100)\n .append('g')\n .attr('transform', 'translate(30,30)')\n .call(slider);\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"}],"files":"$W3d","stdlib":"1"}} 33:null