Point along path with slider

README.md

Point along path with slider

Built this for a project requiring visual modification of parameters. Inspired in part by this block.

If you have any suggestions on how I could make this better, let me know!

graph.css

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
}

path {
    stroke: lightgrey;
    stroke-width: 3px;
    fill: none;
}

text {
    stroke: steelblue;
    stroke-width: 1;
}

circle {
    fill: steelblue;
    stroke: #fff;
    stroke-width: 2px;
}

.point {
    display: none;
}

.circle {
    -webkit-transition: 0.1s all linear;
    -moz-transition: 0.1s all linear;
    -ms-transition: 0.1s all linear;
    -o-transition: 0.1s all linear;
    transition: 0.1s all linear;
}

.circle:hover {
    fill: lightblue;
}

.axis {
    shape-rendering: crispEdges;
}

.x.axis line {
    stroke: lightgrey;
    stroke-opacity: 0.5;
}

.x.axis .minor {
    stroke-opacity: 0.2;
}

.x.axis path {
    fill: none;
    stroke: #ccc;
}

.y.axis line, .y.axis path {
    fill: none;
    stroke: #ccc;
}

.aGraph {
    position: absolute;
    top: 0;
    left: 0;
    float: left;
}

.domain {
    opacity: 0;
}

/* Slider Stuff */

.ui-slider-handle:focus {
    outline: none;
}

#slider {
    position: absolute;
    top: 400px;
    left: 70px;
}

graph.js

var m = [ 80, 80, 80, 80 ];
var w = 1000 - m[1] - m[3];
var h = 400 - m[0] - m[2]

var data = [{"x": 1,  "y": 28}, {"x": 2,  "y": 55},
            {"x": 3,  "y": 43}, {"x": 4,  "y": 91},
            {"x": 5,  "y": 81}, {"x": 6,  "y": 53},
            {"x": 7,  "y": 19}, {"x": 8,  "y": 87},
            {"x": 9,  "y": 52}, {"x": 10, "y": 48},
            {"x": 11, "y": 24}, {"x": 12, "y": 49},
            {"x": 13, "y": 87}, {"x": 14, "y": 66},
            {"x": 15, "y": 17}, {"x": 16, "y": 27},
            {"x": 17, "y": 68}, {"x": 18, "y": 16},
            {"x": 19, "y": 49}, {"x": 20, "y": 15}];

var xExtent = d3.extent(data, function(d) { return d.x; });
var yExtent = d3.extent(data, function(d) { return d.y; });

var x = d3.scale.linear().domain([xExtent[0],xExtent[1]]).range([0,w]);
var y = d3.scale.linear().domain([yExtent[0], yExtent[1]]).range([h,0]);

var line = d3.svg.line()
        .x(function(d,i) {
            return x(d.x);
        })
        .y(function(d,i) {
            return y(d.y);
        })
        .interpolate('cardinal');

var graph = d3.select('.aGraph').append('svg:svg')
                                .attr('width', w + m[1] + m[3])
                                .attr('height', h + m[0] + m[2])
                                .append('svg:g')
                                .attr('transform', 'translate(' + m[3] + ',' + m[0] + ')');

var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickPadding(10).orient('bottom');
graph.append('svg:g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + h + ')')
        .call(xAxis);


var yAxis = d3.svg.axis().scale(y).tickSize(-w).ticks(h/30).tickPadding(10).orient('left');
graph.append('svg:g')
        .attr('class', 'y axis')
        .attr('transform', 'translate(0,0)')
        .call(yAxis);

var path = graph.append('svg:path').attr('d',line(data));

var points = graph.selectAll('.point')
    .data(data)
    .enter()
    .append('svg:circle')
    .attr('class','point')
    .attr('r',3)
    .attr('cx', function(d) { return x(d.x); })
    .attr('cy', function(d) { return y(d.y); })
    .on('mouseover', function() { d3.select(this).attr('r',6); })
    .on('mouseout', function() { d3.select(this).attr('r',3); }).
    on('click', function(d,i) { console.log(d,i) });

var circle = graph.append('svg:circle')
                    .attr('class','circle')
                    .attr('r',13)
                    .attr('cx', x(data[0].x) )
                    .attr('cy', y(data[0].y) )
                    .on('click', function() { console.log(Math.round(x.invert($(this).attr('cx'))) + ' ' + Math.round(y.invert($(this).attr('cy')))); });

function slideAlong() {
    var l = path.node().getTotalLength();
    var sVal = $('#slider').slider('value');
    var p = path.node().getPointAtLength((sVal/100000) * l)
    circle.attr('cx', p.x).attr('cy', p.y);
}

var sliderOpts = {
    orientation: 'horizontal',
    max: 100000,
    slide: slideAlong
}

$(function() {
    $('#slider').slider(sliderOpts);
})

d3.select('#slider').style('width',''+w+'px');

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="graph.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
<body>
    <div id="graph" class="aGraph"></div>
    <div id="slider"></div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://trifacta.github.io/vega/lib/d3.v3.min.js"></script>
<script src="http://trifacta.github.io/vega/lib/d3.geo.projection.min.js"></script>
<script src="graph.js" type="text/javascript"></script>
</html>