31:T4ec,// const chartTitle = svg.append("g") // .attr("class", "chart-title") // .attr("transform", width >= 840 ? `translate(${params.plot.x}, 5)` : `translate(15, 5)`) // .append("text") // .attr("id", "title-text") // // .attr("text-anchor", "middle") // // .attr("x", `${params.svg.width / 2}`) // .attr("text-anchor", "start") // .attr("x", 0) // .attr("y", 0) // .attr("dy", "2em") // .style("font-weight", "700") // .style("font-size", "clamp(.7rem, 2.5vw, 1.2rem)") // minimum, preferred, maximum // .text(data.title); // const chartSubtitle = svg.append("g") // .attr("class", "chart-subtitle") // .attr("transform", width >= 840 ? `translate(${params.plot.x}, 0)` : `translate(15, 0)`) // .append("text") // .attr("id", "subtitle-text") // .attr("text-anchor", "start") // .attr("x", 0) // .attr("y", 0) // .attr("dy", "4em") // .style("font-weight", "400") // .style("font-size", "clamp(.7rem, 2.5vw, 1.2rem)") // minimum, preferred, maximum // .text(width >= 480 ? data.subtitle : data.subtitle.substr(0, 25) + "…"); // truncation32:T50c, // const legend = svg.append("g") // .attr("class", "legend") // // Reposition the legend after yielding the SVG node // .call(d3Legend // .legendColor() // .shape("rect") // .shapeWidth(d3.max([scale.x.bandwidth(), 24])) // .shapeHeight(scale.y.bandwidth()) // .shapePadding(d3.max([scale.x.bandwidth() + 5, 24 + 5])) // .labelOffset(scale.y.bandwidth() + 5) // .title("Legend") // .orient('horizontal') // .cellFilter(d => d.data !== 0) // skip zero, if it's not interesting // .labelAlign('start') // .labelFormat('d') // .scale(scale.color) // .cells(4) // .ascending(true) // .labels(["None", "One", "Two", "Three"]) // ); // yield svg.node(); // yield, so that legend.node().getBBox() has results // // Calculate how much to shift legend group to fit in our plot area nicely // // via https://bl.ocks.org/sjengle/4e8777bed44557dadafa // const legendBounds = legend.node().getBBox(); // const legendXShift = params.svg.width - legendBounds.width - params.margin.right; // const legendYShift = -legendBounds.y + 16 //(params.margin.top - legendBounds.height); // legend.attr("transform", `translate(${legendXShift}, ${legendYShift})`);33:T416,popover = (g, value) => { if (!value) return g.style("display", "none"); g .style("display", null) .style("pointer-events", "none") .style("font", "400 12px/1.4 'Noto Sans', sans-serif"); // font style const path = g.selectAll("path") .data([null]) .join("path") .attr("fill", "white") .attr("stroke", "#202630"); // popover stroke const text = g.selectAll("text") .data([null]) .join("text") .call(text => text .selectAll("tspan") .data((value + "").split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (d, i) => `${i * 1.5}em`) .attr("text-anchor", "middle") .style("font-weight", (_, i) => i ? null : "700") .text(d => d)); const {x, y, width: w, height: h} = text.node().getBBox(); // Popover shape path.attr("d", ` M0.734375,0 H${w + 20} V${h + 20} H${w / 2 + 15} l-5,5 l-5,-5 H0.734375 V0Z`) .attr("transform", `translate(${-w / 2 - 10},${-(h + 20)})`); text.attr("transform", `translate(${0},${y - 20})`); }34:Td14,// const tooltip = d3.create("div") // .attr("id", "tooltip") // .attr("class", "tooltip") // .html(` // // // // `); // // function onMouseEnter(d) { // d3@5 // function onMouseEnter(event, d) { // d3@6 // const xPos = scale.x(d.x); // Update x // const yPos = scale.y(d.y); // Update y // tooltip.style("opacity", 1); // tooltip.style("transform", `translate(calc( -50% + ${xPos}px), calc(-100% + ${yPos}px))`); // tooltip.select("#name") // Update id // .text(d.y); // Update y // tooltip.select("#value") // Update id // .text(d.x); // Update x // tooltip.select("#date") // Update id // .text(d3.timeFormat("%d %b %Y")(d.date)); // Update date // } // function onMouseLeave() { // tooltip.style("opacity", 0); // } // const circles = svg.selectAll("g.circles") // .join("circle") // .attr("fill", "#5F428F") // .attr("r", 30) // .attr("cx", d => scale.x(d.x)) // .attr("cy", d => scale.y(d.y)) // .on("mouseenter", onMouseEnter) // .on("mouseleave", onMouseLeave); // return html` //

// ${tooltip.node()} // ${svg.node()} //

