Skip to content

Instantly share code, notes, and snippets.

@jwilber

jwilber/.block

Last active October 8, 2018 06:05
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 jwilber/f021df285e177685cb512f62386454f5 to your computer and use it in GitHub Desktop.
Save jwilber/f021df285e177685cb512f62386454f5 to your computer and use it in GitHub Desktop.
Download ZIP
b-spline least squares
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
g.tick line {
opacity: .1;
}
path.domain {
opacity:1;
}
.tick {
opacity: 0
}
</style>
</head>
<body>
<script>
const dotDataPre = [6, 25, 17, 30, 45, 23, 46, 2, 15];
const dotData = dotDataPre.map(d => (Math.random() * d) + d/2);
const dotDataBelow = dotData.map((d) => d * (1 / 2) + (Math.random() * 3));
const dotDataAbove = dotData.map((d) => d * 1.5 + (Math.random() * 2.5));
const margin = {top: 50, right: 25, bottom: 25, left: 25};
const width = 700 - margin.right - margin.left;
const height = 500 - margin.top - margin.bottom;
const svg = d3.select('body').append('svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// define scales
const xScale = d3.scaleLinear().domain([0,9]).range([margin.left, width]);
const yScale = d3.scaleLinear().domain([0, 100]).range([height, 20]);
// define & draw axes
// const xAxis = d3.axisBottom()
// .scale(xScale);
// const yAxis = d3.axisRight()
// .scale(yScale);
// svg.append('g').attr('transform', 'translate(0,' + height +')').
// attr('id', 'xAxisG').call(xAxis);
// svg.append('g').attr('transform', 'translate(' + margin.left + ',0)').
// attr('id', 'yAxisG').call(yAxis);
// Add circles
svg.selectAll('circle.dots')
.data(dotDataBelow)
.enter()
.append('circle')
.attr('class', 'dots')
.attr('r', 0)
.attr('cx', (d,i) => xScale(i))
.attr('cy', d => yScale(d))
.style('fill', 'coral')
.style('opacity', .6)
svg.selectAll('circle.dots2')
.data(dotDataAbove)
.enter()
.append('circle')
.attr('class', 'dots2')
.attr('r', 0)
.attr('cx', (d,i) => xScale(i))
.attr('cy', d => yScale(d))
.style('fill', '#67c7d3')
.style('opacity', .6)
d3.selectAll('circle')
.transition()
.delay(500)
.attr('r', 9)
.transition()
.attr('r', 6)
// add lines
const dotLine = d3.line()
.x((d,i) => xScale(i))
.y(d => yScale(d))
.curve(d3.curveBasis);
const path = svg.append('path')
.attr('d', dotLine(dotData))
.attr('fill', 'none')
.attr('stroke', '#dbb64b')
.attr('stroke-width', 6)
.style('opacity', .6);
const totalLength = path.node().getTotalLength();
path.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.delay(1000)
.duration(4500)
.attr("stroke-dashoffset", 0);
</script>
</body>
Raw
tweetdata.csv
day tweets
1 11
1 50
2 16
2 10
3 31
4 15
5 10
6 41
7 13
8 15
9 11
10 14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment