Skip to content

Instantly share code, notes, and snippets.

@stianSjoli

stianSjoli/index.html

Created April 15, 2019 16:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stianSjoli/da2153eef32e84bb5c8cdf23d5c90758 to your computer and use it in GitHub Desktop.
Save stianSjoli/da2153eef32e84bb5c8cdf23d5c90758 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/belajoh
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!--<script src="https://d3js.org/d3.v4.2.2.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
<title>JS Bin</title>
<style>
input{
position:relative;
width:50px;
border-color:black;
border-size:1px;
height:70px;
text-align:center;
font-size:28px;
box-shadow: inset 0 0 2px #000000;
outline:none;
}
#input-box {
position:absolute;
top:450px;
left:250px;
}
</style>
</head>
<body>
<svg></svg>
<div id=input-box>
<input id="letter" type="text" value="" onblur="rotate()" maxLength="1"></input>
-
<input id="cipherLetter" type="text" value="" onblur="rotate()" maxLength="1"></input>
</div>
<button onclick="t()">test</button>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<\!--<script src="https://d3js.org/d3.v4.2.2.min.js"><\/script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"><\/script>
<title>JS Bin</title>
<style>
input{
position:relative;
width:50px;
border-color:black;
border-size:1px;
height:70px;
text-align:center;
font-size:28px;
box-shadow: inset 0 0 2px #000000;
outline:none;
}
#input-box {
position:absolute;
top:450px;
left:250px;
}
</style>
</head>
<body>
<svg></svg>
<div id=input-box>
<input id="letter" type="text" value="" onblur="rotate()" maxLength="1"></input>
-
<input id="cipherLetter" type="text" value="" onblur="rotate()" maxLength="1"></input>
</div>
<button onclick="t()">test</button>
</body>
</html>
<script>
var n = 0
function rotate() {
var letter = document.getElementById("letter").value;
var cipherLetter = document.getElementById("cipherLetter").value;
if(letter == "" || cipherLetter == "" ) {
return;
} else {
}
}
function cipherAlphabet(alphabet, steps){
var copy = alphabet.slice();
var truncation = copy.splice(0,steps);
return copy.concat(truncation);
}
var alphabet = "abcdefghijklmnopqrstuvwxyzæøå".split("");
var cAlphabet = cipherAlphabet(alphabet, 5);
function t() {
if(n > 24){
n = 0;
} else {
n += 5;
}
updateText(cipherAlphabet(alphabet,n));
}
function arc(outerRadius, innerRadius){
return d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
}
var svg = d3.select("svg")
.attr("height", 600)
.attr("width", 600)
var r = 200;
var p = Math.PI * 2;
var group = svg.append("g")
.attr("transform", "translate(300,300)");
var arcOuter = arc(120, 120-30);
var arcInner = arc(120-40, 120-80);
var pie = d3.pie()
.sort(null)
.value(function(d) {
return 1;
});
group.selectAll(".arc")
.data(pie(alphabet))
.enter()
.append("path")
.attr("class", "arc")
.attr("id", function(d,i){
return "arc" + i;
})
.attr("d", arcOuter)
.style("fill", "black")
.style("stroke", "white")
.style("stroke-width", "1px");
group.selectAll(".arcInner")
.data(pie(cAlphabet))
.enter()
.append("path")
.attr("class", "arcInner")
.attr("id", function(d,i){
return "arcInner" + i;
})
.attr("d", arcInner)
.style("fill", "black")
.style('stroke','white')
.style('stroke-width','0.5px');
group.selectAll(".arcInnerText")
.data(cAlphabet)
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("font-size", "24")
.attr("x", 9)
.attr("dy", 25)
.attr("fill", "orange")
.attr("class", "arcInnerText")
.style('stroke','grey')
.style('stroke-width','0.5px')
.append("textPath")
.attr("xlink:href",function(d,i){return "#arcInner" + i})
.text(function(d){
return d
})
updateText(alphabet);
function updateText(text) {
group.selectAll(".arcText")
.data(text)
.join(enter, update, exit);
}
function enter(e) {
e.append("text")
.attr("text-anchor", "middle")
.attr("font-size", "28")
.attr("x", 12)
.attr("dy", 22)
.attr("fill", "orange")
.style('stroke','grey')
.style('stroke-width','0.5px')
.attr("class", "arcText")
.append("textPath")
.attr("xlink:href",function(d,i){return "#arc"+i;})
.text(function(d){
return d
})
}
function update(e){
e
.attr("text-anchor", "middle")
.attr("font-size", "28")
.attr("x", 12)
.attr("dy", 22)
.attr("fill", "orange")
.style('stroke','grey')
.style('stroke-width','0.3px')
.attr("class", "arcText")
.select("textPath")
.text(function(d){
return d;
})
}
function exit(e){
e.remove();
}
<\/script>
</script>
</body>
</html>
<script>
var n = 0
function rotate() {
var letter = document.getElementById("letter").value;
var cipherLetter = document.getElementById("cipherLetter").value;
if(letter == "" || cipherLetter == "" ) {
return;
} else {
}
}
function cipherAlphabet(alphabet, steps){
var copy = alphabet.slice();
var truncation = copy.splice(0,steps);
return copy.concat(truncation);
}
var alphabet = "abcdefghijklmnopqrstuvwxyzæøå".split("");
var cAlphabet = cipherAlphabet(alphabet, 5);
function t() {
if(n > 24){
n = 0;
} else {
n += 5;
}
updateText(cipherAlphabet(alphabet,n));
}
function arc(outerRadius, innerRadius){
return d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
}
var svg = d3.select("svg")
.attr("height", 600)
.attr("width", 600)
var r = 200;
var p = Math.PI * 2;
var group = svg.append("g")
.attr("transform", "translate(300,300)");
var arcOuter = arc(120, 120-30);
var arcInner = arc(120-40, 120-80);
var pie = d3.pie()
.sort(null)
.value(function(d) {
return 1;
});
group.selectAll(".arc")
.data(pie(alphabet))
.enter()
.append("path")
.attr("class", "arc")
.attr("id", function(d,i){
return "arc" + i;
})
.attr("d", arcOuter)
.style("fill", "black")
.style("stroke", "white")
.style("stroke-width", "1px");
group.selectAll(".arcInner")
.data(pie(cAlphabet))
.enter()
.append("path")
.attr("class", "arcInner")
.attr("id", function(d,i){
return "arcInner" + i;
})
.attr("d", arcInner)
.style("fill", "black")
.style('stroke','white')
.style('stroke-width','0.5px');
group.selectAll(".arcInnerText")
.data(cAlphabet)
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("font-size", "24")
.attr("x", 9)
.attr("dy", 25)
.attr("fill", "orange")
.attr("class", "arcInnerText")
.style('stroke','grey')
.style('stroke-width','0.5px')
.append("textPath")
.attr("xlink:href",function(d,i){return "#arcInner" + i})
.text(function(d){
return d
})
updateText(alphabet);
function updateText(text) {
group.selectAll(".arcText")
.data(text)
.join(enter, update, exit);
}
function enter(e) {
e.append("text")
.attr("text-anchor", "middle")
.attr("font-size", "28")
.attr("x", 12)
.attr("dy", 22)
.attr("fill", "orange")
.style('stroke','grey')
.style('stroke-width','0.5px')
.attr("class", "arcText")
.append("textPath")
.attr("xlink:href",function(d,i){return "#arc"+i;})
.text(function(d){
return d
})
}
function update(e){
e
.attr("text-anchor", "middle")
.attr("font-size", "28")
.attr("x", 12)
.attr("dy", 22)
.attr("fill", "orange")
.style('stroke','grey')
.style('stroke-width','0.3px')
.attr("class", "arcText")
.select("textPath")
.text(function(d){
return d;
})
}
function exit(e){
e.remove();
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment