EHDEV/index.html

## index.html
<!-- Author: eliashussen -->

<!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;
            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>
<script type="text/javascript">
    // Setting width, height and padding of the SVG element
    var w = 500;
    var h = 300;
    var barPadding = 1;
    var padding = 50;
    var ypadding = 40;
    var dataset = [
        [5, 20, 15, 'Mnh'],
        [480, 90, 20, 'BK'],
        [250, 50, 22, 'BX'],
        [100, 33, 25, 'BK'],
        [330, 95, 35, 'SI'],
        [410, 12, 25, 'Mnh'],
        [475, 44, 40, 'BK'],
        [25, 67, 23, 'QNS'],
        [85, 21, 15, 'Mnh'],
        [220, 88, 33, 'QNS'],
        [400, 170, 18, 'QNS']
    ];

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

    // Setting the chart's x and y axis scale
    // Each data item is scaled according to the width - padding of the SVG element
    var xscale = d3.scale.linear()
            .domain([0, d3.max(dataset, function (d) {
                return d[0];
            })])
            .range([padding, w - padding]);
    // Same as xcale, each data item is scaled to fit within the height of the SVG
    var yscale = d3.scale.linear()
            .domain([0, d3.max(dataset, function (d) {
                return d[1];
            })])
            .range([h - padding, padding]);

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

    // Creatin the x and y axes
    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.category10();

    // Adding the bubbles
    // positioning the bubbles in the plane by their x,y (col1, col2) values
    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]);
            })
            // sizing the bubbles by col3 values

            .attr("r", function (d) {
                return rscale(d[2] * 6);
            })

            // Coloring the bubbles by col4 (Borough)
            .attr("fill", function (d, i) {
                return color(d[3]);
            });
    // .clamp(true);

    // showing the values of each of the rows alongside the bubbles
    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")

            // Adding some interactivity to the chart by changing font size on hover
            .on("mouseover", function () {
                d3.select(this)
                        .attr("font-size", "12px");
            })

            // Once hover event ends, setting font-size back to what it was
            .on("mouseout", function (d) {
                d3.select(this)
                        .transition()
                        .duration(250)
                        .attr("font-size", "9px");
            })
            // coloring the values by column4
            .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>
	<!-- Author: eliashussen -->

	<!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;
	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>
	<script type="text/javascript">
	// Setting width, height and padding of the SVG element
	var w = 500;
	var h = 300;
	var barPadding = 1;
	var padding = 50;
	var ypadding = 40;
	var dataset = [
	[5, 20, 15, 'Mnh'],
	[480, 90, 20, 'BK'],
	[250, 50, 22, 'BX'],
	[100, 33, 25, 'BK'],
	[330, 95, 35, 'SI'],
	[410, 12, 25, 'Mnh'],
	[475, 44, 40, 'BK'],
	[25, 67, 23, 'QNS'],
	[85, 21, 15, 'Mnh'],
	[220, 88, 33, 'QNS'],
	[400, 170, 18, 'QNS']
	];

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

	// Setting the chart's x and y axis scale
	// Each data item is scaled according to the width - padding of the SVG element
	var xscale = d3.scale.linear()
	.domain([0, d3.max(dataset, function (d) {
	return d[0];
	})])
	.range([padding, w - padding]);
	// Same as xcale, each data item is scaled to fit within the height of the SVG
	var yscale = d3.scale.linear()
	.domain([0, d3.max(dataset, function (d) {
	return d[1];
	})])
	.range([h - padding, padding]);

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

	// Creatin the x and y axes
	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.category10();

	// Adding the bubbles
	// positioning the bubbles in the plane by their x,y (col1, col2) values
	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]);
	})
	// sizing the bubbles by col3 values

	.attr("r", function (d) {
	return rscale(d[2] * 6);
	})

	// Coloring the bubbles by col4 (Borough)
	.attr("fill", function (d, i) {
	return color(d[3]);
	});
	// .clamp(true);

	// showing the values of each of the rows alongside the bubbles
	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")

	// Adding some interactivity to the chart by changing font size on hover
	.on("mouseover", function () {
	d3.select(this)
	.attr("font-size", "12px");
	})

	// Once hover event ends, setting font-size back to what it was
	.on("mouseout", function (d) {
	d3.select(this)
	.transition()
	.duration(250)
	.attr("font-size", "9px");
	})
	// coloring the values by column4
	.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>