Published
Edited
Apr 20, 2020
md`# Simple harmonic motion`
viewof lineColour = DOM.input('color');
// window.lineColour = lineColour;
viewof lineColour1 = DOM.input('color')
// window.lineColour1 = lineColour1;
// function chart() {
// const svg = d3.select(DOM.svg(width, height));
// let g = svg
// .append("g")
// .attr("transform", `translate(${width / 2},${height / 2})`);
// let gr = g.append("g").call(rAxis);
// let ga = g.append("g").call(angleAxis);
// const dot = g.append("g")
// .attr("fill", lineColour)
// .attr("fill-opacity", 0.4)
// .selectAll("g")
// .data(data1)
// .enter().append("circle")
// .attr("transform", d =>
// `rotate(${ (d[0] - Math.PI / 2) / Math.PI * 180}) translate(${r(d[1])},0)`)
// .attr("r", 3);
// return svg.node();
// }
line1 = d3.radialLine()
.radius(function(d) { return r(d[1]); })
.angle(function(d) { return -d[0] - Math.PI / 2; })
// function data_2(base) {
// let dir = -1 * (base | 1);
// return function(){
// dir = dir * -1;
// return new Array(360 / angleSection).fill(1).map((item, index) => {
// return [Math.PI * 2 / (360 / angleSection) * index , dir];
// })
// }
// }
function data_2(base) {
let degreen = 360;
let period = degreen / angleSection;
let frequency = 1 / period;
// let frequency = ;
let step = -1;
return function(){
step ++;
return new Array(360 / angleSection).fill(1).map((item, index) => {
return [Math.PI * 2 / (360 / angleSection) * index , Math.cos(step * frequency * Math.PI / Math.pow(97, .5) * index ) ];
})
// return new Array( degreen ).fill(1).map((item, index) => {
// return [Math.PI * 2 / degreen * index , Math.cos((step)* frequency * Math.PI * 2 - 0.5 * index * Math.PI * Math.pow(3, .5) )];
// })
}
}
data2 = data_2();
function rAxis(g) {
let gr =
g.attr("class", "r axis")
.selectAll("g")
.data(r.ticks(5).slice(1))
.enter().append("g");
gr.append("circle")
.attr("r", r)
.attr("fill", "none")
.attr("stroke","#777")
.attr("stroke-dasharray", "1,4");
g.selectAll(".axis :last-of-type circle")
.attr("stroke","#333")
.attr("stroke-dasharray", "none");
gr.append("text")
.attr("y", function(d) { return -r(d) - 4; })
.attr("transform", "rotate(10)")
.style("text-anchor", "middle")
.text(function(d) { return d; })
.attr("font-size", 10)
.attr("font-family", "sans-serif");
return gr;
}
// Draws angle axis from 0 to 360
function angleAxis(g) {
let ga =
g
.attr("class", "a axis")
.selectAll("g")
.data(d3.range(0, 360, angleSection))
.enter().append("g")
.attr("transform", function(d) { return `rotate(${d - 90})`; });
ga.append("line")
.attr("x2", radius)
.attr("fill", "none")
.attr("stroke","#777")
.attr("stroke-dasharray", "1,4");
ga.append("text")
.attr("x", radius + 6)
.attr("dy", ".35em")
.style("text-anchor", function(d) { return d - 90 < 270 && d - 90 > 90 ? "end" : null; })
.attr("transform", function(d) { return d - 90 < 270 && d - 90 > 90 ? "rotate(180 " + (radius + 6) + ",0)" : null; })
.text(function(d) { return d + "°"; })
.attr("font-size", 10)
.attr("font-family", "sans-serif");
return ga;
}
data = d3.range(0, 2*Math.PI, .01).map(function(t) {
return [t, t / 2 / Math.PI];
})
r = d3.scaleLinear()
.domain([0, d3.max(data, d => d[1])]).nice()
.range([0, radius])
line = d3.radialLine()
.radius(function(d) { return r(d[1]); })
.angle(function(d) { return -d[0] - Math.PI / 2; })
radius = 250
height = 600
width = 600 //900
angleSection = 1
margin = ({top: 20, right: 20, bottom: 20, left: 20})
d3 = require("d3@5")
_ = require("lodash")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
