33:T792,chart = { const div = html`

` const rule = d3.select(div).append("div") .classed("rule", true) const line = rule.append("div") .classed("line", true) .style("display", "none") .style("pointer-events", "none") .style("width", "1px") .style("background", "#000") .style("position", "absolute") .style("left", "100px") .style("top", "0px") .style("bottom", "0px") d3.select(div).on("mouseover", function() { line.style("display", "") }) d3.select(div).on("mousemove", function() { // need to figure out why cursor not aligning with line line.style("left", (d3.event.x - 1) + "px") }) d3.select(div).on("mouseout", function() { line.style("display", "none") }) const svg = d3.select(div).append("svg") .attr("width", width) .attr("height", height); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const serie = svg.append("g") .selectAll("g") .data(data) .enter().append("g") .attr("transform", d => `translate(0,${y(d.key) + y.bandwidth()})`); serie.append("clipPath") .attr("id", d => (d.clip = DOM.uid("clip")).id) .append("rect") .attr("width", width) .attr("y", -step) .attr("height", step); serie.append("defs").append("path") .attr("id", d => (d.path = DOM.uid("path")).id) .attr("d", d => area(d.values)); serie.append("g") .attr("clip-path", d => d.clip) .selectAll("use") .data(d => Array.from( {length: overlap * 2}, (_, i) => Object.assign({index: i < overlap ? -i - 1 : i - overlap}, d) )) .enter().append("use") .attr("fill", d => color(d.index)) .attr("transform", d => mirror && d.index < 0 ? `scale(1,-1) translate(0,${(d.index + 1) * y.bandwidth()})` : `translate(0,${d.index * y.bandwidth()})`) .attr("xlink:href", d => d.path.href); return div; }34:[] 32:{"cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"viewof mirror = {\n const label = html` Mirror negative values`;\n label.value = label.control.checked;\n label.onclick = event => {\n label.value = label.control.checked;\n label.dispatchEvent(new CustomEvent(\"input\"));\n };\n return label;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof overlap = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = data.length * 60 + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"margin = ({top: 10, right: 0, bottom: 30, left: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"step = y.bandwidth() - 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"color = i => d3[scheme][overlap * 2 + 1][i + (i >= 0) + overlap]","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"x = d3.scaleTime()\n .domain([data[0].values[0].date, data[0].values[data[0].values.length - 1].date])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"y = d3.scaleBand()\n .domain(data.map(d => d.key))\n .range([margin.top, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"z = {\n const max = d3.max(data, d => d3.max(d.values, d => Math.abs(d.value)));\n return d3.scaleLinear()\n .domain([-max, +max])\n .range([overlap * step, -overlap * step]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisRight(y).tickSize(0).tickPadding(4))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"area = d3.area()\n .curve(d3.curveStep)\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y0(0)\n .y1(d => z(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"data = {\n const data = await d3.csv(\"https://raw.githubusercontent.com/mieftanchews/Test/master/test1.csv\", ({name, date, risk_score}) => ({name, date: new Date(date * 1000), value: +risk_score}));\n return d3.nest()\n .key(d => d.name)\n .sortValues((a, b) => a.date - b.date)\n .entries(data)\n .sort((a, b) => b.sum - a.sum);\n\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}