| license: gpl-3.0 |
This chart is based on mbostock's block: Bar Chart.
it uses a json file storing area names and average house prices. The chart employs conventional margins and a number of D3 features:
forked from alandunning's block: Bar Chart with Tooltip with Tooltip D3 V4
| [ | |
| {"area" : "Regional", "value": 190000}, | |
| {"area" : "National", "value": 250000} | |
| ] |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,500,700" rel="stylesheet"> | |
| </head> | |
| <style> | |
| body { | |
| background-color: #F1F3F3; | |
| font-family: 'Fira Sans', sans-serif; | |
| } | |
| text { | |
| font-family: 'Fira Sans', sans-serif; | |
| font-weight: 500; | |
| font-size: 15px; | |
| color: #081F2C; | |
| } | |
| .axis { | |
| font: 15px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #D4D8DA; | |
| stroke-width: 1px; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis-title{ | |
| fill: #5B6770; | |
| letter-spacing: 1px; | |
| } | |
| .toolTip { | |
| pointer-events: none; | |
| position: absolute; | |
| display: none; | |
| min-width: 50px; | |
| height: auto; | |
| background: none repeat scroll 0 0 #ffffff; | |
| padding: 9px 14px 6px 14px; | |
| border-radius: 2px; | |
| text-align: center; | |
| line-height: 1.3; | |
| color: #5B6770; | |
| box-shadow: 0px 3px 9px rgba(0, 0, 0, .15); | |
| } | |
| .toolTip:after { | |
| content: ""; | |
| width: 0; | |
| height: 0; | |
| border-left: 12px solid transparent; | |
| border-right: 12px solid transparent; | |
| border-top: 12px solid white; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| margin-left: -12px; | |
| } | |
| .toolTip span { | |
| font-weight: 500; | |
| color: #081F2C; | |
| } | |
| </style> | |
| <svg width="960" height="500"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"), | |
| margin = {top: 20, right: 20, bottom: 30, left: 50}, | |
| width = +svg.attr("width") - margin.left - margin.right, | |
| height = +svg.attr("height") - margin.top - margin.bottom; | |
| var tooltip = d3.select("body").append("div").attr("class", "toolTip"); | |
| var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), | |
| y = d3.scaleLinear().rangeRound([height, 0]); | |
| var colours = d3.scaleOrdinal() | |
| .range(["#6F257F", "#CA0D59"]); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.json("data.json", function(error, data) { | |
| if (error) throw error; | |
| x.domain(data.map(function(d) { return d.area; })); | |
| y.domain([0, d3.max(data, function(d) { return d.value; })]); | |
| g.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)); | |
| g.append("g") | |
| .attr("class", "axis axis--y") | |
| .call(d3.axisLeft(y).ticks(5).tickFormat(function(d) { return parseInt(d / 1000) + "K"; }).tickSizeInner([-width])) | |
| .append("text") | |
| .attr("class", "axis-title") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", "0.71em") | |
| .attr("text-anchor", "end") | |
| .text("Average House Price – (£)"); | |
| g.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("x", function(d) { return x(d.area); }) | |
| .attr("y", function(d) { return y(d.value); }) | |
| .attr("width", x.bandwidth()) | |
| .attr("height", function(d) { return height - y(d.value); }) | |
| .attr("fill", function(d) { return colours(d.area); }) | |
| .on("mousemove", function(d){ | |
| tooltip | |
| .style("left", d3.event.pageX - 50 + "px") | |
| .style("top", d3.event.pageY - 70 + "px") | |
| .style("display", "inline-block") | |
| .html((d.area) + "<br><span>" + "£" + (d.value) + "</span>"); | |
| }) | |
| .on("mouseout", function(d){ tooltip.style("display", "none");}); | |
| }); | |
| </script> |