EHDEV/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>
        div.bar {
            display: inline-block;
            width: 20px;
            height: 75px; /* We'll override this later */
            background-color: teal;
            padding: 15px;
            margin-right: 2px;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: green;
            shape-rendering: crispEdges;

        }

        /*    circle:hover {
               fill: red;
       }*/
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }

        }
    </style>
</head>
<body>
<h2></h2>
<script type="text/javascript">

    var w = 500;
    var h = 300;
    var barPadding = 1;
    var padding = 50;
    var ypadding = 40;
    var dataset = [
        [55, 5, 20, 'Mnh'],
        [480, 120, 20, 'BK'],
        [100, 50, 22, 'BX'],
        [100, 33, 25, 'BK'],
        [330, 95, 200, 'SI'],
        [410, 50, 200, 'Mnh'],
        [475, 200, 100, 'BK'],
        [250, 75, 100, 'QNS'],
        [185, 30, 75, 'Mnh'],
        [220, 88, 120, 'QNS'],
        [400, 170, 5, 'QNS']
    ];

    var svg = d3.selectAll("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    var xscale = d3.scale.linear()
            .domain([0, d3.max(dataset, function (d) {
                return d[0];
            })])
            .range([padding, w - padding]);

    var yscale = d3.scale.linear()
            .domain([0, d3.max(dataset, function (d) {
                return d[1];
            })])
            .range([h - padding, padding]);

    var rscale = d3.scale.linear()
            .domain([0, d3.max(dataset, function (d) {
                return d[1];
            })])
            .range([2, 10]);

    var xAxis = d3.svg.axis()
            .scale(xscale)
            .ticks(10)
            .orient("bottom");

    var yaxis = d3.svg.axis()
            .scale(yscale)
            .orient("left")
            .ticks(5);
    var color = d3.scale.category20();

    svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                return xscale(d[0] + 10);
            })
            .attr("cy", function (d) {
                return yscale(d[1]);
            })
            .attr("r", function (d) {
                return rscale(d[2] * 6);
            })
            .on("mouseover", function () {
                d3.select(this)
                        .attr("r", function (d) {
                            return rscale(d[2] * 10);
                        })
                        .attr("fill", "grey")
            })
            .on("mouseout", function (d) {
                d3.select(this)
                        .transition()
                        .duration(250)
                        .attr("r", function (d) {
                            return rscale(d[2] * 6);
                        })
                        .attr("fill", function (d) {
                            return color(d[3]);
                        })
            })
            .attr("fill", function (d, i) {
                return color(d[3]);
            })
            .append("title")
            .text(function (d) {
                return "Income: " + d[0] + " | Rent: " + d[1] +
                        " \n Disposable Income :" + d[2] + " | Borough: " + d[3];
            });
    // .clamp(true);

    /* Leaving out text replacing it with tooltips

     svg.selectAll("text")
     .data(dataset)
     .enter()
     .append("text")
     .text(function(d){
     return "[" + d[0] + ", " + d[1] + "]" + " | " + d[3];
     })
     .attr("x", function(d){
     return xscale(d[0] );
     })
     .attr("y", function(d){
     return yscale(d[1] - 15);
     })
     .attr("font-family", "sans-serif")
     .attr("font-size", "9px")
     .on("mouseover", function() {
     d3.select(this)
     .attr("font-size", "10px");
     })
     .on("mouseout", function(d) {
     d3.select(this)
     .transition()
     .duration(250)
     .attr("font-size", "9px");
     })
     .attr("fill", function(d, i){
     return color(d[3]);
     });
     */
    svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + (h - padding + 12) + ")")
            .call(xAxis);

    svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + ypadding + ",0)")
            .call(yaxis);
</script>
<!--
       <svg width="500" height="50">

       	<ellipse cx="10" cy="25" rx="100" ry="25"/>
       	<text x="250" y="50" font-family="sans-serif"
 font-size="25" fill="gray">Easy-peasy</text> -->

</svg>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Test</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	div.bar {
	display: inline-block;
	width: 20px;
	height: 75px; /* We'll override this later */
	background-color: teal;
	padding: 15px;
	margin-right: 2px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: green;
	shape-rendering: crispEdges;

	}

	/* circle:hover {
	fill: red;
	}*/
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	}
	</style>
	</head>
	<body>
	<h2></h2>
	<script type="text/javascript">

	var w = 500;
	var h = 300;
	var barPadding = 1;
	var padding = 50;
	var ypadding = 40;
	var dataset = [
	[55, 5, 20, 'Mnh'],
	[480, 120, 20, 'BK'],
	[100, 50, 22, 'BX'],
	[100, 33, 25, 'BK'],
	[330, 95, 200, 'SI'],
	[410, 50, 200, 'Mnh'],
	[475, 200, 100, 'BK'],
	[250, 75, 100, 'QNS'],
	[185, 30, 75, 'Mnh'],
	[220, 88, 120, 'QNS'],
	[400, 170, 5, 'QNS']
	];

	var svg = d3.selectAll("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	var xscale = d3.scale.linear()
	.domain([0, d3.max(dataset, function (d) {
	return d[0];
	})])
	.range([padding, w - padding]);

	var yscale = d3.scale.linear()
	.domain([0, d3.max(dataset, function (d) {
	return d[1];
	})])
	.range([h - padding, padding]);

	var rscale = d3.scale.linear()
	.domain([0, d3.max(dataset, function (d) {
	return d[1];
	})])
	.range([2, 10]);

	var xAxis = d3.svg.axis()
	.scale(xscale)
	.ticks(10)
	.orient("bottom");

	var yaxis = d3.svg.axis()
	.scale(yscale)
	.orient("left")
	.ticks(5);
	var color = d3.scale.category20();

	svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.attr("cx", function (d) {
	return xscale(d[0] + 10);
	})
	.attr("cy", function (d) {
	return yscale(d[1]);
	})
	.attr("r", function (d) {
	return rscale(d[2] * 6);
	})
	.on("mouseover", function () {
	d3.select(this)
	.attr("r", function (d) {
	return rscale(d[2] * 10);
	})
	.attr("fill", "grey")
	})
	.on("mouseout", function (d) {
	d3.select(this)
	.transition()
	.duration(250)
	.attr("r", function (d) {
	return rscale(d[2] * 6);
	})
	.attr("fill", function (d) {
	return color(d[3]);
	})
	})
	.attr("fill", function (d, i) {
	return color(d[3]);
	})
	.append("title")
	.text(function (d) {
	return "Income: " + d[0] + " \| Rent: " + d[1] +
	" \n Disposable Income :" + d[2] + " \| Borough: " + d[3];
	});
	// .clamp(true);

	/* Leaving out text replacing it with tooltips

	svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d){
	return "[" + d[0] + ", " + d[1] + "]" + " \| " + d[3];
	})
	.attr("x", function(d){
	return xscale(d[0] );
	})
	.attr("y", function(d){
	return yscale(d[1] - 15);
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "9px")
	.on("mouseover", function() {
	d3.select(this)
	.attr("font-size", "10px");
	})
	.on("mouseout", function(d) {
	d3.select(this)
	.transition()
	.duration(250)
	.attr("font-size", "9px");
	})
	.attr("fill", function(d, i){
	return color(d[3]);
	});
	*/
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (h - padding + 12) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + ypadding + ",0)")
	.call(yaxis);
	</script>
	<!--
	<svg width="500" height="50">

	<ellipse cx="10" cy="25" rx="100" ry="25"/>
	<text x="250" y="50" font-family="sans-serif"
	font-size="25" fill="gray">Easy-peasy</text> -->

	</svg>
	</body>
	</html>