31:T85d,chart = { const svg = d3.select(DOM.svg(width, height)); let bars = svg.append("g").attr("transform", "translate(0, 0)"); createTooltip(); let categories = bars.selectAll(".bar") .data(stackedData) .enter() .append("g") .attr("class", "day") .attr("fill", (d,i)=>colorPalette(i)); categories .selectAll("rect") .data(function(d) { return d; }) .enter() .append("rect") .attr("x", (d, i) => x(i)) .attr("y", d => { return d[1] !== d[0] ? y(d[1]) : 0; }) .attr("rx", "3") .attr("ry", "3") .attr("width", x.bandwidth()) .attr("height", d => { return d[1] !== d[0] ? y(d[0]) - y(d[1]) : 0; }) .on("mouseenter", (d, i, nodes) => { let tooltip = d3.select("#tooltip"); tooltip.style("opacity", 1); let keys = Object.keys(data[0]); let legend = keys.map((k,i) => { let color = colorPalette(i-1); if(i != 0){ return `

${k}: ${hourformat(d.data[k]/60)} hours

` } else { return `

${k}: ${d.data[k]}

` } }).reverse().join("\n"); d3.select("#tooltip-text").html(`

` + legend + `

`); let barPos = nodes[i].getBoundingClientRect(); let tooltipWidth = tooltip.node().getBoundingClientRect().width; tooltip .style("left", ((barPos.x + (barPos.width / 2)) - (tooltipWidth / 2)) + "px") .style("top", (d3.event.pageY - 160) + "px"); }) .on("mouseleave", () => { console.log("LEAVE"); d3.select("#tooltip").style("opacity", 0); }); return svg.node(); }32:T492, createTooltip = () => { let tooltipWrapper = d3.select("body") .append("div") .attr("id", "tooltip") .style("opacity", "0") .style("pointer-events", "none") .style("position", "absolute") .style("transition", "all 0.1s ease-out"); tooltipWrapper.append("div") .attr("class", "tooltip") .attr("id", "tooltip-text") .attr("style", `background: #fff; z-index: 10; display: inline-block; pointer-events: none; text-align: left; padding: 0.6em 2em; padding-left: 7px; padding-right: 7px; white-space: nowrap; font: 12px sans-serif; background: white; border-radius: 8px;` ); tooltipWrapper.append("div") .attr("style", `position: absolute; bottom: 0; left: 50%; width: 13px; height: 13px; background: white; border: 1px solid #ddd; border-top-color: transparent; border-left-color: transparent; transform: translate(-50%, 50%) rotate(45deg); transform-origin: center center; z-index: 10;` ) } 33:[] 2f:{"title":"Hamburg from Dusk till Dawn","cells":[{"id":0,"value":"md`# Hamburg from Dusk till Dawn\n\nOne can see the daylight saving in action and also that the year is not entirely symetrical. Data is for 2020.\n\nDay 24 of [30DayChartChallenge](https://twitter.com/30DayChartChall) - *monochrome* time series`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"md `Data calculated using the Astra python package\n\n[Hamburg script](https://github.com/terezaif/30DayChartChallenge_Collection2021/blob/main/code/sunset.py)\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"hourformat = d3.format (\".1f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":" colorPalette = d3.scaleOrdinal().domain([0, Object.keys(data).slice(1).length - 1]).range([\"#111111\", \"#666666\", \"#cccccc\", \"#eeeeee\", \"#999999\", \"#666666\",\"#111111\"]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"padding = ({x:0.06, y:0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"x = d3.scaleBand().range([margin.left, width]).domain(data.map((d,i)=>i)).padding(padding.x);","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"y = d3.scaleLinear().range([height, margin.top])\n .domain([0,1440]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"y2 = d3.scaleLinear().rangeRound([height, margin.top])\n .domain([0,d3.max(data, d => {\n let keys = Object.keys(d);\n let maximum = 0;\n keys.forEach(k => { maximum += d[k]; })\n return maximum\n })]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"margin = ({\n top: 10,\n right: 10,\n bottom: 10,\n left: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"stackedData = d3.stack().keys(Object.keys(data[0]).slice(1))(data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"data = data_raw[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"data_raw = Promise.all(\n [\n \"https://raw.githubusercontent.com/terezaif/30DayChartChallenge/main/2021/dataset/sunrise_Hamburg.csv\"\n ].map((file) => d3.csv(file, d3.autoType))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}