SVG Examples

by Jeff Wen

HTML

<svg height="400px" width="400px">
    
</svg>

CSS

svg {
    background:aliceblue;
}
/*circle {
    fill:tomato;
stroke:purple;
stroke-width:2px;
}
line {
    stroke:red;
stroke-width:3px;
}
text {
    font-family:sans-serif;
font-size:20px;
}
*/
path {
    fill:none;
    stroke: tomato;
stroke-width:2px;
}

JavaScript

// Circle
/*d3.select('svg')
.append('circle')
.attr('cx',200)
.attr('cy',200)
.attr('r',50)
*/

//
var svg = d3.select('svg')

/*svg.append('line')
.attr('x1',50)
.attr('y1',200)
.attr('x2',350)
.attr('y2',200)

svg.append('line')
.attr('x1',200)
.attr('y1',50)
.attr('x2',200)
.attr('y2',350)

svg.append('text')
.attr('x',50)
.attr('y',200)
.text('cowboy')

svg.append('text')
.attr('x',200)
.attr('y',200)
.attr('text-anchor','middle')
.text('astronaut')
.attr('dy','0.25em')

svg.append('text')
.attr('x',350)
.attr('y',200)
.attr('text-anchor','end')
.text('pioneer')
.attr('dy','0.6em')
*/

var data = [{x:10,y:125},{x:50,y:250},{x:150,y:175}]

var line = d3.svg.line()
.x(function(d){return d.x;})
.y(function(d){return d.y;})
//.interpolate('basis')

svg.append('path')
.attr('d',line(data))

console.log('path interpolation:',line.interpolate())