2d:null 2e:["$","title",null,{"children":"Series of increasingly complex charts | Gordon Erlebacher | Observable"}] 33:T9f4,scattergram = { const container = html``; //const tooltip = new Tooltip(); /* const svg = d3.create("svg") .attr("viewBox", [0, 0, 500, 500]); */ /* d3.select('svg').selectAll('*').remove(); const svg = d3.select(DOM.svg(width, height)) */ // original const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); 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) { const { x, y } = datum; // return `x: ${x}, y: ${y}`; return `gordon` // Both `text` and "text" work; html`text` does not work } /* 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") .call(xAxis); svg.append("g") .call(yAxis); */ /* svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(data_synth)) .join("rect") // these rectangles are selection regions .attr("x", ([a, b]) => x(a.date)) .attr("height", height) .attr("width", ([a, b]) => x(b.date) - x(a.date)) //.attr('fill','red').attr('opacity','.5') .on("mouseover", (event, a) => tooltip.show(a)) // was (event, [a] .on("mouseout", () => tooltip.hide());*/ svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) // No effect .selectAll("circle") .data(data3) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 5) .attr("fill", "#333") .on("mouseover", (event, d) => { tooltip.display(d, tooltipContents); }) .on("mouseout", () => { tooltip.hide(); }) .on("mousemove", event => { tooltip.move(event); }); //svg.append(() => tooltip.node); // CREATES A PROBLEM. WHY? return container; //return svg.node(); }34:T8e1,LinePlot = { /*const container = html``; */ const container = Container //const container = Container() 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") .call(xAxis); svg.append("g") .call(yAxis); */ 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 }35:T7c6,viewof data = { // let data = []; // let time0 = 0; // let timer = null; /* const x = d3.scaleLinear() .range([margin.left, size - margin.right]); const y = d3.scaleLinear() .range([size - margin.bottom, margin.top]); const line = d3.line() .x(d => x(d[0])) .y(d => y(d[1])); */ const svg = d3.select(DOM.svg(size, size)) //.property("value", data); /*svg.append("g") // Horizontal axis .attr("transform", `translate(0,${size - margin.bottom})`) .call(d3.axisBottom(x)) .select(".domain") .attr("stroke", d3.schemeSet1[0]) .attr("stroke-width", 2); */ /* svg.append("g") // Vertical axis .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .select(".domain") .attr("stroke", d3.schemeSet1[1]) .attr("stroke-width", 2);*/ svg.append("circle") .attr("cx", 150) .attr("cy", 150) .attr("r", 50) .attr("fill", "red") /* const path = svg.append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5); */ /* svg.append("rect") .attr("width", size) .attr("height", size) .attr("fill", "none") .attr("pointer-events", "all") */ /* .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); */ /* function dragstarted() { data = []; time0 = Date.now(); timer = d3.timer(ticked); svg.property("value", data); path.datum(data); dragged.call(this); }*/ /* function dragged() { const [mx, my] = d3.mouse(this); const point = [x.invert(mx), y.invert(my), (Date.now() - time0) / 1000]; data.push(point, point.slice()); svg.dispatch("input"); path.attr("d", line); } function dragended() { timer.stop(); } */ /*function ticked() { data[data.length - 1][2] = (Date.now() - time0) / 1000; svg.dispatch("input"); }*/ return svg.node(); }36:[] 31:{"id":"fa3f2d2c93e9043c","slug":"draw-your-own-connected-scatterplot","title":"Series of increasingly complex charts","thumbnail":"ea70d9818a778275eb983f6df1ffc449abfc2b1e9147dd4d44282c90876af40b","access_level":"public","create_time":"$D2021-04-14T17:10:30.770Z","update_time":"$D2021-04-16T13:49:28.625Z","view_time":null,"first_public_time":"$D2021-04-15T01:37:33.182Z","has_unpublished_edits":null,"fork":{"id":"f8691bcea34a97d6","slug":"draw-your-own-connected-scatterplot","title":"Draw Your Own Connected Scatterplot","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1cbc9ec772dd5cb2","login":"erlebach","name":"Gordon Erlebacher","avatar_url":"https://avatars-next.observableusercontent.com/2bb0f34515ab70ab70810f12ce5e6c1570f432bb114e926e736b9ef0230a70b3","tier":"starter_2024"},"version":721,"publish_version":721,"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":3,"collection":null,"type":"notebook","body":{"title":"Series of increasingly complex charts","cells":[{"id":31,"value":"md`# Series of increasingly complex charts\n\nStarting from the simplest possible D3 program, progressively enhance it towards a network-based model with selections, static and dynamic tooltips. `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`# Simplest Program that draws an image`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"{ // Use a block for compound cells\n const size = 200\n const svg = d3.select(DOM.svg(size, size))\n \n svg.append(\"circle\")\n .attr(\"cx\", 75)\n .attr(\"cy\", 75)\n .attr(\"r\", 50)\n .attr(\"fill\", \"red\")\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"{ // Use a block for compound cells\n const size = 200\n //const svg = d3.select(DOM.svg(size, size)) // Option 1\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height) // option 2\n //const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]); // circle is gigantic\n \n svg.append(\"circle\")\n .attr(\"cx\", 75)\n .attr(\"cy\", 75)\n .attr(\"r\", radius)\n .attr(\"fill\", \"red\")\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`## Add several slider bars (width, height, radius)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"viewof width = slider({\n min: 0, max: 500, step: 10, value: 250, format: \",\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"viewof height = slider({\n min: 0, max: 500, step: 10, value: 250, format: \",\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"viewof radius = slider({\n min: 0, max: 200, step: 10, value: 60, format: \",\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"{ // Use a block for compound cells\n const svg = d3.select(DOM.svg(width, height))\n \n svg.append(\"circle\")\n .attr(\"cx\", 75)\n .attr(\"cy\", 75)\n .attr(\"r\", radius)\n .attr(\"fill\", \"red\")\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`## Add a text highlight when the mouse hovers over the object`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"{ // Use a block for compound cells\n const svg = d3.select(DOM.svg(width, height))\n \n svg.append(\"circle\")\n .attr(\"cx\", 75)\n .attr(\"cy\", 75)\n .attr(\"r\", radius)\n .attr(\"fill\", \"red\")\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"/*function Container() {\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":716,"value":"Container = {\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":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":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":2,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`Here’s the corresponding dual-line chart:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"{\n const y = d3.scaleLinear()\n .range([size - margin.bottom, margin.top]);\n\n const z = d3.scaleLinear()\n .domain([0, data.length ? data[data.length - 1][2] : NaN])\n .range([margin.left, width - margin.right]);\n\n const svg = d3.select(DOM.svg(width, size));\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y));\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${size - margin.bottom})`)\n .call(d3.axisBottom(z).ticks(width / 80));\n\n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", d3.schemeSet1[0])\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", d3.line()\n .x(d => z(d[2]))\n .y(d => y(d[0])));\n\n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", d3.schemeSet1[1])\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", d3.line()\n .x(d => z(d[2]))\n .y(d => y(d[1])));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`In the dual-line chart, the *x*-axis represents the time you spent drawing the line in seconds. The *y*-axis represents both axes from the connected scatterplot. (This example assumes that they have the same domain ${tex`[0,1]`}; if the domains for the two dimensions are very different, you would need a second *y*-axis.)`","pinned":false,"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":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"