D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
FergusDevelopmentLLC
Full window
Github gist
Shoot straight!
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <div style="width:960px;"> <div class="chart"></div> <p style='text-align: right;margin-right:40px'>Cool source: <a href='https://www.youtube.com/watch?v=pAMgUB51XZA'>Numberphile</a>, <a href='https://oeis.org/A133058'>https://oeis.org/A133058</a></p> </div> <script> const getGreatestCommonDenomOf = (x, y) => { if ((typeof x !== 'number') || (typeof y !== 'number')) return false x = Math.abs(x) y = Math.abs(y) while (y) { var t = y y = x % y; x = t } return x } let sequence = [] sequence.push({ n: 0, a: 1 }) sequence.push({ n: 1, a: 1 }) for (let i = 2; i <= 850; i++) { s = {} s.n = i let gcd = getGreatestCommonDenomOf(s.n, sequence[i - 1].a) if (gcd > 1) s.a = sequence[i - 1].a / gcd else s.a = sequence[i - 1].a + i + 1; sequence.push(s) } let svgWidth = 960; let svgHeight = 425; const margin = { top: 50, right: 50, bottom: 50, left: 50 }; let chartWidth = svgWidth - margin.right - margin.left; let chartHeight = svgHeight - margin.top - margin.bottom; let svg = d3.select(".chart") .append("svg") .attr("width", svgWidth) .attr("height", svgHeight) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`) let chart = svg.append("g"); let yLinearScale = d3.scaleLinear() .range([chartHeight, 0]) .domain([0, d3.max(sequence, d => +d.a)]) let xLinearScale = d3.scaleLinear() .range([0, chartWidth]) .domain([0, d3.max(sequence, d => +d.n)]); let bottomAxis = d3.axisBottom() .scale(xLinearScale); let leftAxis = d3.axisLeft() .scale(yLinearScale); nodeEnter = chart .selectAll("circle") .data(sequence) .enter(); nodeEnter .append("circle") .attr("fill", "#000") .attr("r", 2) .attr("cy", (d, i) => yLinearScale(d3.max(sequence, d => +d.a))) .attr("cx", (d, i) => xLinearScale(d3.max(sequence, d => +d.n))) .transition() .delay((d, i) => { return i * 10 }) .attr("cy", (d, i) => yLinearScale(d.a)) .attr("cx", (d, i) => xLinearScale(d.n)) chart.append("g") .attr('transform', `translate(0,${chartHeight})`) .call(bottomAxis) chart.append("g") .call(leftAxis) </script> </body> <!-- https://blockbuilder.org/FergusDevelopmentLLC/9c89649fded9f8eaa40b006f352143c9 --> <!-- https://bl.ocks.org/FergusDevelopmentLLC/9c89649fded9f8eaa40b006f352143c9 -->
https://d3js.org/d3.v4.min.js