Cost of kids

A remake of one of The Guardian's visuals from "Facts are sacred". A bar chart would be far clearer. The paper version was also incorrect and quite misleading

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>add title</title>
<script src="https://d3js.org/d3.v3.min.js"></script>

.labels, .sum {

font-family: "helvetica";
    fill:  white;

}

</style>
</head>
<body>
<p id="title">The cost of bringing up a baby</p>
<script type="text/javascript">

var svg = d3.select("body")
            .append("svg")
            .attr("width", 1000)   
            .attr("height", 1000); 
            
            //alert("g");
            
            
            var el = d3.select("body").node();
            var h = el.clientHeight;
            var w= el.clientWidth;
            //alert("h is "+h +" w is "+w);
    
    
var dataset = [
[0,71780,"Education"],
[71780,62099,"Childcare"],
[133879,18667,"Food"],
[152546,10781,"Clothing"],
[163327,15532,"Holidays"],
[178859,9248,"Hobbies & Toys"],
[188107,7303,"Leisure"],
[195410,4337,"Pocket money"],
[199747,3373,"Furniture"],
[203120,1143,"Personal Care"],
[204263,1143,"Other"]

];

var x = d3.scale.linear().domain([0,d3.sum(dataset,function(d) {return d[1];})]).range([0,w]);
//var y = d3.scale.linear().domain([0,218024]).range([0,w]);

var col = d3.scale.category10();

viz.append("text")
.text("£218,024")
.style("font-size",70)
.attr("x",20)
.attr("y",300)
.attr("class","sum");

viz.selectAll(".labels1")
.data(dataset)
.enter()
.append("text")
.filter(function(d,i) {return d[1] >9000;})
.text(function(d) {return d[2];})
.attr("x",function(d) {return 20+ x(d[0]);})
.attr("y",function(d,i) {return (h*0.4) + (i*110);})
.attr("class","labels labels1")

viz.selectAll(".labels2")
.data(dataset)
.enter()
.append("text")
.filter(function(d,i) {return d[1] >9000;})
.text(function(d) {return "£" + comm(d[1]);})
.attr("x",function(d) {return 20+ x(d[0]);})
.attr("y",function(d,i) {return (h*0.43) + (i*110);})
.attr("class","labels labels1")
.style("font-size",25)
.style("font-weight","bold")

function comm(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js