Interesting Fisheye application

by Nivaldo

HTML

<script src="https://rawgit.com/d3/d3-plugins/master/fisheye/fisheye.js"></script>
<div id="chart3"></div>

CSS

#chart3 {
        width: 300px;
        height: 180px;
        border: solid 1px #ccc;
        pointer-events: all;
    }

    .WhoBackground {

        fill: none;

    }

    #chart3 line {
        shape-rendering: crispEdges;
    }

    #chart3 line {
        stroke: #333;
    }


</style>

JavaScript

var width = 300,
    height = 180,
    xSteps = d3.range(0, width, 16);

var xFisheye = d3.fisheye.scale(d3.scale.identity).domain([0, width]).focus(1000);

var svg = d3.select("#chart3").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(-.5,-.5)");

svg.append("rect")
    .attr("class", "WhoBackground")
    .attr("width", width)
    .attr("height", height);

var bars = svg.selectAll(".bars")
    .data(xSteps)
    .enter()
    .append("g")
    .attr("class", "bars")
    .attr("transform", function(d){
        
        return "translate("+ xFisheye(d) +",0)";
        
    });

var bar = bars
    .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("height", height-100)
    .attr("width", function(d, i){
        
        return 5;
    })
    .style("fill", "red");

var txt = bars
    .append("text")
    .text(function(d){
        
        return d;
    })
    .style("font-size", "8px")
    .style("text-anchor", "end")
    .attr("dx", "-19em")
    .attr("dy", "0.7em")
    .style("font-family", "sans-serif")
    .attr("transform", "rotate(-90)");

svg.on("mousemove", function() {
    var mouse = d3.mouse(this);
    xFisheye.focus(mouse[0]);
    
    redraw();
});

function redraw() {
    
    bars
    .attr("transform", function(d){
        
        return "translate("+ xFisheye(d) +",0) scale(1, 1)";
        
    });
}