ssmaroju/index.html

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
    <style>
        svg {
            border: 1px solid #f90;
            margin: 32px;
        }
        rect {
            float: left;
            border: solid 100px #aaa;
        }

        .legend text h1{
            font-family: arial;
            font-size: 12px;
            fill: lightgray;
        }
        h1{
            font-family: Arial;
            color: grey;
            margin-left: 40px;
            margin-top: 100px;
            text-decoration: underline;
        }
    </style>
</head>
<h1>Adjustable Legend Color Scale</h1>
<body>

<script>
    var width = 800,
            height = 320;
    var sliderData = [{
        x: 100,
        y: 20
    },
        {
            x: 600,
            y: 20
        }
    ];


    var drag = d3.behavior.drag()
            .origin(Object)
            .on("drag", dragMove)
            .on('dragend', dragEnd);

    var svg = d3.select('body')
            .append('svg')
            .style('float','left')
            .attr("height", 120)
            .attr("width", width);

    var g = svg.append('g')
            .attr("height", 200)
            .attr("width", width)
            .attr('transform', 'translate(0, 10)');
    var rect = g
            .append('rect')
            .attr('y', 17.5)
            .attr("height", 5)
            .attr("width", width)
            .attr('fill', '#C0C0C0');

    g.selectAll('g')
            .data(sliderData)
            .enter()
            .append("rect")
            .attr("id",function(d,i){
                return "slider" + i;
            })
            .attr("width", 10)
            .attr("x", function(d) {
                return d.x
            })
            .attr("y", function(d) {
                return 0;
            })
            .attr("height", 40)
            .attr("fill", "#2394F5")
            .call(drag);

    svg.append('g')
            .attr('id','legendGroup');

    function draw(minMax){
        var minVal = minMax[0];
        var maxVal = minMax[1];
        var data = d3.range(Math.round(minVal),Math.round(maxVal), (Math.round(maxVal) - Math.round(minVal))/20);
        var o = d3.scale.ordinal()
                .domain(data)
                .rangeBands([Math.round(minVal), Math.round(maxVal)]);


        var colors = d3.scale.category20();

        var legend = d3.select('#legendGroup')
                .selectAll('rect.example2')
                .data(data);

        // enter selection
        legend.enter().append('rect');

        // update selection
        legend.attr('class', 'example2')
                .attr('id',function(d,i){
                    return "rect"+i;
                })
                .style('fill', colors)
                .attr('x', function(d) { return Math.round(o(d)) })
                .attr('y', 60)
                .attr('width', Math.round(o.rangeBand()))
                .attr('height', 50);

        // exit selection
        legend
                .exit().remove();

        var rectLeft = d3.select('#legendGroup').selectAll('#rect-left')
                .data([data[0]]);
        var rectRight = d3.select('#legendGroup').selectAll('#rect-right')
                .data([data[data.length - 1]]);

        // enter left right
        rectLeft.enter().append('rect');
        rectRight.enter().append('rect');
        //append left right
        rectLeft
                .attr('id','rect-left')
                .style('fill',colors.range()[0])
                .attr('x',0)
                .attr('y', 60)
                .attr('width', Math.round(o(data[0])))
                .attr('height', 50);
        rectRight
                .attr('id','rect-left')
                .style('fill',colors.range()[colors.range().length - 1])
                .attr('x',Math.round(o(data[data.length - 1])))
                .attr('y', 60)
                .attr('width', width - Math.round(o(data[data.length - 1])))
                .attr('height', 50);

        // exit left right
        rectLeft.exit().remove();
        rectRight.exit().remove()
    }
    function dragMove(d) {
        d3.select(this)
                .attr("opacity", 0.6)
                .attr("x", d.x = Math.max(0, Math.min(width-10, d3.event.x)));
        update()
    }

    function dragEnd() {
        d3.select(this)
                .attr('opacity', 1);
        }

    function update(){
        var val1 = d3.select('#slider0').data().map(function(d){return d.x;});
        var val2 = d3.select('#slider1').data().map(function(d){return d.x;});

        var minVal = d3.min([val1[0], val2[0]]);
        var maxVal = d3.max([val1[0], val2[0]]);
        var minMax = [minVal, maxVal];
        draw(minMax);
    }
    var val1 = d3.select('#slider0').data().map(function(d){return d.x;});
    var val2 = d3.select('#slider1').data().map(function(d){return d.x;});

    var minVal = d3.min([val1[0], val2[0]]);
    var maxVal = d3.max([val1[0], val2[0]]);
    var minMax = [minVal, maxVal];
    window.onload = draw(minMax);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<style>
	svg {
	border: 1px solid #f90;
	margin: 32px;
	}
	rect {
	float: left;
	border: solid 100px #aaa;
	}

	.legend text h1{
	font-family: arial;
	font-size: 12px;
	fill: lightgray;
	}
	h1{
	font-family: Arial;
	color: grey;
	margin-left: 40px;
	margin-top: 100px;
	text-decoration: underline;
	}
	</style>
	</head>
	<h1>Adjustable Legend Color Scale</h1>
	<body>

	<script>
	var width = 800,
	height = 320;
	var sliderData = [{
	x: 100,
	y: 20
	},
	{
	x: 600,
	y: 20
	}
	];


	var drag = d3.behavior.drag()
	.origin(Object)
	.on("drag", dragMove)
	.on('dragend', dragEnd);

	var svg = d3.select('body')
	.append('svg')
	.style('float','left')
	.attr("height", 120)
	.attr("width", width);

	var g = svg.append('g')
	.attr("height", 200)
	.attr("width", width)
	.attr('transform', 'translate(0, 10)');
	var rect = g
	.append('rect')
	.attr('y', 17.5)
	.attr("height", 5)
	.attr("width", width)
	.attr('fill', '#C0C0C0');

	g.selectAll('g')
	.data(sliderData)
	.enter()
	.append("rect")
	.attr("id",function(d,i){
	return "slider" + i;
	})
	.attr("width", 10)
	.attr("x", function(d) {
	return d.x
	})
	.attr("y", function(d) {
	return 0;
	})
	.attr("height", 40)
	.attr("fill", "#2394F5")
	.call(drag);

	svg.append('g')
	.attr('id','legendGroup');

	function draw(minMax){
	var minVal = minMax[0];
	var maxVal = minMax[1];
	var data = d3.range(Math.round(minVal),Math.round(maxVal), (Math.round(maxVal) - Math.round(minVal))/20);
	var o = d3.scale.ordinal()
	.domain(data)
	.rangeBands([Math.round(minVal), Math.round(maxVal)]);


	var colors = d3.scale.category20();

	var legend = d3.select('#legendGroup')
	.selectAll('rect.example2')
	.data(data);

	// enter selection
	legend.enter().append('rect');

	// update selection
	legend.attr('class', 'example2')
	.attr('id',function(d,i){
	return "rect"+i;
	})
	.style('fill', colors)
	.attr('x', function(d) { return Math.round(o(d)) })
	.attr('y', 60)
	.attr('width', Math.round(o.rangeBand()))
	.attr('height', 50);

	// exit selection
	legend
	.exit().remove();

	var rectLeft = d3.select('#legendGroup').selectAll('#rect-left')
	.data([data[0]]);
	var rectRight = d3.select('#legendGroup').selectAll('#rect-right')
	.data([data[data.length - 1]]);

	// enter left right
	rectLeft.enter().append('rect');
	rectRight.enter().append('rect');
	//append left right
	rectLeft
	.attr('id','rect-left')
	.style('fill',colors.range()[0])
	.attr('x',0)
	.attr('y', 60)
	.attr('width', Math.round(o(data[0])))
	.attr('height', 50);
	rectRight
	.attr('id','rect-left')
	.style('fill',colors.range()[colors.range().length - 1])
	.attr('x',Math.round(o(data[data.length - 1])))
	.attr('y', 60)
	.attr('width', width - Math.round(o(data[data.length - 1])))
	.attr('height', 50);

	// exit left right
	rectLeft.exit().remove();
	rectRight.exit().remove()
	}
	function dragMove(d) {
	d3.select(this)
	.attr("opacity", 0.6)
	.attr("x", d.x = Math.max(0, Math.min(width-10, d3.event.x)));
	update()
	}

	function dragEnd() {
	d3.select(this)
	.attr('opacity', 1);
	}

	function update(){
	var val1 = d3.select('#slider0').data().map(function(d){return d.x;});
	var val2 = d3.select('#slider1').data().map(function(d){return d.x;});

	var minVal = d3.min([val1[0], val2[0]]);
	var maxVal = d3.max([val1[0], val2[0]]);
	var minMax = [minVal, maxVal];
	draw(minMax);
	}
	var val1 = d3.select('#slider0').data().map(function(d){return d.x;});
	var val2 = d3.select('#slider1').data().map(function(d){return d.x;});

	var minVal = d3.min([val1[0], val2[0]]);
	var maxVal = d3.max([val1[0], val2[0]]);
	var minMax = [minVal, maxVal];
	window.onload = draw(minMax);
	</script>
	</body>
	</html>