Skip to content

Instantly share code, notes, and snippets.

@vwochnik

vwochnik/.block

Created May 18, 2018 19:13
Show Gist options
  • Save vwochnik/85634fda97bedd29fbcfb78f2b0225c1 to your computer and use it in GitHub Desktop.
Save vwochnik/85634fda97bedd29fbcfb78f2b0225c1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.block
license: mit
Raw
draw.js
function pathReplace(string, numbers) {
var next = 0;
return string.replace(/#/g, function(match) {
return (next < numbers.length) ? numbers[next++] : 0;
});
}
function labelPoint(g, x, y, tx, ty, label) {
g.append('circle')
.attr('cx', x)
.attr('cy', y)
.attr('r', 4)
.attr('class', 'label-point');
labelText(g, x+tx, y+ty, label);
}
function labelText(g, x, y, label) {
g.append('text')
.attr('x', x)
.attr('y', y)
.attr('font-size', 12)
.attr('dy', '.35em')
.attr('text-anchor', 'middle')
.attr('class', 'label')
.text(label);
}
var width = 500, height = 200,
x1 = 30, y1 = 160, x4 = 470, y4 = 160,
angle = 20;
var r = Math.sqrt(Math.pow(x1-x4, 2) + Math.pow(y1-y4, 2)),
theta = Math.atan2((y1-y4),(x1-x4)),
rad = angle/180.0*2*Math.PI,
d = (0.3*r) / Math.cos(rad),
aO = theta - rad + Math.PI,
aD = theta + rad,
x2 = x1 + d*Math.cos(aO),
y2 = y1 + d*Math.sin(aO),
x3 = x4 + d*Math.cos(aD),
y3 = y4 + d*Math.sin(aD);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append('path')
.attr('d', pathReplace('M#,# L#,#', [x1, y1, x2, y2]))
.attr('class', 'shadow-line');
svg.append('path')
.attr('d', pathReplace('M#,# L#,#', [x3, y3, x4, y4]))
.attr('class', 'shadow-line');
svg.append('path')
.attr('d', pathReplace('M#,# L#,#', [x1, y1, x4, y4]))
.attr('class', 'shadow-line');
svg.append('path')
.attr('d', pathReplace('M#,# C#,# #,# #,#', [x1, y1, x2, y2, x3, y3, x4, y4]))
.attr('class', 'line');
labelPoint(svg, x1, y1, -12, 14, 'A');
labelPoint(svg, x2, y2, -12, -14, 'B');
labelPoint(svg, x3, y3, 12, -14, 'C');
labelPoint(svg, x4, y4, 12, 14, 'D');
var arc = d3.svg.arc()
.innerRadius(40)
.outerRadius(40);
svg.append('path')
.attr('d', arc.startAngle(Math.PI/2 - rad).endAngle(Math.PI/2))
.attr('transform', 'translate('+[x1,y1]+')')
.attr('class', 'shadow-line');
labelText(svg, x1 + 2/3 * arc.centroid()[0], y1 + 2/3 * arc.centroid()[1], 'α');
svg.append('path')
.attr('d', arc.startAngle(Math.PI*1.5).endAngle(Math.PI*1.5 + rad))
.attr('transform', 'translate('+[x4,y4]+')')
.attr('class', 'shadow-line');
labelText(svg, x4 + 2/3 * arc.centroid()[0], y4 + 2/3 * arc.centroid()[1], 'α');
labelText(svg, 0.5 * (x1 + x4), y1 - 12, 'd');
labelText(svg, 0.5 * (x1 + x2) - 9, 0.5 * (y1 + y2) - 9, 'r');
labelText(svg, 0.5 * (x3 + x4) + 9, 0.5 * (y3 + y4) - 9, 'r');
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Line Chart</title>
<style>
.line {
fill: none;
stroke: #000;
stroke-width: 1.5;
}
.shadow-line {
fill: none;
stroke: #444;
stroke-dasharray: 5, 5;
stroke-width: 1.5;
}
.label-point {
fill: #000;
}
.label {
font-family: serif;
font-style: italic;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="draw.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment