2d:null 2e:["$","title",null,{"children":"D3 Horizon Chart II | timelyportfolio | Observable"}] 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:[] 31:{"id":"ba25bcc4d0ccc68e","slug":"d3-horizon-chart-ii","title":"D3 Horizon Chart II","thumbnail":"1e26ae2f2b3f80f0060032eb73002857eb87a405a442ede4e4567c5b62a8683d","access_level":"public","create_time":"$D2018-06-15T11:29:31.900Z","update_time":"$D2018-06-15T12:14:35.066Z","view_time":null,"first_public_time":"$D2018-06-15T12:11:51.015Z","has_unpublished_edits":null,"fork":{"id":"2d04695607ea3c98","slug":"horizon-chart-ii","title":"Horizon Chart II","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d77c15016dc2ccf9","login":"timelyportfolio","name":"timelyportfolio","avatar_url":"https://avatars-next.observableusercontent.com/9bef55d327befaf840e6acf550b7b4b5ca03dfb64509bb0e75c2f72c66614bb9","tier":"starter_2024"},"version":502,"publish_version":502,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc5bafe907f72822","login":"timelyportfolio","name":"timelyportfolio","avatar_url":"https://avatars-next.observableusercontent.com/9bef55d327befaf840e6acf550b7b4b5ca03dfb64509bb0e75c2f72c66614bb9","tier":null}],"members":[{"type":"individual","id":"fc5bafe907f72822","login":"timelyportfolio","name":"timelyportfolio","avatar_url":"https://avatars-next.observableusercontent.com/9bef55d327befaf840e6acf550b7b4b5ca03dfb64509bb0e75c2f72c66614bb9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"D3 Horizon Chart II","cells":[{"id":0,"value":"md`# D3 Horizon Chart II\n\nThis variation of a [horizon chart](/@mbostock/d3-horizon-chart) represents negative values in purples and positive values in greens. It shows the price of several stocks relative to May 2013.\n\nData: Yahoo Finance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"viewof overlap = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = data.length * 60 + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"margin = ({top: 10, right: 0, bottom: 30, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"step = y.bandwidth() - 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"color = i => d3[scheme][overlap * 2 + 1][i + (i >= 0) + overlap]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"y = d3.scaleBand()\n .domain(data.map(d => d.key))\n .range([margin.top, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = Promise.all([\"AAPL\", \"AMZN\", \"GOOG\", \"IBM\", \"MSFT\"].map(async key => {\n const values = await d3.csv(`https://gist.githubusercontent.com/mbostock/696604b8395aa68d0e7dcd74abd21dbb/raw/55c17dab8461cde25ca8c735543fba839b0c940b/${key}.csv`, d => {\n const date = parseDate(d[\"Date\"]);\n return {date, value: +d[\"Close\"]};\n });\n const v = values[0].value;\n return {key, values: values.map(({date, value}) => ({date, value: Math.log(value / v)}))};\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"