Burke Gilman Trail

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-scale-radial.js"></script>
  <style>
    text {
      font-size: 14px;
      font-family: avenir;
    }
  </style>
</head>

<body>
  <script>
    var margin = {top: 20, right: 10, bottom: 20, left: 10};

var width = 990 - margin.left - margin.right,
    	height = 600 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
    	.attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var g = svg.append("g")
    	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var innerRadius = 100,
        outerRadius = Math.min(width, height) / 2 - 30;

var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S");
        formatDay = d3.timeFormat("%A");
        formatHour = d3.timeFormat("%H");
        formatDayHour = d3.timeFormat("%A %H:%M");

var fullCircle = 2 * Math.PI;

var x = d3.scaleTime()
        .range([0, fullCircle]);

var y = d3.scaleRadial()
    		.range([innerRadius, outerRadius]);

var linesouth = d3.lineRadial()
    		.angle(function(d) { return x(d.date_group); })
    		.radius(function(d) { return y(d.bikes_south); });

var linenorth = d3.lineRadial()
				.angle(function(d) { return x(d.date_group); })
				.radius(function(d) { return y(d.bikes_north); });

d3.csv("bg_trail.csv" ,function(d) {
      d.date_group = parseTime(d.date_group);
      d.bikes_south = +d.bikes_south;
			d.bikes_north = +d.bikes_north;
      return d;
    }, function(error, data) {
      if (error) throw error;

var maxValue = Math.max(0, d3.max(data, function(d) { return d.bikes_north; }));
      var angleSlice = Math.PI * 2 / 7;

var rScale = d3.scaleLinear()
          .range([0, outerRadius])
          .domain([0, maxValue]);

x.domain([d3.min(data, function(d) { return d.date_group; }), d3.max(data, function(d) { return d.date_group; })]);
  		y.domain([0, d3.max(data, function(d) { return d.bikes_north; })]);

var linePlotSouth = g.append("path")
      	.datum(data)
        .attr("fill", "none")
        .attr("stroke", "#4099ff")
        .attr("stroke-width", 3)
        .attr("d", linesouth);

var linePlotNorth = g.append("path")
      	.datum(data)
        .attr("fill", "none")
        .attr("stroke", "	#ffa640")
        .attr("stroke-width", 3)
        .attr("d", linenorth);

var yAxis = g.append("g")
          .attr("text-anchor", "middle");

var yTick = yAxis
        .selectAll("g")
        .data(y.ticks(3))
        .enter().append("g");

yTick.append("circle")
          .attr("fill", "none")
          .attr("stroke", "black")
      		.attr("opacity", 0.2)
          .attr("r", y);

yAxis.append("circle")
      		.attr("fill", "none")
          .attr("stroke", "black")
      		.attr("opacity", 0.2)
          .attr("r", function() { return y(y.domain()[0])});

var labels = yTick.append("text")
          .attr("y", function(d) { return -y(d); })
          .attr("dy", "0.35em")
          .attr("fill", "none")
          .attr("stroke", "#fff")
          .attr("stroke-width", 5)
          .attr("stroke-linejoin", "round")
          .text(function(d) { return d; });

yTick.append("text")
        .attr("y", function(d) { return -y(d); })
        .attr("dy", "0.35em")
        .text(function(d) { return d; });

var xAxisOuter = g.append("g");

var title = g.append("g")
      		.attr("class", "title")
      		.append("text")
      		.attr("dy", "-2em")
      		.attr("text-anchor", "middle")
      		.text("Cyclists per hour")

var subtitle = g.append("text")
      		.attr("dy", "-0.8em")
          .attr("text-anchor", "middle")
      		.attr("opacity", 0.6)
      		.text("on Burke Gilman");

g.append("text")
      		.attr("dy", "1.4em")
          .attr("dx", "2em")
          .attr("text-anchor", "middle")
          .attr("stroke", "#4099ff")
      		.attr("opacity", 0.8)
      		.text("South");

g.append("text")
      		.attr("dy", "1.4em")
          .attr("dx", "-2em")
          .attr("text-anchor", "middle")
          .attr("stroke", "#ffa640")
      		.attr("opacity", 0.8)
      		.text("North");

g.append("text")
          .attr("dy", "1.4em")
          .attr("text-anchor", "middle")
          .attr("opacity", 0.8)
          .text("/");

var timedate = svg.selectAll("text").select("text1").data(data).enter();

timedate.append("text")
          .attr("y", height / 2 + 50)
          .attr("x", width / 2)
          .attr("text-anchor", "middle")
          .attr("opacity", 0)
          .text(function(d, i) { return formatDayHour(d.date_group); })
          .style("font-size", "18px")
          .transition(0)
          .delay(function(d, i) { return i * 35000 / (7 * 24); })
          .attr("opacity", 0.6)
          .transition(0)
          .attr("opacity", 0)
          .remove();

var days = svg.selectAll("text").select("text2")
          .data(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]).enter();

days.append("text")
          .attr("text-anchor", "middle")
          .attr("opacity", 0.5)
          .text(function(d, i) { return d; })
          .style("font-size", "22px")
          .attr("transform", function(d, i) {
            if (i >= 2 & i <= 4) {
              return  "translate(" + (width / 2 + outerRadius * 1.1 * Math.cos(angleSlice * i - Math.PI / 2 + 2 * Math.PI / 14)) + ", " +
                (height / 2 + outerRadius * 1.1 * Math.sin(angleSlice * i - Math.PI / 2 + 2 * Math.PI / 14)) + ") rotate(" + (180 + i * 360 / 7 + 25 ) + ")" ;
            } else {
              return  "translate(" + (width / 2 + outerRadius * 1.1 * Math.cos(angleSlice * i - Math.PI / 2 + 2 * Math.PI / 14)) + ", " +
                (height / 2 + outerRadius * 1.1 * Math.sin(angleSlice * i - Math.PI / 2 + 2 * Math.PI / 14)) + ") rotate(" + (i * 360 / 7 + 25 ) + ")" ;
            }

});

// Long axis
			var vertline_data = [1, 2, 3, 4, 5, 6, 7];
			var vertline = g.selectAll("vline")
					.data(vertline_data)
					.enter().append("line")
					.attr("x1", function(d, i) { return innerRadius * Math.cos(angleSlice * i - Math.PI / 2)})
					.attr("y1", function(d, i) { return innerRadius * Math.sin(angleSlice * i - Math.PI / 2)})
					.attr("x2", function(d, i) { return rScale(maxValue * 1.1) * Math.cos(angleSlice * i - Math.PI / 2)})
					.attr("y2", function(d, i) { return rScale(maxValue * 1.1) * Math.sin(angleSlice * i - Math.PI / 2)})
					.style("stroke", "grey")
					.style("stroke-width",".5px");

var lineLengthSouth = linePlotSouth.node().getTotalLength();
      var lineLengthNorth = linePlotNorth.node().getTotalLength();

// point that follows path of lines

// animate lines
			linePlotSouth
				.attr("stroke-dasharray", lineLengthSouth + " " + lineLengthSouth)
				.attr("stroke-dashoffset", lineLengthSouth)
				.transition()
				.duration(35000)
				.delay(0)
				.ease(d3.easeLinear)
				.attr("stroke-dashoffset", 0);

linePlotNorth
				.attr("stroke-dasharray", lineLengthNorth + " " + lineLengthNorth)
				.attr("stroke-dashoffset", lineLengthNorth)
				.transition()
				.duration(35000)
				.delay(0)
				.ease(d3.easeLinear)
				.attr("stroke-dashoffset", 0);

});

</script>
</body>

https://d3js.org/d3.v4.min.js