31:T1405,heatmapChartStatic = { const svg = d3.create("svg") .attr("id", "heatmapChart") .attr("viewBox", [0, 0, width, height]) //.style("background-color", "#110788"); // Reference of transitions here https://observablehq.com/@d3/selection-join const t = svg.transition() .duration(750); svg.append("text") .attr("id", "title") .text("05. Heatmap: complete dataset along the time // Mapping to colors.") .attr("font-weight", "bold") .attr("x", 5) .attr("y", 15) .attr("dominant-baseline", "hanging"); // to vertically align the text. https://jsfiddle.net/api/mdn/ const axis = svg.append('g') .attr("id", "axis"); const xAxis = axis.append('g') .attr("id", "xAxis"); xAxis.append("g") .attr("id", "xAxis-months") .call(xAxisTimeMonths); xAxis.append("g") .attr("id", "xAxis-years") .call(xAxisTimeYears); axis.append("g") .attr("id", "yAxis") .call(yAxisTaxes); const heatmap = svg.append('g') .attr("id", "heatmap"); console.log('binsTaxes', binsTaxes); // Create groups for each column where append the rects let column = heatmap.selectAll("g.columns") .data(binsTaxes) .join('g') column.attr("class", "columns"); column.attr("id", (d,i) => "timeStep" + i) // We can store our data as custom data-... property // .attr("data-dates", (d, i) => `${formatDate(binsTime[i].x0)}-${formatDate(binsTime[i].x1)}`) .attr("data-dates", d => `${formatDate(d.x0)}-${formatDate(d.x1)}`) // <<<<<<<<<<<< .attr("data-i", (d, i) => i); // Shift the entire group to the appropriate x-location column //.attr("transform", function(d,i) { // return translate((xTime(binsTime[i].x0)) - margin.left, 0); // OK ?? //}) .attr("transform", d => translate((xTime(d.x0)) - margin.left, 0)) // <<<<<<<<<<<< // NEW <---------------------------- //Store width information in data-attribute so childs can access to it //.attr("data-width", function(d,i) { // return xTime(binsTime[i].x1) - xTime(binsTime[i].x0) // }) .attr("data-width", d => xTime(d.x1) - xTime(d.x0)); // <<<<<<<<<<<< const rects = column.selectAll("rect") .data(d => d) .join("rect") .attr("x", xTime(new Date(2018,0,1)) + 1) // TODO - cambiarlo para que no esté a mano, sino que sea la fecha 0 del item 0, sea lo que sea. //.attr("width", (width - margin.left - margin.right) / (binsTaxes.length)) // TO FIXXX // NEW <---------------------------- .attr("width", function (d) { let parentNodeInfoWidth = d3.select(this.parentNode).attr("data-width"); return parentNodeInfoWidth; }) .attr("height", d => yTaxes(d.x0) - yTaxes(d.x1)) // .attr("width", (d,i) => xTime(binsTaxes[i].x0) - xTime(binsTime[i].x1)) // EXACT TIME SCALE .attr("y", d => yTaxes(d.x0) - (yTaxes(d.x0) - yTaxes(d.x1))) // We can store our data as custom data-... property USEFUL FOR CHECKS .attr("data-counting", d => d.length) .attr("data-taxesRangeA", d => d.x0) .attr("data-taxesRangeB", d => d.x1) // Color magic... .attr("stroke-width", '0.5') .attr("fill", d => (d.length === 0) ? "white" : colorScale(d.length)) // EMPTY DATA - WHITE RECTS .attr("stroke", d => (d.length === 0) ? "white" : colorScale(d.length)); //.attr("fill", d => colorScale(d.length)) //.attr("stroke", d => colorScale(d.length)); // MOUSE EVENTS rects .on("mouseover", onMouseOver) .on("mousemove", onMouseMove) .on("mouseout", onMouseOut) // ANNOTATIONS (to refactor outside) // Custom line to highlight a date // TEST // https://www.expansion.com/economia/funcion-publica/2017/11/10/5a0598bde2704e446e8b458f.html const myDate = new Date(2018,2,9); // 9 Marzo 2018 (entrada en vigor?) const annotations = svg.append('g') .attr("id", "annotations"); const lawAnnotation = annotations.append('g') .attr("id", "law-dates"); const lawDates = [ new Date(2018,2,9), //new Date(2018,5,9), ]; lawAnnotation.selectAll('line') .data(lawDates) .enter() .append('line') .attr("x1", d => xTime(d)) .attr("x2", d => xTime(d)) .attr("y1", d => yTaxes(0)) .attr("y2", margin.top) .attr("stroke", "black") .attr("stroke-dasharray", "6"); lawAnnotation.selectAll('text') .data(lawDates) .enter() .append('text') .attr("x", d => xTime(d) + 10) .attr("y", margin.top + 15) // .text(d =>`Fecha de entrada en vigor: ${formatDate(d)}`) .text(d =>`${formatDate(d)}`) .style("font-size", "12px") .style("fill", "black") .style("text-anchor", "start") .attr("writing-mode", "vertical-lr"); // More here https://css-tricks.com/almanac/properties/w/writing-mode/ //annotations svg.append('g') .attr("id", "fancy-annotations") .attr("class", "annotation-group") .style('font-size', "16px"); //.call(makeAnnotations); return svg.node(); }32:T607,function onMouseOver (d){ // Hovered element actions d3.select(this).attr("style", "stroke:black;stroke-width:3"); d3.select(this).classed('active', true); // Extra info div actions const extraInfoDiv = d3.select('#extraInfo-div'); const extraInfoDiv3 = d3.select('#extraInfo-div3'); let dateMin = ""; let dateMax = ""; // let test01 = xTime.invert(d3.event.pageX); // console.log(test01); extraInfoDiv.selectAll('.extra-info') .style("visibility", "visible") .text(`Nº de contratos: ${this.dataset.counting}`); extraInfoDiv3.selectAll('.extra-info3') .style("visibility", "visible") .text(`Nº de contratos: ${this.dataset.counting}`); // Tooltip actions // We can access the counting via d. (it's binded) // tooltip.text(`Nº de contratos: ${d.length}`); // Or we can access via custom data-... attributes we use 'dataset' // tooltip.text(`Nº de contratos: ${this.dataset.counting}`); // Example of html tooltip with full control // tooltip.html("

I'm a tooltip written in HTML

Fancy
Isn't it?"); tooltip.html(`

Nº de contratos: ${this.dataset.counting}

`) return tooltip.style("visibility", "visible"); }33:T6e4,// Based on https://observablehq.com/@hydrosquall/d3-annotation-with-d3-line-chart annotations = { const item01 = '3748152'; const item02 = '3044012'; // Helper function to lookup where annotations match values const infoItems = itemId => dataFiltered.find(element => element.id === itemId); infoItems(item01) ; return [{ id: infoItems(item01).id, // If you don't provide a custom "type" attribute in your options dictionary, , // the default type in the getAnnotations function will be used. note: { title: `Servicio de Salud de las Illes Balears (${infoItems(item01).budgetedTax}€)`, label: "Empresa: CROITORU VICTOR", wrap: 250 }, x: xTime(infoItems(item01).date), y: yTaxes(infoItems(item01).budgetedTax), dx: 50, dy: -50, connector: { end: "dot", // 'arrow'/'dot' endScale: 0.5 }, }, { id: infoItems(item02).id, note: { title: `Servicio de Salud de las Illes Balears (${infoItems(item02).budgetedTax}€)`, label: "Empresa: CROITORU VICTOR", wrap: 250 }, x: xTime(infoItems(item02).date), y: yTaxes(infoItems(item02).budgetedTax), dx: 50, dy: -50, connector: { end: "dot", // 'arrow'/'dot' endScale: 0.5 }, } ] .map(d => { d.color = "black"; return d; }) } // I used 4 of the 8 annotation types, be sure to see the other 4 options when building your own! // http://d3-annotation.susielu.com/#types34:T5f8,styles = html` `35:[{"id":"14b3e130553a09bbf9229d945ef4cc6e0d3cd4d6f2a2af7b7f6b3eeebf6a6201e710267ab2067e148de06941ce1c5790e3b5c5682932a63a781c78ea90c277eb","href":"https://static.observableusercontent.com/files/14b3e130553a09bbf9229d945ef4cc6e0d3cd4d6f2a2af7b7f6b3eeebf6a6201e710267ab2067e148de06941ce1c5790e3b5c5682932a63a781c78ea90c277eb","name":"Screen Recording 2021-02-26 at 20.46.28.mov","type":"video/quicktime","lastModified":1614369068366.108,"size":7145249}] 2f:{"title":"Contratación 07 // OBRAS article","cells":[{"id":0,"value":"md`# Contratación 07 // OBRAS article (prototype ES)\n\nThe final chart was implemented as a scrollytelling piece thanks to scrollama.js and is part of this article, published at Civio (www.civio.es)\n\n* [The invasion of the €14,999.99 minor contracts](https://civio.es/quien-cobra-la-obra/2020/01/29/the-invasion-of-minor-contracts-of-14999eu/) - EN version.\n* [La invasión de los contratos menores de 14.999,99€](https://civio.es/quien-cobra-la-obra/2020/01/29/the-invasion-of-minor-contracts-of-14999eu/) - ES version.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3987,"value":"videoRecording = FileAttachment(\"Screen Recording 2021-02-26 at 20.46.28.mov\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"md\n`\n---\n\n### svg & chart\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"viewof height = slider({\n min: 0, \n max: 600, \n step: 20, \n value: 500, \n title: \"Chart height\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2342,"value":"md\n`automatic width: ${width}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3968,"value":"width = 660","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"md\n`\n---\n\n### margin & height\nbasic layout settings for the svg\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"// Objects need to go between brackets ({....})\nmargin = ({top: 90, right: 0, bottom: 90, left: 130})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md\n`\n---\n\n### data & data-manipulation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"md\n`\nI have referenced d3 and our dataset through github gist as explained [here.](https://observablehq.com/@observablehq/introduction-to-data)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"// Performing data transformation by changing the key names and parsing dates and numbers (parseDate funtion at the end of the document)\ndata = {\n const URL = \"https://data.civio.es/quiencobralaobra/contratacion-menores/obras-res-obras.csv\";\n const data = await d3.csv(URL, ({feed_id, budgeted_tax_exclusive_amount, awarded_tax_exclusive_amount, tender_award_date}) => ({id: feed_id, budgetedTax: +budgeted_tax_exclusive_amount, date: parseDate(tender_award_date)}))\n data.x = \"Periodo de tiempo registrado\";\n data.y = \"Importes de los contratos menores $$\"; \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"md `\n#### 1. Filtering by taxes and dates & sorting.\nWe are setting a maximum cuttoff of 19.000€ to remove 3 dummy items with wrong dates. Also a minimun cuttoff in the lower part (0, 3000, 14500 etc - via selector) to go closer to the border. We also need our dataset sorted by dates (2018 -> 2019).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2765,"value":"dataFiltered = {\n const cutoffDate = new Date(2019,7,1); // Cuttoff date (01/08/2019)\n const dataFiltered = data\n .filter(d => (d.budgetedTax <= 60000) && (d.budgetedTax >= taxDomainSelector))\n .filter(d => d.date < cutoffDate)\n .slice().sort((a,b) => d3.ascending(a.date, b.date));\n return dataFiltered; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`#### 2. Domains & ranges\nMapping the data on the x-axis (time) and the y-axis ($$ money)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"allDateDataDomain = d3.extent(dataFiltered, d => d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2243,"value":"allDateDataDomainNice = {\n // return [new Date(2018,0,1), new Date(2019,7,1)]\n return [new Date(2018,0,1), new Date(2019,7,1)]\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"allTaxesDomain = d3.extent(dataFiltered, d => d[taxSelector])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2054,"value":"md\n`\n#### scales\n...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"xTime = d3.scaleTime() // Continuous time scale\n // .domain([dateDataDomain[0], d3.timeMonth.ceil(dateDataDomain[1])+1])\n // .domain(dateDataDomain).nice() // To get nice start and end values \"rounding\" the domain\n .domain(allDateDataDomainNice)\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"yTaxes = d3.scaleLinear()\n .domain(allTaxesDomain)\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2049,"value":"md\n`\n#### histogram & bins\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"// Custom function to pack the data the way we want\nhistogramTime = d3.histogram()\n .value(d => d.date) // The vector of value (TIME!)\n .domain(xTime.domain())\n // .thresholds(xTime.ticks(detailBinsTime)) // Number of bins (user choice via slider)\n // .thresholds(xTime.ticks(19))\n .thresholds(xTime.ticks(d3[detailBinsTimeIntervals]))\n //.theresholds(xTime.ticks(detailBinsTimeIntervals))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1230,"value":"// Apply the histogram function to our data to get the bins\nbinsTime = histogramTime(dataFiltered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1656,"value":"// Custom function to pack the data the way we want\nhistogramTaxes = d3.histogram()\n .value(d => d[taxSelector]) // The vector of value (TAXES: user choice via selector)\n .domain(yTaxes.domain()) \n .thresholds(yTaxes.ticks(detailBinsTaxes)); // Number of bins (user choice via slider)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1660,"value":"// Apply the histogram function to each item of our packed data to get the bins on a second level\nbinsTaxes = binsTime\n .map(d => histogramTaxes(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3869,"value":"binsTaxes\n .forEach((d,i) => {\n d.x0 = binsTime[i].x0;\n d.x1 = binsTime[i].x1;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3879,"value":"//binsTaxes\n //.forEach((d,i) => d.x1 = binsTime[i].x1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3873,"value":"binsTaxes","pinned":true,"hidden":false,"mode":"ojs"},{"id":3875,"value":"binsTaxes[50].x1","pinned":true,"hidden":false,"mode":"ojs"},{"id":2056,"value":"md\n`\n#### axis\n...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"xAxisTimeMonths = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xTime)\n // .tickFormat(d3.timeFormat('%b %Y'))\n .tickFormat(d3.timeFormat('%b'))\n // .tickFormat(d => d <= d3.timeYear(d) ? d.getFullYear() : d.getMonth())\n //.ticks(d3.timeMonth.every(1))\n .ticks(d3.timeMonth)\n )\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", 35)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2072,"value":"// Mark the years!\nxAxisTimeYears = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom + 25})`)\n .call(d3.axisBottom(xTime)\n .ticks(d3.timeYear)\n .tickSize(0))\n .call(g => g.select(\".domain\")\n .remove())\n .call(g => g.selectAll(\"g text\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-size\", \"12px\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"yAxisTaxes = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yTaxes)\n //.tickValues([3000, 6000, 9000, 12000, 15000, 18000]) // Custom tick spacing\n)\n .call(g => g.select(\".domain\").remove())\n // .call(g => g.select(\".tick:last-of-type text\").clone()\n .call(g => g.append(\"text\")\n // .attr(\"x\", 5)\n // .attr(\"y\", -60)\n .attr(\"x\", -margin.left)\n .attr(\"y\", -margin.top)\n .attr(\"fill\", \"#000\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1706,"value":"md\n`\n#### color\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1709,"value":"colorScale = d3.scaleSequential()\n .domain([0, colorLevel]) // Custom cutoff\n // .domain([0, d3.max(binsTimeMultiple.flat(), d => d.length)]).nice() // Aquí los histogramas según se empaquete\n .interpolator(d3[\"interpolate\" + colorScheme])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3740,"value":"d3.max(binsTaxes.flat(), d => d.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2038,"value":"md\n`\n---\n\n### playing around with histograms / CHART\nEach column of the past histogram will be as well a histogram mapped/coded to color. So we will have an histogram which is a **collection of histograms through the time** represented as **a single heatmap**.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1978,"value":"viewof taxSelector = select({\n title: \"Tax selector\",\n description: \"Select between budgetedTax and awardedTax data.\",\n options: [\"budgetedTax\", \"awardedTax\"],\n value: \"budgetedTax\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1677,"value":"viewof colorScheme = select({\n title: \"Color Scheme\",\n description: \"Select the color scheme.\",\n options: [\"Viridis\", \"Magma\", \"Plasma\", \"Inferno\", \"Cividis\", \"Greys\", \"YlOrBr\", \"YlOrRd\"],\n //value: \"Plasma\"\n value: \"YlOrRd\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3272,"value":"viewof detailBinsTimeIntervals = select({\n title: \"Time - paquetes\", \n description: \"Agrupamientos en el tiempo (eje x. Mensual(19)/Quincenal(38)/Semanal(76)/...)\",\n options: [\"timeYear\", \"timeMonth\", \"timeWeek\", \"timeDay\"],\n value: \"timeWeek\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"viewof detailBinsTaxes = slider({\n min: 0, \n max: 300, \n step: 2, \n value: 250,\n //title: \"Nivel detalle Heatmap (eje y)\", \n description: \"Agrupamientos en importes $$ (eje y)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"legend({\n color: colorScale,\n title: \"LEGEND: Number of contracts\",\n width: 300,\n tickFormat: d => ((d === colorLevel) ? `> ${colorLevel}` : d)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2533,"value":"d3.select('#r1700')\n .append('circle')\n .attr('r', '2')\n .attr('class', 'legend-dot')\n .attr('cx', '150')\n .attr('cy', '5')\n .attr('fill', 'black')\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2400,"value":"viewof taxDomainSelector = select({\n title: \"Tax domain selector\",\n description: \"Domain of our dataset\",\n options: [\"0\", \"5000\", \"14000\", \n \"14500\"],\n value: \"0\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2193,"value":"viewof colorLevel = slider({\n min: 0, \n max: d3.max(binsTaxes.flat(), d => d.length), \n step: 1, \n value: 12,\n title: \"Sensibilidad de la escala de color\", \n description: \"Dónde ponemos el umbral máximo para hacer más 'sensibles' las zonas intermedias\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3749,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2892,"value":"extraInfo = {\n const extraInfoDiv = d3.create(\"div\")\n .attr(\"id\", \"extraInfo-div\")\n \n extraInfoDiv.append(\"h3\")\n .attr(\"class\", \"title\")\n .text(\"Contratos en detalle\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"x\", 5)\n .attr(\"y\", 15);\n \n extraInfoDiv.append(\"p\")\n .attr(\"class\", \"extra-info\")\n .text(\"test: here goes the counting\")\n .style(\"visibility\", \"hidden\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"x\", 5)\n .attr(\"y\", 15);\n \n extraInfoDiv.append(\"ul\")\n .attr(\"class\", \"extra-list\")\n // .text(\"Contratos en este periodo:\")\n .style(\"visibility\", \"hidden\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"x\", 5)\n .attr(\"y\", 15);\n \n return extraInfoDiv.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2463,"value":"tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n // Big test as example\n // .text(\"Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.\");\n .text(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2470,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2480,"value":"function onMouseMove (){\n \n // Tooltip actions\n let test01 = xTime.invert(d3.event.pageX + margin.left);\n // console.log(d3.event.pageX, test01);\n \n /*\n let x0 = this.x.baseVal.value;\n let x1 = this.width.baseVal.value;\n */\n //console.log(x0, x1);\n \n // let xValue0 = this.attr(\"x\");\n // let xValue1 = this.attr(\"width\")\n // console.log(xValue0, xValue1);\n \n d3.select('#heatmap').style(\"cursor\", \"pointer\");\n\n return tooltip.style(\"top\", (d3.event.pageY-10)+\"px\").style(\"left\",(d3.event.pageX+10)+\"px\");\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2483,"value":"function onMouseOut (){\n const myColor = d3.select(this).attr('fill');\n const myWidth = '0.5';\n \n // Hovered element actions\n d3.select(this).attr(\"style\", `stroke:${myColor};stroke-width:${myWidth}`);\n \n // Extra info div actions\n const extraInfoDiv = d3.select('#extraInfo-div');\n\n extraInfoDiv.selectAll('.extra-info')\n .style(\"visibility\", \"hidden\");\n\n // Tooltip actions\n tooltip.text(\"\");\n return tooltip.style(\"visibility\", \"hidden\");\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":3804,"value":"infoItems = itemId => dataFiltered.find(element => element.id === itemId); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":3806,"value":"infoItems(\"3748152\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3938,"value":"infoItems(\"3044012\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3499,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":3501,"value":"//makeAnnotations = d3.annotation().type(d3.annotationLabel).annotations(annotations)\nmakeAnnotations = d3.annotation()\n .editMode(false)\n/*\n .accessors({\n x: d => xTime(parseDate(d.date)),\n y: d => yTaxes(d.budgetedTax)\n })\n .accessorsInverse({\n date: d => formatDate(xTime.invert(d.x)),\n budgetedTax: d => yTaxes.invert(d.y)\n })\n*/\n\n .type(d3.annotationLabel)\n .annotations(annotations)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2495,"value":"md\n`\n---\n\n### stylesheet\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3677,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"md\n`\n---\n\n### d3 & others\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"import { slider, select, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\", \"d3-svg-annotation@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"md `\n#### handy fuctions\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"// Output date as \"month-year\"\nformatDate = d3.timeFormat('%d %b %Y')","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"// Output ad Date\nparseDate = d3.timeParse(\"%Y-%m-%d\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"function toLowerCase(a) {\n return a.toLowerCase()\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"// helper method to make translating easier\ntranslate = function(x, y) { \n return \"translate(\" + x + \",\" + y + \")\"; \n};","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}