2d:null 2e:["$","title",null,{"children":"Blocks versus Functions | Gordon Erlebacher | Observable"}] 33:T721,LinePlotFunction = { const container = ContainerFunction() //ContainerFunction() const width = 500 const height = 100 const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); const data = d3.pairs(data_synth) // not sure needed console.log(data) const div = d3 .select(container) .append("div") .classed("tooltip", true); // create a new tooltip, // passing it a selection for the tooltip's DOM element. const tooltip = new Tooltip(div); function tooltipContents(datum) { // << PROBABLY SOMETHING WRONG <<<< HOW TO FIX? // Datum is an [a,b] pair, where a and b are (date, close) const [ a, b ] = [datum[0], datum[1]]; const text = `(${a.date}, ${a.close})
(${b.date}, ${b.close})`; return text } svg.append("path") .attr("fill", "None") // necessary for line .attr("stroke", "steelblue") // necessary for line .attr("stroke-width", 1.5) .attr("stroke-miterlimit", 1) .attr("d", line(data_synth)); svg.append("g") .attr("fill", "none") // worked // Do not think that pointer-events is required // pointer-events are useful when there are overlapping elements //.attr("pointer-events", "fill") // "none": no tooltips .selectAll("rect") .data(data) .join("rect") // these rectangles are selection regions .attr("x", ([a, b]) => x(a.date)) .attr("height", height) // trick to offer a selection region .attr("width", ([a, b]) => x(b.date) - x(a.date)) .attr('fill','red').attr('opacity','.5') .on("mouseout", () => tooltip.hide()) .on("mousemove", event => tooltip.move(event)) .on("mouseover", (event, d) => {tooltip.display(d, tooltipContents); }) return container }34:T5ec,LinePlotBlock = { const container = ContainerBlock const width = 500 const height = 100 const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); const data = d3.pairs(data_synth) // not sure needed console.log(data) const div = d3 .select(container) .append("div") .classed("tooltip", true); const tooltip = new Tooltip(div); function tooltipContents(datum) { // << PROBABLY SOMETHING WRONG <<<< HOW TO FIX? // Datum is an [a,b] pair, where a and b are (date, close) const [ a, b ] = [datum[0], datum[1]]; const text = `(${a.date}, ${a.close})
(${b.date}, ${b.close})`; return text } svg.append("path") .attr("fill", "None") // necessary for line .attr("stroke", "steelblue") // necessary for line .attr("stroke-width", 1.5) .attr("stroke-miterlimit", 1) .attr("d", line(data_synth)); svg.append("g") .attr("fill", "none") // worked .selectAll("rect") .data(data) .join("rect") // these rectangles are selection regions .attr("x", ([a, b]) => x(a.date)) .attr("height", height) // trick to offer a selection region .attr("width", ([a, b]) => x(b.date) - x(a.date)) .attr('fill','red').attr('opacity','.5') .on("mouseout", () => tooltip.hide()) .on("mousemove", event => tooltip.move(event)) .on("mouseover", (event, d) => {tooltip.display(d, tooltipContents); }) return container }35:[] 31:{"id":"59c7af65e00cf484","slug":"series-of-increasingly-complex-charts","title":"Blocks versus Functions","thumbnail":"9d4db23fec1e676c5116f6308edd7e21fbfe95c275eaf61f8df8aa8f1eda3ee1","access_level":"public","create_time":"$D2021-04-15T20:11:39.446Z","update_time":"$D2021-04-15T22:25:59.794Z","view_time":null,"first_public_time":"$D2021-04-15T20:11:55.547Z","has_unpublished_edits":null,"fork":{"id":"fa3f2d2c93e9043c","slug":"draw-your-own-connected-scatterplot","title":"Series of increasingly complex charts","owner":{"id":"1cbc9ec772dd5cb2","login":"erlebach","name":"Gordon Erlebacher"}},"stars":1,"starred":false,"owner":{"type":"team","id":"1cbc9ec772dd5cb2","login":"erlebach","name":"Gordon Erlebacher","avatar_url":"https://avatars-next.observableusercontent.com/2bb0f34515ab70ab70810f12ce5e6c1570f432bb114e926e736b9ef0230a70b3","tier":"starter_2024"},"version":813,"publish_version":813,"role":null,"authored":false,"authors":[{"type":"individual","id":"db49a4778a16185e","login":"erlebach","name":"Gordon Erlebacher","avatar_url":"https://avatars-next.observableusercontent.com/2bb0f34515ab70ab70810f12ce5e6c1570f432bb114e926e736b9ef0230a70b3","tier":null}],"members":[{"type":"individual","id":"db49a4778a16185e","login":"erlebach","name":"Gordon Erlebacher","avatar_url":"https://avatars-next.observableusercontent.com/2bb0f34515ab70ab70810f12ce5e6c1570f432bb114e926e736b9ef0230a70b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Blocks versus Functions","cells":[{"id":747,"value":"md`# Blocks versus Functions`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"md`# Container Function`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"function ContainerFunction() {\n const container = html`

\n \n

`;\n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"md`## Line Plot using Container Function`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"md`# Container Block`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"ContainerBlock = {\n const container = html`

\n \n

`;\n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"md`## Line chart using ContainerBlock\n* Everytime I run this, I get an additional plot\n* These plots are above the ContainerBlock`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"md`# Appendix`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"data_synth = [{date:50, close:100.}, {date:70, close:110}, {date:90, close:93}, {date:100, close:102}, {date:105, close:74}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"width = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"data3 = new Array(20).fill(undefined).map(() => ({\n x: Math.floor(Math.random() * (width - margin.left - margin.right)),\n y: Math.floor(Math.random() * (height - margin.top - margin.bottom))\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"line = d3.line().x(d => x(d.date)).y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"line(data_synth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data_synth, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data_synth, d => d.close)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"