2b:null 2c:["$","title",null,{"children":"Brushable bar chart | 3sam3 | Observable"}] 31:T1756,chart = { const svg = d3.create("svg") .attr('id', 'svg') .attr("viewBox", [0, 0, width, height]); const g = svg.append('g') .attr('class', 'line'); const crosshair = g.append('line') .attr('id', 'crosshairY') .attr("y1", 0) .attr("y2", height) .attr('stroke', '#cccccc') .attr('stroke-opacity', '0.2') .attr('stroke-width', x.bandwidth() + x.bandwidth()/20) .style('display', 'none'); const rects = svg.append("g") .attr('id', 'rects') .attr("fill", color) // .on('mouseout', () => d3.select(`#crosshairY`).style('display', 'none').transition()) .selectAll("rect") .data(data) .join("rect") .attr('id', d => 'unx' + d.time) .attr("x", (d, i) => x(i)) .attr("y", d => y(d.count)) .attr("height", d => y(0) - y(d.count)) .attr("width", x.bandwidth()) // brush let beingBrushed = false; const brush = d3.brushX() .extent([[margin.left, 0], [width - margin.right, height - margin.bottom + 0.5]]); const brushArea = svg.append("g") .attr('id', 'brushArea') .call(brush); const overlay = brushArea.select('.overlay'); overlay .on('mouseenter', onMouseEnter) .on('mousemove', onMouseMove) .on('mouseout', onMouseOut) brush .on('start', onBrushStart) .on('brush', onBrush) .on('end', onBrushEnd) svg.append("g") .attr('id', 'xAxes') .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); svg.append("g") .call(yAxis); // grid svg.append("g") .attr("class", "y-grid") .style("opacity", 0.2); svg.selectAll(".y-grid") .transition() .call(yGrid); // buttons on stamp stamp.selectAll('.btn').remove(); const inspect = stamp .append('button') .classed('btn', true) .text('inspect'); const reset = stamp .append('button') .classed('btn', true) .text('reset') .on('click', () => { brushArea.call(brush.move, null) rects.nodes().map(rect => rect.setAttribute('fill', color)); beingBrushed = false; stamp.style('visibility', 'hidden') brushStartStamp.style('visibility', 'hidden') brushEndStamp.style('visibility', 'hidden') }); return svg.node(); ////////////////////////////////////////// //// functions to handle events //// ////////////////////////////////////////// function onBrush() { let s; const bandWidth = x.bandwidth(); if (s = d3.event.selection) { // color rects in selection rects.nodes().map(rect => { const x = +rect.attributes.x.value; if((s[0] <= x && x <= s[1]) || (s[0] <= (x+bandWidth) && (x+bandWidth) <= s[1])) { rect.setAttribute('fill', hoverColor) // rect.setAttribute('fill-opacity', hoverOpacity); } else { rect.setAttribute('fill', color) // rect.setAttribute('fill-opacity', '1'); } }); const separator = brushExtentSize / data.length; const barMargin = (brushExtentSize - (x.bandwidth() * data.length)) / data.length; // margin between bars let x0 = (d3.event.selection[0] - margin.left) / separator; let x1 = (d3.event.selection[1] - margin.left) / separator; x0 = (x0 < 1) ? 0 : x0; const startIdx = Math.floor(x0); const endIdx = Math.ceil(x1 - 1); d3.select('#selectedIdx') .text(`data index : ${startIdx} to ${endIdx}`); // update tag pos, text brushStartStamp .style('left', s[0] - 50 + 'px') .style('top', height - margin.bottom + 'px') .text(data[startIdx].time); brushEndStamp .style('left', s[1] - 50 + 'px') .style('top', height - margin.bottom + 'px') .text(data[endIdx].time); } } function onBrushEnd() { console.log('onBrushEnd') let s; if (s = d3.event.selection) { const left = (s[0] + s[1]) / 2; stamp .style('left', left - 60 + 'px') .style('top', height - margin.bottom + 'px') .style('visibility', 'visible') } } function onBrushStart() { console.log('onBrushStart') beingBrushed = true; rects.nodes().map((rect, idx) => rect.setAttribute('fill-opacity', '1')); tooltip.style('visibility', 'hidden'); crosshair.style('display', 'none') stamp.style('visibility', 'hidden') brushStartStamp.style('visibility', 'visible') brushEndStamp.style('visibility', 'visible') } function onMouseMove(d) { if(beingBrushed) return; tooltip .style('top', d3.event.pageY + 10 + 'px') .style('left', d3.event.pageX + 30 + 'px'); const coordinates = d3.mouse(this); const rects = d3.select('#rects').selectAll('rect') const bandWidth = x.bandwidth(); rects.nodes().map((rect, idx) => { const x = +rect.attributes.x.value; const width = rect.attributes.width.value; if( x <= coordinates[0] && coordinates[0] <= x + bandWidth) { tooltip .html(`

time: ${data[idx].time}

count: ${data[idx].count}

`) .style('visibility', 'visible'); crosshair .attr("x1", +x +(+width/2)) .attr("x2", +x +(+width/2)) // .style('display', 'block'); // rect.setAttribute('fill', color) rect.setAttribute('fill-opacity', hoverOpacity); } else { // rect.setAttribute('fill', color); rect.setAttribute('fill-opacity', '1'); } }) } function onMouseOut() { tooltip.style('visibility', 'hidden'); crosshair.style('display', 'none'); rects.nodes().map(rect => rect.setAttribute('fill-opacity', '1')); } function onMouseEnter() { if(beingBrushed) return; crosshair .style('display', 'block') .attr("opacity", 1) } }32:T4f7,_data = [ { "time": 1388502000000, "count": 16296 }, { "time": 1420038000000, "count": 100101 }, { "time": 1451574000000, "count": 254661 }, { "time": 1483110000000, "count": 530949 }, { "time": 1514646000000, "count": 624274 }, { "time": 1546182000000, "count": 587397 }, { "time": 1577718000000, "count": 246038 }, { "time": 1609254000000, "count": 346038 } // , // { // "time": 1388502000000, // "count": 16296 // }, // { // "time": 1420038000000, // "count": 100101 // }, // { // "time": 1451574000000, // "count": 254661 // }, // { // "time": 1483110000000, // "count": 530949 // }, // { // "time": 1514646000000, // "count": 624274 // }, // { // "time": 1546182000000, // "count": 587397 // }, // { // "time": 1577718000000, // "count": 246038 // }, // { // "time": 1609254000000, // "count": 346038 // } ]33:[] 2f:{"id":"421269ada25b2ff2","slug":"brushable-bar-chart-remake","title":"Brushable bar chart","thumbnail":"7a09227c2fd8907e696e25806bbe862b6fc44c86f72711012688b5bd6e5c128f","access_level":"public","create_time":"$D2020-08-17T12:12:37.738Z","update_time":"$D2020-09-08T18:14:01.010Z","view_time":null,"first_public_time":"$D2020-08-19T07:37:18.313Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":"starter_2024"},"version":1640,"publish_version":1640,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc3b848d8db8ae07","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":null}],"members":[{"type":"individual","id":"fc3b848d8db8ae07","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"8d988b71e2e99afd","slug":"d3","title":"D3","owner":{"id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3"}},"type":"notebook","body":{"title":"Brushable bar chart remake","cells":[{"id":0,"value":"md`# Brushable bar chart`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":852,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1174,"value":"yGrid = g => g\n\t\t\t.attr(\"transform\", \"translate(\" + margin.left + \",0)\")\n .call(d3.axisLeft(y).tickSize(-width + margin.right))\n\t\t\t.call(g => g.selectAll(\"text\").remove())\n .call(g => g.select('path').remove()) // remove vertical line","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"brushExtentSize = Math.abs(margin.left - width - margin.right);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1532,"value":"stamp = d3\n .select('body')\n .append('div')\n .attr('id', 'inspectStamp')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1522,"value":"brushStartStamp = d3\n .select('body')\n .append('div')\n .attr('id', 'startTag')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff')\n .text('start position');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1525,"value":"brushEndStamp = d3\n .select('body')\n .append('div')\n .attr('id', 'endTag')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff')\n .text('end position');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1574,"value":"hoverOpacity = 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .attr('pointer-events', 'none')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'visible')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff')\n .text('a simple tooltip');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"x = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([margin.left, width - margin.right])\n .padding(0.03)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.count)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"xAxis = g => g\n .classed('x-axis', true)\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(i => data[i].time).tickSizeOuter(0))\n .selectAll('line').remove();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y)\n .ticks(null, data.format)\n .tickFormat((tickVal) => tickVal >= 1000 ? tickVal/1000 + \"K\" : tickVal\n ))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y))\n .selectAll('line').remove();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1098,"value":"data = _data.map(d => ({\n time : moment(d.time).format(\"YYYY-MM-DD HH:mm:ss\"),\n count: d.count\n })\n )\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"hoverColor = '#252851';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"color = '#03aaf5';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"margin = ({top: 30, right: 0, bottom: 100, left: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1115,"value":"moment = require('moment')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"