D3 Examples - Radial Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
​
    <style>
     body{
        background-color: black;
     }
​
     svg {
        background-color: #000000;
        font-family: 'Lato';
     }
​
     .axis {
        stroke: #ffffff;
     }
​
     text.title {
        font-size: 26px;
     }
​
     text.months, 
     text.temp {
      text-anchor: middle;
      font-size: 12px;
      fill: #39837B;
     }
​
     circle.axis {
        stroke: #000000;
        stroke-width: 1px;
        fill: none;
     }
​
     circle.axis.record {
        stroke: #1f463c;
        stroke-width: 1.2px;
        opacity: 1;
     }
​
     line.record, 
     line.avg, 
     line.yearLow, 
     line.yearHigh{
      stroke-width: 1px;
     }
    </style>
</head>
<body>
    <svg width=960 height=500></svg>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
​
    <script>
 var width = 960,
     margin = 20,
     height = 500,
     svg = d3.select('svg'),
     origin = svg.append('g')
        .attr('transform', 'translate(' + width*1/2 + ',' + height/1.9 + ')'),
     rScale = d3.scale.linear()
      .domain([-10, 110])
      .range([0, height/2 - margin]),
     yScale = function(day, temp) { return -Math.cos(angleScale(day)*Math.PI/180)*rScale(parseInt(temp))},
    xScale = function(day, temp) { return Math.sin(angleScale(day)*Math.PI/180)*rScale(parseInt(temp))},
    angleScale = d3.scale.linear()
        .range([0, 360]);
​
  
var mycolor = d3.scale.ordinal().range(["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fbc9e3","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"])
  
//  Functions for moving things to front and back
  var curRing = null;
    function unShowRing(){
      d3.selectAll(".record")
        .style("opacity", 1);
      curRing = null;
    }
    
    function showRing(ringId){
      d3.selectAll(".record:not(.ring" + ringId + ")")
            .style("opacity", 0);
      curRing = ringId;
    }
​
// Function for drawing lines      
     var drawRadial = function(chart, cl, data, low, high) {
      chart.selectAll('line.' + cl)
        .data(data)
        .enter().append('line')
        .on("mouseover", function(d){
          var ringId = d.recLow/10;
          showRing(ringId);
        })
        .on("mouseout", function(d){
          unShowRing();
        })
        .style('opacity', function(d){
          if (!curRing){
            return 1;
          } else {
            var ringId = d.recLow/10;
            return ringId === curRing ? 1 : 0;
          }
        })
        .attr('class', function(d) {
          return cl + " ring" + d.recLow/10;
        })
        .transition()
        .delay(function(d, i) {
          return i * 50;
        }) // remove transition.delay if want to turn off animation
        .attr('x1', function(d) {
          return xScale(d.index, d[low])
        })
        .attr('y1', function(d) {
          return yScale(d.index, d[low])
        })
        .attr('x2', function(d) {
          return xScale(d.index, d[low] - 10)
        }) //plot only within own band
        .attr('y2', function(d) {
          return yScale(d.index, d[low] - 10)
        }) //plot only within own band
        //     .attr('x2', function(d) { return xScale(d.index, d[high])})  //plot to recipient
        //     .attr('y2', function(d) { return yScale(d.index, d[high])})  //plot to recipient
        //    .attr("stroke",  function(d) { return mycolor(d.recHigh); }) //by receivers
        .attr("stroke", function(d) {
          return mycolor(d.recLow);
        }) //by givers
        
    };
​
​
      
      
    d3.json('ny6.txt', function(err, json){
​
        angleScale.domain([0, json.values.length - 1]);
​
        var min = d3.min(json.values, d => parseInt(d.recLow)),
        max = d3.max(json.values, d => parseInt(d.recHigh));
​
​
     
      
// this is called months, but they are just indexes of where to draw lines out from center      
var months1 = [{"index":0,"month":"Day1"},{"index":48,"month":"Day2"},{"index":96,"month":"Day3"},{"index":145,"month":"Day4"},{"index":201,"month":"Day5"},{"index":255,"month":"Day6"},{"index":296,"month":"Day7"},{"index":335,"month":"Day8"},{"index":378,"month":"Day9"},{"index":425,"month":"Day10"},{"index":499,"month":"Day11"},{"index":555,"month":"Day12"},{"index":601,"month":"Day13"},{"index":677,"month":"Day14"},{"index":765,"month":"Day15"},{"index":801,"month":"Day16"},{"index":865,"month":"Day17"},{"index":943,"month":"Day18"},{"index":999,"month":"Day19"}]
​
​
     //axis lines
        var axis = origin.append('g');
​
        axis.selectAll('line.axis')
          .data(months1)
          .enter().append('line')
          .attr('x2', function(d){ return xScale(d.index, 120)})
          .attr('y2', function(d){ return  -yScale(d.index, 120)})
          .attr("opacity", 0.15)
          .attr('class', 'axis');
      
        
 //circle axis
      
var mycircles =    [110,100, 90, 80, 70, 60,50,40,30,20,10,0]
​
​
​
        origin.selectAll('circle.axis')
            .data(mycircles)       //original circles
            .enter()
            .append('circle')
            .attr('r', function(d) { return rScale(d)})
            .style("fill", "#fff8ee")
 //           .style("opacity", 0)
            .style("opacity", .05) //could add circle lines?
            .attr('class', 'axis')
             .on("mouseover", function(d) {
          d3.select(this)
           .style("fill", "#ef9393");
          var ringId = d/10;
          showRing(ringId);
        })
        .on("mouseout", function(d) {
          d3.select(this)
            .style("fill", "#fff8ee");
          unShowRing();
        });
  
​
      
      
//draw lines
        drawRadial(origin, 'record', json.values, 'recLow', 'recHigh')
​
​
// fill middle
       origin
         .append("circle")
         .attr("r",19) //seems sufficient to form circle in middle   
         .style("fill", "black")
          .style("opacity", .9)
        
//temperature axis
        origin.selectAll('circle.axis')
            .data(circleAxis)
            .enter().append('circle')
            .attr('r', function(d){ return rScale(d.temp)})
            .attr('class', 'axis');
      
    });
​
​
    </script>
</body>
</html>
    