Annual Temp - New York 2015

Weather Plot - New York 2015

In the example we're looking at historical weather data for New York provided by intellicast.com and wunderground.com. Inspired by weather-radicals.com.

This example uses scales to roll your own radial projection by mapping out the x, y, and r positions. If you are creating a line or an area you can use d3's convenience functions d3.svg.line.radial and d3.svg.area.radial but this is a method you can use if you want to use different graphical elements in a circular layout.

<!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'>

svg {
        background-color: white;
        font-family: 'Lato';
     }

.axis {
        stroke: white;
        opacity: .8;
     }

text.title {
        font-size: 26px;
     }

text.months, text.temp {
      text-anchor: middle;
      font-size: 12px;
      fill: #39837B;
     }

circle.axis {
        stroke: white;
        stroke-width: 1px;
        fill: none;
     }

circle.axis.record {
        stroke: #bae0d6;
        stroke-width: 1.2px;
        opacity: 1;
     }

line.record, line.avg, line.yearLow, line.yearHigh{
      stroke-width: 2px;
     }

line.record {
        stroke: #bae0d6;
     }

line.avg {
        stroke: #3FA39E;
        opacity: .5;
     }

line.year {
       stroke: #006358;

}

line.yearLow, line.yearHigh{
        stroke: #F97F5A;
     }

.avg {
        stroke: #3FA39E;
        fill: #3FA39E;
     }

.record {
        stroke: #bae0d6;
        fill: #bae0d6;
        .opacity: .5;
     }

.year {
        stroke: #F97F5A;
        fill: #F97F5A;
     }
     .beyond {
        stroke: #445E5B;
        fill: #445E5B;
     }

</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 src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.3.0/d3-legend.min.js"></script>

var drawRadial = function(chart, cl, data, low, high){
      chart.selectAll('line.' + cl)
        .data(data)
        .enter().append('line')
        .attr('x1', function(d) { return xScale(d.index, d[low])})
        .attr('x2', function(d) { return xScale(d.index, d[high])})
        .attr('y1', function(d) { return yScale(d.index, d[low])})
        .attr('y2', function(d) { return yScale(d.index, d[high])})
        .attr('class', cl);
    };

d3.json('ny.json', 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));

//circle axis
        origin.selectAll('circle.axis-green')
            .data([40, 60, 80, 100])
            .enter().append('circle')
            .attr('r', function(d) { return rScale(d)})
            .attr('class', 'axis record')

//record low and high
        drawRadial(origin, 'record', json.values, 'recLow', 'recHigh')

//avg low and high
        drawRadial(origin, 'avg', json.values, 'avgLow', 'avgHigh')

//this year's temperature
        var thisYear = json.values.filter(function(d){ return d.min });

drawRadial(origin, 'year', thisYear, 'min', 'max')

var lowLower = json.values.filter(function(d){ return d.min && parseInt(d.min) < parseInt(d.avgLow)});
        drawRadial(origin, 'yearLow', lowLower, 'min', 'avgLow')

var highHigher = json.values.filter(function(d){ return d.min && parseInt(d.max) > parseInt(d.avgHigh)});
        drawRadial(origin, 'yearHigh', highHigher, 'max', 'avgHigh')

var circleAxis = [0, 32, 60, 80, 100]
        circleAxis = circleAxis.map( function(d){ return {temp: d, index: 320}})

//temperature axis
        origin.selectAll('circle.axis-white')
            .data(circleAxis)
            .enter().append('circle')
            .attr('r', function(d){ return rScale(d.temp)})
            .attr('class', 'axis')

//temperature axis labels
        origin.selectAll('text.temp')
            .data(circleAxis)
            .enter().append('text')
            .attr('x', function(d){ return xScale(d.index, d.temp)})
            .attr('y', function(d){ return yScale(d.index, d.temp)})
            .text(function(d){ return d.temp + '°'})
            .attr('class', 'temp');

//axis lines
        var axis = origin.append('g');

axis.selectAll('line.axis')
          .data(months)
          .enter().append('line')
          .attr('x2', function(d){ return xScale(d.index, 120)})
          .attr('y2', function(d){ return  -yScale(d.index, 120)})
          .attr('class', 'axis');

var monthLabels = months.filter( (d,i) => i%3 === 0)
        //month labels
        axis.selectAll('text.months')
          .data(monthLabels)
          .enter().append('text')
          .attr('x', function(d){ return xScale(d.index, 110)})
          .attr('y', function(d){ return yScale(d.index, 110)})
          .text(function(d){ return d.month})
          .attr('class', 'months');

//center for reference
        axis.append('circle')
            .attr('r', 3)
            .attr('class', 'avg')

//title
        svg.append('text')
            .attr('x', 30)
            .attr('y', 60)
            .text(json.name)
            .attr('class', 'title')

//subtitle
        svg.append('text')
            .attr('x', 30)
            .attr('y', 100)
            .text('Historical Weather Data')

//create legend
        var legendScale = d3.scale.ordinal()
            .domain(['Record', 'Average', 'This Year - within avg', 'This Year - beyond avg', ])
            .range(['record', 'avg', 'beyond', 'year'])

//d3-legend
        var legend = d3.legend.color()
            .shapePadding(5)
            .useClass(true)
            .scale(legendScale);

svg.append('g')
            .attr('transform', 'translate(30,120)')
            .call(legend);

});

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.3.0/d3-legend.min.js