public
Last active — forked from gabrielflorit/README.md

  • Download Gist
README.md
Markdown
options.json
JSON
1 2 3 4 5 6 7 8
{
"libraries": [
"d3"
],
"mode": "javascript",
"layout": "fullscreen mode (vertical)",
"resolution": "reset"
}
water.css
CSS
1 2 3 4 5 6 7
#curved path {
fill: none;
stroke: #000; }
 
#straight path {
fill: none;
stroke: #DDD; }
water.html
HTML
1 2 3 4 5 6
<svg width="800" height="800">
<g id="transformer">
<g id="straight"></g>
<g id="curved"></g>
</g>
</svg>
water.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
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)
water.json
JSON
1
{ }

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.