| license: mit |
This chart shows average house prices in various areas of Liverpool, UK
forked from alandunning's block: Horizontal Bar Chart with Tooltip D3 V4
| Country | FacenumberA | GrossA | ScoreA | Count | |
|---|---|---|---|---|---|
| Mexico | 0.823529412 | 7472589.643 | 6.776470588 | 17 | |
| Philippines | 0 | 70071 | 6.3 | 1 | |
| Georgia | 9 | 17149 | 5.6 | 1 | |
| New Line | 0 | 6712451 | 4.4 | 1 | |
| Official site | 4 | 20218921 | 6.3 | 1 | |
| France | 1.162337662 | 16350593.58 | 6.678571429 | 154 | |
| Indonesia | 0 | 4105123 | 7.6 | 1 | |
| Romania | 0.75 | 9100986.5 | 6.6 | 4 | |
| Greece | 0 | 1908995.5 | 7 | 2 | |
| Cameroon | 1 | 32631 | 7.5 | 1 | |
| Colombia | 0 | 6517198 | 7.5 | 1 | |
| Aruba | 0 | 10076136 | 4.8 | 1 | |
| Japan | 0.434782609 | 33553701.47 | 6.952173913 | 23 | |
| West Germany | 0.333333333 | 11433134 | 7.266666667 | 3 | |
| Argentina | 0 | 7230936.333 | 7.5 | 4 | |
| Denmark | 0.636363636 | 1418469.111 | 7.172727273 | 11 | |
| Iran | 0.5 | 2424418.5 | 7.725 | 4 | |
| China | 1.366666667 | 14143040.74 | 6.623333333 | 30 | |
| Iceland | 0.666666667 | 15897 | 7.333333333 | 3 | |
| Israel | 0.75 | 1220488 | 7.525 | 4 | |
| Netherlands | 0.8 | 1884888.333 | 6.94 | 5 | |
| Spain | 0.909090909 | 8836518.154 | 6.824242424 | 33 | |
| Italy | 2 | 3445189 | 6.873913043 | 23 | |
| Finland | 1 | 611709 | 7.2 | 1 | |
| Russia | 0.909090909 | 3739951.75 | 6.081818182 | 11 | |
| Poland | 1 | 1424887.25 | 7.62 | 5 | |
| Norway | 1 | 451137.25 | 6.7375 | 8 | |
| Brazil | 1 | 2712574 | 7.275 | 8 | |
| USA | 1.419762846 | 55214607.23 | 6.367428421 | 3807 | |
| Afghanistan | 1 | 1127331 | 7.4 | 1 | |
| Canada | 1.047619048 | 22432066.68 | 6.161904762 | 126 | |
| Czech Republic | 1.333333333 | 1294772 | 6.966666667 | 3 | |
| Australia | 1.072727273 | 40205909.57 | 6.514545455 | 55 | |
| India | 1.5 | 2117136.208 | 6.532352941 | 34 | |
| New Zealand | 1.133333333 | 108180043.5 | 7.28 | 15 | |
| South Korea | 1.142857143 | 2231833.1 | 6.257142857 | 14 | |
| Hong Kong | 1.176470588 | 12011449.27 | 6.741176471 | 17 | |
| South Africa | 1.25 | 53580080.33 | 6.4375 | 8 | |
| UK | 1.283482143 | 32440108.68 | 6.818303571 | 448 | |
| Germany | 1.432989691 | 27984127.66 | 6.340206186 | 97 | |
| Ireland | 1.5 | 7033630 | 6.783333333 | 12 | |
| Hungary | 1.5 | 11687595.5 | 6.45 | 2 | |
| Belgium | 1.75 | 680566.5 | 5.6 | 4 | |
| Sweden | 3 | 126811.6667 | 7.516666667 | 6 | |
| Thailand | 2 | 2602324.6 | 6.08 | 5 | |
| Taiwan | 2 | 64340682 | 7.15 | 2 | |
| Peru | 2 | 57362581 | 5.4 | 1 | |
| Chile | 7 | 12188642 | 6.9 | 1 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| margin: 15px; | |
| background-color: #F1F3F3 | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #D4D8DA; | |
| stroke-width: 1px; | |
| shape-rendering: crispEdges; | |
| } | |
| .x path { | |
| display: none; | |
| } | |
| .toolTip { | |
| position: absolute; | |
| display: none; | |
| min-width: 80px; | |
| height: auto; | |
| background: none repeat scroll 0 0 #ffffff; | |
| border: 1px solid #6F257F; | |
| padding: 14px; | |
| text-align: center; | |
| } | |
| </style> | |
| <svg width="960" height="500"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"), | |
| margin = {top: 20, right: 20, bottom: 30, left: 80}, | |
| 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.scaleLinear().range([0, width]); | |
| var y = d3.scaleBand().range([height, 0]); | |
| var color=d3.scaleSequential(d3.interpolateGreens) | |
| .domain([0,110000000]) | |
| .nice(); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.csv("hist.csv", function(error, data) { | |
| if (error) throw error; | |
| data.sort(function(a, b) { return a.value - b.value; }); | |
| x.domain([0, 10]); | |
| y.domain(data.map(function(d) { return d.Country; })).padding(0.1); | |
| g.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x).ticks(5).tickFormat(function(d) { return parseInt(d / 1000); }).tickSizeInner([-height])); | |
| g.append("g") | |
| .attr("class", "y axis") | |
| .call(d3.axisLeft(y)); | |
| g.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", 0) | |
| .attr("height", y.bandwidth()) | |
| .attr("y", function(d) { return y(d.Country); }) | |
| .attr("width", function(d) { return x(d.ScoreA); }) | |
| .attr("fill", function(d){ return color(d.GrossA);}) | |
| .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.Country) + "<br>" + "£" + (d.ScoreA)); | |
| }) | |
| .on("mouseout", function(d){ tooltip.style("display", "none");}); | |
| }); | |
| </script> |