2b:null 2c:["$","title",null,{"children":"Bar chart with scaleUtc & brush testing | 3sam3 | Observable"}] 31:T8a7,chart = { const barWidth = getBarWidth(); const svg = d3.create("svg") .attr("viewBox", [0, 0, width + barWidth, height]); // legend const legendList = d3.select('#label') .selectAll('li') .data(data) .join('li') .text(d => d.time) .on('mouseover', function() { d3.select(this).style('background', 'blue') }) .on('mouseout', function() { d3.select(this).style('background', 'none') }) .on('click', function () { const id = d3.select(this).text(); const rect = d3.select('#unx'+ id); rect.attr('fill', 'red'); }) // crosshair const crossHairG = svg.append('g'); const crosshair = crossHairG.append('g') .attr('class', 'line'); // create vertical line crosshair.append('line') .attr('id', 'crosshairY') .attr("y1", 0) .attr("y2", height) .attr('stroke', '#aaaaaa') .attr('stroke-width', barWidth + 10 + 'px') .style('display', 'none'); // brush const brush = d3.brushX() .extent([[margin.left - barWidth / 2, 0], [width - margin.right, height - margin.bottom + 0.5]]) .on("end", brushEnded); svg.append("g") .call(brush); // rect & rect event svg.append("g") .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(d.time) - barWidth/2) .attr("y", d => y(d.count)) .attr("height", d => y(0) - y(d.count)) .attr("width", barWidth) .on('mouseover', onMouseOver) .on('mousemove', onMouseMove) .on('mouseout', onMouseOut); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // grid const yGrid = g => g .attr("transform", "translate(" + margin.left + ",0)") .call(d3.axisLeft(y).tickSize(-width + margin.right)) .call(g => g.selectAll("text").remove()) .call(g => g.select('path').remove()) // remove vertical line svg.append("g") .attr("class", "y-grid") .style("opacity", 0.08); svg.selectAll(".y-grid").transition().duration(0) .call(yGrid); return svg.node(); }32:[] 2f:{"id":"354a15159ed626e6","slug":"bar-chart-with-scaleutc-brush-testing","title":"Bar chart with scaleUtc & brush testing","thumbnail":"270019ec989d539256df9953c98a8bb0bb838ac0318b87d81240350a92a50c28","access_level":"public","create_time":"$D2020-07-15T05:36:36.667Z","update_time":"$D2020-07-15T11:00:30.502Z","view_time":null,"first_public_time":"$D2020-07-15T10:03:46.215Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":"starter_2024"},"version":732,"publish_version":732,"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":null,"type":"notebook","body":{"title":"Bar chart with scaleUtc & brush testing","cells":[{"id":0,"value":"md`# Bar chart with scaleUtc & brush testing`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"html`\n

Legends

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"getBarWidth = () => (width - margin.left - margin.right)/data.length;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"area = d3.area()\n .curve(d3.curveLinear)\n .x(d => x(d.time))\n .y0(y(0))\n .y1(d => y(d.count))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":489,"value":" function brushEnded() {\n let s;\n if (s = d3.event.selection) {\n const bisectDate = d3.bisector((d) => d.time).right;\n const x0 = x.invert(s[0]);\n const x1 = x.invert(s[1]);\n \n const i0 = bisectDate(data, x0);\n const i1 = bisectDate(data, x1);\n // console.log(x0, x1);\n console.log(i0, i1, data[i0], data[i1], x0, x1);\n const newData = data.filter((datum, i) => (i0 <= i && i<= i1));\n // console.log(newData);\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"function onMouseOut() {\n tooltip.html(``).style('visibility', 'hidden');\n d3.select(this).transition().attr('fill', color);\n d3.select(`#crosshairY`).style('display', 'none').transition();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"onMouseMove = () => {\n tooltip\n .style('top', d3.event.pageY - 10 + 'px')\n .style('left', d3.event.pageX + 10 + 'px');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"function onMouseOver (d, i) {\n tooltip\n .html(`

time: ${d.time}

count: ${d.count}

`)\n .style('visibility', 'visible');\n \n const rect = d3.select(this).transition().attr('fill', hoverColor);\n const x = rect.node().attributes.x.value;\n const width = rect.node().attributes.width.value;\n d3.select(`#crosshairY`)\n .attr(\"x1\", +x +(+width/2)).attr(\"x2\", +x +(+width/2)).attr(\"opacity\", 1)\n .style('display', 'block');\n}","pinned":true,"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 .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('a simple tooltip');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.time))\n .range([margin.left, width - margin.right])","pinned":true,"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 .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))\n .selectAll('.domain').remove();\n\n// xAxis = g => g\n// .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n// .call(d3.axisBottom(x).tickFormat(i => data[i].time).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left - getBarWidth()/2},0)`)\n .call(d3.axisLeft(y).ticks(null, data.format))\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":22,"value":"data = [\n {\n \"time\": 1388502000000,\n \"count\": 16296\n },\n {\n \"time\": 1420038000000,\n \"count\": 100101\n },\n {\n \"time\": 1451574000000,\n \"count\": 254661\n },\n {\n \"time\": 1483110000000,\n \"count\": 530949\n },\n {\n \"time\": 1514646000000,\n \"count\": 624274\n },\n {\n \"time\": 1546182000000,\n \"count\": 587397\n },\n {\n \"time\": 1577718000000,\n \"count\": 246038\n },\n {\n \"time\": 1609254000000,\n \"count\": 346038\n }\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"hoverColor = '#eec42d';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"color = '#437c90';","pinned":true,"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: 30, left: 150})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"