index.html
<!DOCTYPE html>
<html>
<head>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
svg.vis{
}
circle.point{
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 800
var h = 800
var margin = 100
var svg = d3.select('body').append('svg')
.attr({
'class' : 'vis'
, width: w
, height: h
})
var path = [[0.000, 0.000],
[0.694, -0.361],
[1.808, -0.123],
[2.987, 0.085],
[4.194, -0.109],
[5.336, -0.376],
[6.000, 0.000],
[6.481, 0.855],
[6.512, 2.189],
[6.000, 3.000],
[5.284, 3.352],
[4.182, 3.118],
[3.016, 2.916],
[1.809, 3.110],
[0.663, 3.375],
[0.000, 3.000],
[-0.474, 2.152],
[-0.497, 0.826]]
var x = d3.scale.linear().domain([0,6]).range([margin, w - margin * 2])
var y = d3.scale.linear().domain([0,6]).range([margin, h - margin * 2])
var color = d3.scale.linear()
.domain([0, path.length])
.range(["red", "green"])
svg.selectAll('circle')
.data(path)
.enter()
.append('circle')
.attr('class', 'point')
.attr('cx', function(d){ return x(d[0]) })
.attr('r', '10')
.attr('cy', function(d){ return y(d[1]) })
.style('fill', function(d, i){ return color(i)})
</script>
</body>
</html>