2e:null 2f:["$","title",null,{"children":"Utilities stocks outperformed the S&P500 in 2018. | Vivek Rao | Observable"}] 34:Tc91,chart = { const svg = d3.select(DOM.svg(width, height)); // add red shaded region // const shade = svg.append('rect') // .attr('x', width/2) // .attr('height', height/2 - margin.bottom) // .attr('width', width/2 - margin.left) // .attr('transform', 'translate(0,' + height/2 + ')') // .style('fill', '#cc0000') // .style('opacity', 0.2); // x axis will be fiscal year 2018 const x_axis = svg.append('g') .attr("transform", "translate(0,"+ (height/2) + ")") //translate(0, 240)") .call(Xaxis) .style('font-family', 'monospace'); // add Q4 performance axis const y_axis = svg.append('g') .attr("transform", "translate(" + (width/2) + "," + "0)") .call(Yaxis) .style('font-family', 'monospace'); // add labels const quad1 = svg.append('text') .attr("class", "quad_caption") .attr('x', width - 10*margin.right) .attr('y', margin.top + 15) .text('Up for the quarter and year'); // add labels const quad2 = svg.append('text') .attr("class", "quad_caption") .attr('x', margin.left + 15) .attr('y', margin.top + 15) .text('Up for the quarter, down for the year'); // add labels const quad3 = svg.append('text') .attr("class", "quad_caption") .attr('x', margin.left + 15) .attr('y', height - margin.bottom - 15) .text('Down for the year and quarter'); // add labels const quad4 = svg.append('text') .attr("class", "quad_caption") .attr('x', width - 13*margin.right) // - d3.select(this).getComputedTextLength()) .attr('y', height - margin.bottom - 15) .text('Up for the year, down for the quarter'); // plot points const rets = svg .selectAll('circle') .data(df) .enter() .append('circle') .attr('cx', d => FYscale(d.FY2018)) .attr('cy', d => Q4scale(d.Q4)) .attr('fill', d => d.sector === "Utilities" ? '#cc0000' : '#bdbdbd') .attr('r', 3.25) .attr('opacity', 0.5) .on("mousemove", function(event, d) { d3.select(event.currentTarget).attr('fill', '#333333').attr('r', 4); console.log(d3.select(event.currentTarget)); // d3 v6 source tooltip h/t // https://bl.ocks.org/d3noob/180287b6623496dbb5ac4b048813af52 toolTip .style('left', event.pageX + "px") .style('top', event.pageY + "px") .style('display', "inline-block") .html(`Name: ${d.name}
Industry: ${d.sector}
FY2018: ${d3.format(",.2~f")(d.FY2018*100)}%
Q4: ${d3.format(",.2~f")(d.Q4*100)}%`); }) .on('mouseout', function(event, d) { d3.select(event.currentTarget).attr('fill', d => d.sector === "Utilities" ? '#cc0000' : '#bdbdbd').attr('r', 3.25); toolTip.style('display', 'none')}); return svg.node(); };35:[{"id":"fbb2bacbdcb9b111bd0af7525a0d429a708eb3c357db17691aca5bb96a4d6d394304163ab3bcde3162eac629453222b99e6d72e5f267d5f652f42da807155f71","href":"https://static.observableusercontent.com/files/fbb2bacbdcb9b111bd0af7525a0d429a708eb3c357db17691aca5bb96a4d6d394304163ab3bcde3162eac629453222b99e6d72e5f267d5f652f42da807155f71","name":"final@1.csv","type":"text/csv","lastModified":1639234631358.48,"size":60151}] 32:{"id":"ada2ca3360fc29a3","slug":"utilities-stocks-outperformed-the-s-p500-in-2018","title":"Utilities stocks outperformed the S&P500 in 2018.","thumbnail":"e460735c39fc6cd32ab44d33037ea46bcadae82c2831d86e015aa7aaf0118b43","access_level":"public","create_time":"$D2021-12-11T04:18:38.325Z","update_time":"$D2022-06-07T02:37:14.034Z","view_time":null,"first_public_time":"$D2021-12-20T03:59:18.335Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0b85d005387c1032","login":"vivrao9","name":"Vivek Rao","avatar_url":"https://avatars-next.observableusercontent.com/bef3b5fc8c76d305b837832196006da09e14e5ff3812149e979a7f004178f2bf","tier":"starter_2024"},"version":805,"publish_version":805,"role":null,"authored":false,"authors":[{"type":"individual","id":"16d1a97215fda001","login":"vivrao9","name":"Vivek Rao","avatar_url":"https://avatars-next.observableusercontent.com/bef3b5fc8c76d305b837832196006da09e14e5ff3812149e979a7f004178f2bf","tier":null}],"members":[{"type":"individual","id":"16d1a97215fda001","login":"vivrao9","name":"Vivek Rao","avatar_url":"https://avatars-next.observableusercontent.com/bef3b5fc8c76d305b837832196006da09e14e5ff3812149e979a7f004178f2bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d95e5d605ee07e41","slug":"vivek-tackles-d3","title":"Vivek tackles D3","owner":{"id":"0b85d005387c1032","login":"vivrao9","name":"Vivek Rao"}},"type":"notebook","body":{"title":"Utilities stocks outperformed the S&P500 in 2018.","cells":[{"id":0,"value":"# Utilities stocks outperformed the S&P500 in 2018.\n`The last quarter — when most stocks lost — saw gains for the industry as the country braced itself for a colder-than-normal winter.`\n\n``Note: This data excludes financial institutions.``","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"// don't forget CSS attributes are separated by\n// the semicolon ;\n// it's been a minute!\nhtml`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"### Create scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"FYscale = d3.scaleLinear()\n .domain([-1.5,1.5]) //d3.extent(df, d => +d.FY2018))\n .range([margin.left, width - margin.right])\n .nice();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"Xaxis = d3.axisBottom(FYscale);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"Xaxis.ticks(6)\n .tickFormat(function(d) {\n return 100*d + \"%\";\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"Q4scale = d3.scaleLinear()\n .domain([-3, 3])//d3.extent(df, d => +d.Q4))\n .range([height - margin.bottom, margin.top])\n .nice();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"Yaxis = d3.axisLeft(Q4scale);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"Yaxis.ticks(6)\n .tickFormat(function(d) {\n return 100*d + \"%\";\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"### Create colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"sectors = new Set(df.map(d => d.sector))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"sector_colors = [\"#ff9743\",\n\"#1f48bb\",\n\"#9bd846\",\n\"#e591ff\",\n\"#038100\",\n\"#a7006b\",\n\"#2b5e27\",\n\"#b3002b\",\n\"#ffa1d2\",\n\"#6e4c18\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"//create a color scale\nc10 = d3.scaleOrdinal()\n .domain(sectors) //new Set(d3.map(df, d => d.sector)))\n .range(sector_colors);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"df = FileAttachment(\"final@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"margin = ({ left: 20, right: 20, top: 20, bottom: 20 });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"