Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
{
"libraries": [
"d3"
],
"mode": "javascript",
"layout": "fullscreen mode (vertical)",
"resolution": "reset"
}
#curved path {
fill: none;
stroke: #000; }
#straight path {
fill: none;
stroke: #DDD; }
<svg width="800" height="800">
<g id="transformer">
<g id="straight"></g>
<g id="curved"></g>
</g>
</svg>
var svg = d3.select("#transformer");
var curved = svg.select("#curved");
var straight = svg.select("#straight");
var thickness = 30;
svg.attr('transform','translate(100,100)')
var drawCurvedLine = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis")
.tension(0.5);
var drawStraightLine = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear")
.tension(0);
var l1 = [{x: 200 , y: 0},
{x: 400, y: 200},
{x: 200, y: 400},
{x: 00 , y: 200},
{x: 200 , y: 0}];
var l2 = [{x: 70, y: 52.5}, {x: 200, y: 250}, {x: 70, y: 447.5}];
straight.append("path").attr("d", drawStraightLine(l1));
curved.append("path").attr("d", drawCurvedLine(l1));
color = d3.scale.category10();
svg.append('g').selectAll("circle")
.data(l1).enter()
.append("svg:circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", thickness/2 - thickness/8)
.style("fill", function(d, i) { return color(i % 4); });
curved.append('circle').attr('r',200).attr('cx',200).attr('cy',200)
.attr('fill','none')
.attr('stroke','#ddd')
curved.selectAll('circle')
.attr('stroke-width',thickness)
.attr('stroke-linecap','round')
.attr('stroke-dasharray',200+','+2000)
.attr('stroke-dashoffset',10)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.