// // `; // stylesTooltip = html` // // `35:[] 2f:{"title":"Snippets to copy and paste","cells":[{"id":0,"value":"md`# Snippets to copy and paste`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`This notebook contains frequently used snippets to copy and paste into new notebooks.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`Some snippets are shown as Markdown notes while some are shown as cells. The cells are commented out to avoid breaking this notebook that doesn't have the necessary data and so on. They can be copied and the comments removed using ⌘/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"toc('h2, h3, h4', 'Table of Contents')","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"mdChartSetup = md`## Chart setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"// const svg = d3.select(DOM.svg(params.svg.width, params.svg.height))\n// .attr(\"id\", \"heatmap\");\n \n// const chartBackground = svg.append(\"rect\")\n// .attr(\"id\", \"chart-background\")\n// .attr(\"fill\", \"#F6F6F6\")\n// .attr(\"x\", 0)\n// .attr(\"y\", 0)\n// .attr(\"width\", params.svg.width)\n// .attr(\"height\", params.svg.height);\n \n// const plot = svg.append(\"g\")\n// .attr(\"id\", \"plot\")\n// .attr(\"transform\", `translate(${params.plot.x}, ${params.plot.y})`);\n\n// return svg.node();","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"mdChartTitles = md`## Chart titles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"mdByline = md`## Byline`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":" // svg.append(\"g\")\n // .attr(\"transform\", `translate(${params.svg.width - params.margin.right}, ${params.svg.height})`)\n // .append(\"text\")\n // .attr(\"id\", \"byline\")\n // .attr(\"x\", 0)\n // .attr(\"y\", 0)\n // .attr(\"dy\", \"-2.5em\")\n // .attr(\"text-anchor\", \"end\")\n // .text('@DiDoesDigital');","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"mdText = md`## Text`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### Responsive text with clamp \n\n~~~js\n.style(\"font-size\", \"clamp(.7rem, 2.5vw, 1.2rem)\") // minimum, preferred, maximum\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Text label with white text outline / halo\n\nBy cloning the value text element:\n\n~~~js\n const valueTextAndOutline = group\n .append(\"g\")\n .append(\"text\")\n .text(d.label) // update this\n .attr(\"dy\", \"1em\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", d => d.x) // update this\n .attr(\"y\", d => d.y) // update this\n .clone(true)\n .lower()\n .attr(\"aria-hidden\", \"true\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-linejoin\", \"round\");\n~~~\n\nYou may need to place the text label and its outline text element inside a group so that the \\`.lower()\\` call doesn't move the outline text element behind some other element in the same part of the SVG, such as a background \\`rect\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`Alternatively, as a halo function:\n\n~~~js\nfunction halo(text) {\n text.clone(true)\n .each(function() { this.parentNode.insertBefore(this, this.previousSibling); })\n .attr(\"aria-hidden\", \"true\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-linejoin\", \"round\");\n}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`For a \\`text-shadow\\` approach of lower quality but minimal hassle:\n\n~~~js\n.style(\"text-shadow\", \"-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff\")\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"mdStyleFont = md`### Style font`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`\n~~~js\n.style(\"font\", \"400 16px/1.4 'Source Sans Pro', 'Noto Sans', sans-serif\")\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`### Google fonts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"//@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');\n//@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');\n\ntypographyStyles = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"mdTextures = md`## Textures`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`Pattern legend:\n\n~~~js\n const pattern = svg.append(\"defs\")\n .append(\"pattern\")\n .attr(\"id\", \"dots\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", 60)\n .attr(\"height\", 60)\n .attr(\"patternUnits\", \"userSpaceOnUse\") \n\n const legend = svg.append(\"g\"); \n legend.attr(\"aria-label\", \"Legend\"); // Invisible legend title\n legend.append(\"rect\")\n .attr(\"role\", \"presentation\")\n .attr(\"fill\", \"url(#dots)\")\n .attr(\"width\", 13)\n .attr(\"height\", 13)\n .attr(\"rx\", 2)\n .attr(\"x\", margin.left / 2)\n .attr(\"y\", margin.top * 0.66);\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"mdLegends = md`## Legends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"mdScales = md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"// scale = {\n// const x = d3.scaleBand()\n// .domain(xAxisData)\n// .range([0, params.plot.width]);\n\n// const y = d3.scaleBand()\n// .domain(yAxisData)\n// .range([params.plot.height, 0]);\n\n// const size = d3.scaleSqrt()\n// .domain(d3.extent(data, d => d.words))\n// .range([5, width / 32]);\n\n// const color = d3.scaleOrdinal()\n// .domain(d3.map(data, d => d.revisionMode))\n// .range([\"#4EA376\", \"#9885D5\"])\n\n// const color2 = d3.scaleSequential()\n// .interpolator(d3.interpolatePurples)\n// .domain([0, 3]);\n\n// return {x: x, y: y, size: size, color: color}\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"mdAxes = md`## Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"// const gx = svg.append(\"g\")\n// .attr(\"id\", \"x-axis\")\n// .attr(\"class\", \"axis\")\n// .attr(\"transform\", `translate(${params.plot.x}, ${params.plot.y})`)\n// .call(axis.x)\n// .call(g => g.selectAll(\".tick text\").attr('dx', '0.25em'));\n\n// const gy = svg.append(\"g\")\n// .attr(\"id\", \"y-axis\")\n// .attr(\"class\", \"axis\")\n// .attr(\"transform\", `translate(${params.plot.x}, ${params.plot.y})`)\n// .call(axis.y);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":" // const xAxis = d3.axisBottom(scale.x)\n // .ticks(width / 120)\n // .tickPadding(6)\n // .tickSizeOuter(0)\n // .tickSizeInner(0)\n // .tickFormat(d3.timeFormat('%-I:%M %p'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"// axis = {\n// const x = d3.axisTop(scale.x)\n// .tickPadding(3)\n// .tickSizeOuter(0)\n// .tickSizeInner(0)\n// .call(g => g.selectAll(\".tick text\").attr(\"fill\", \"#202630\").style(\"font-size\", 16).attr(\"font-family\", \"'Source Sans Pro', sans-serif\"))\n// .call(g => g.selectAll(\"path.domain\").attr(\"stroke\", \"#202630\"));\n \n// const y = d3.axisLeft(scale.y)\n// .tickPadding(3)\n// .tickSizeOuter(0)\n// .tickSizeInner(0);\n\n// return {x: x, y: y};\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"mdPopovers = md`## Popovers and tooltips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"mdInputs = md`## Inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"// viewof sortFunction = select({\n// title: \"Sort\",\n// description: \"Select the sort function to use for sorting rows.\",\n// options: [\"RatedByMostKitties\", \"RatedTopGoodieByMostKitties\"],\n// value: \"RatedByMostKitties\"\n// })\n\n// Usage:\n// // if (sortFunction === \"RatedByMostKitties\") { return \"doX\" } else if (sortFunction === \"RatedTopGoodieByMostKitties\") { return \"doY\" }","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"mdParams = md`## Params`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"// params = {\n// let output = {};\n \n// output[\"svg\"] = {\n// \"width\": width,\n// \"height\": d3.max([width / 1.618, 450]) // golden ratio\n// };\n \n// output[\"margin\"] = {\n// \"top\": 168,\n// \"right\": d3.max([width / 24, 12]),\n// \"bottom\": 72,\n// \"left\": d3.max([width / 6, 72])\n// };\n \n// output[\"plot\"] = {\n// \"x\": output[\"margin\"][\"left\"],\n// \"y\": output[\"margin\"][\"top\"],\n// \"width\": output[\"svg\"][\"width\"] - output[\"margin\"][\"left\"] - output[\"margin\"][\"right\"],\n// \"height\": output[\"svg\"][\"height\"] - output[\"margin\"][\"top\"] - output[\"margin\"][\"bottom\"]\n// };\n\n// return output;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"mdData = md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"// rawData = d3.csvParse(await FileAttachment(\"someFileName.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"// data = {\n// const timeParser = d3.timeParse(\"%d %b %Y\"); \n// const csvString = await FileAttachment(\"filename.csv\").text();\n// const rowConversionFunction = ({\n// \"Title\": title, \n// \"URL\": url,\n// \"Number of cells\": y,\n// \"Date\": x\n// }) => ({\n// title, \n// url,\n// x: timeParser(x), \n// y: +y\n// });\n// const dataObjectTarget = d3.csvParse(csvString, rowConversionFunction);\n// const extraPropertiesSource = {\n// xAxisLabel: \"Date →\", \n// yAxisLabel: \"↑ Cells\",\n// title: \"The number of cells written over time\"\n// };\n// return Object.assign(dataObjectTarget, extraPropertiesSource);\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"// const timeParser = d3.timeParse(\"%d/%m/%Y %H:%M:%S\"); // 02/07/2020 07:33:01\n// const rowConversionFunction = ({\n// \"field1\": field1,\n// \"field2\": field2,\n// \"numberStoredAsString\": num,\n// \"dateField\": date\n// }) => {\n// return {\n// field1,\n// field2: field2,\n// num: +num,\n// date: timeParser(datetime)\n// }\n// };\n// let dataObjectTarget = await d3.tsvParse(tsv, rowConversionFunction);\n\n// // tsv = `field1\tfield2\tnumberStoredAsString\tdateField\n// // value1\tvalue2\tvalue3\tvalue4`","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"mdFormat = md`## Format`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"// format = d3.format(\",d\") // 1,000 - group separated (e.g. comma for thousands) decimal notation, rounded to integer","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"mdDependencies = md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"import {toc} from \"@tomshanley/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"md`See [Observable inputs](https://observablehq.com/@observablehq/inputs)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"// import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"// d3Legend = require('d3-svg-legend'); // https://d3-legend.susielu.com/","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"// d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}