{"id":4075,"date":"2016-05-10T11:40:32","date_gmt":"2016-05-10T11:40:32","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=4075"},"modified":"2016-05-10T11:40:32","modified_gmt":"2016-05-10T11:40:32","slug":"making-selectable-d3-chart","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/making-selectable-d3-chart\/","title":{"rendered":"Making a selectable D3 chart"},"content":{"rendered":"<p>One of the nice built-in features of D3.js is the ability to render a chart where you can highlight parts of the graph:<\/p>\n<p><img alt='' class='alignnone size-full wp-image-4077' src='http:\/\/172.104.26.128\/wp-content\/uploads\/2016\/05\/img_5731c64b255a7.png' \/><\/p>\n<p>The feature is called &#8220;brushes&#8221; in the d3 docs.<\/p>\n<p>Here I&#8217;ve tried to replicate this in the simplest possible way.<\/p>\n<p>We need some CSS, for both the blue color and the highlight\/selection box:<\/p>\n<pre lang=\"html\">\n.area {\n  fill: steelblue;\n  clip-path: url(#clip);\n}\n\n.axis path,\n.axis line {\n  fill: none;\n  stroke: #000;\n  shape-rendering: crispEdges;\n}\n\n.brush .extent {\n  stroke: #fff;\n  fill-opacity: .125;\n  shape-rendering: crispEdges;\n}\n\n.brush .extent {\n  stroke: #fff;\n  fill-opacity: .125;\n  shape-rendering: crispEdges;\n}\n<\/html>\n\nNext we need some data. I'm just using something that looks like a matrix:\n<pre lang=\"javascript\">\nlet data = [\n  [0, 1],\n  [2, 4]\n]\n<\/pre>\n<p>Then we decide how big it should be. If you're going to use this inside React, it's nice to make a named div and size the div correctly up front, so that the screen doesn't flicker.<\/p>\n<pre lang=\"javascript\">\nlet margin = {top: 0, right: 0, bottom: 0, left: 0},\n    width = 200 - margin.left - margin.right,\n    height = 30 - margin.top - margin.bottom;\n\nlet histogramStyle = {\n  \"width\": width,\n  \"height\": height  \n};\n<\/pre>\n<p>We'll also need to define a selector that we can use to place the chart:<\/p>\n<pre lang=\"javascript\">\nlet divId = '#chart';\n<\/pre>\n<p>Now, we add the code to render the chart:<\/p>\n<pre lang=\"javascript\">\n    let x = d3.scale.linear()\n            .range([width, 0]),\n        y = d3.scale.linear()\n            .range([height, 0]);\n                \n    let \n      xAxis = d3.svg.axis()\n        .scale(x)\n        .orient(\"bottom\"),\n      yAxis = d3.svg.axis()\n        .scale(y)\n        .orient(\"left\");\n\n    let area = d3.svg.area()\n        .x((d) => x(d[0]))\n        .y0(height)\n        .y1((d) => y(d[1]));\n        \n    let svg = d3.select(divId).append(\"svg\")\n        .attr(\"width\", width + margin.left + margin.right)\n        .attr(\"height\", height + margin.top + margin.bottom)\n        .append(\"g\")\n        .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n\n    x.domain(d3.extent(data, (d) => d[0]));\n    y.domain([0, d3.max(data, (d) => d[1])]);\n\n    let brush = d3.svg.brush()\n        .x(x)\n        .on(\"brushend\", brushend);\n\n    svg.append(\"path\")\n       .datum(data)\n       .attr(\"class\", \"area\")\n       .attr(\"d\", area);\n        \n    svg.append(\"g\")\n       .attr(\"class\", \"x brush\")\n       .call(brush)\n       .selectAll(\"rect\")\n       .attr(\"y\", -6)\n       .attr(\"height\", height + 7);\n <\/pre>\n<p>To handle the user's selections, the chart lets you define a callback and you receive the min and max values, so you can call out to your code and do whatever you need. <\/p>\n<pre lang=\"javascript\">\nfunction brushed() {\n  x.domain(brush.empty() ? x.domain() : brush.extent());\n}\n\nfunction brushend() {        \n  if (self.props.facetHandler) {\n    self.props.facetHandler(brush.extent()[0], brush.extent[1]);\n  }\n}            \n<\/pre>\n<p>The callback gets run every time the user drags, not just when they are finished. One simple way to resolve this is to debounce the callback:<\/p>\n<pre lang=\"javascript\">\nlet _ = require('lodash');\nlet facetHandler = _.debounce(this.props.facetHandler, 250);\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Rendering a selectable chart with d3.js<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[136,302],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/4075"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=4075"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/4075\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=4075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=4075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=4075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}