weather.Rmd

# Weather forecast

<script src="https://d3js.org/d3.v7.js"></script>
<style>
  * {
    font-family: sans-serif;
    }
  text {
    font-size: 12px;
    }
</style>

<h3>Weather forecast for Columbia University</h3>
<p>Lat, Lon: 40.807793, -73.962144</p>
<p>(Hover over points for more details.)</p>
<input type="radio" name="tempscale" value="F" checked="true">Fahrenheit
<input type="radio" name="tempscale" value="C">Celsius
<div id="plot"></div>

<script type="text/javascript">

// Width and height
const w = 700;
const h = 300;
const margin = {top: 25, right: 100, bottom: 50, left: 100};
const innerHeight = h - margin.top - margin.bottom;
const innerWidth = w - margin.left - margin.right;

// create "placeholder" image
const icon = d3.select("div#plot")
.append("div")
.append("img")
.attr("src", "https://github.com/jtr13/d3book/blob/main/images/blank86x86.png?raw=true")
.style("padding-left", w/2 - 43 + "px");    
  
// create SVG element
const svg = d3.select("div#plot")
  .append("svg")
    .attr("width", w)
    .attr("height", h)
  
// create background rectangle
svg.append("rect")
.attr("width", w)
.attr("height", h)
.attr("fill", "#e7f5fe");

// create caption
d3.select("div#plot")  
.append("div")
  .style("padding", "10px")
.append("a")
.attr("href", "https://www.weather.gov/documentation/services-web-api")
.text("Data source: https://www.weather.gov/documentation/services-web-api");

// create plot group  
svg.append("g")
  .attr("id", "plot")
  .attr("transform", `translate (${margin.left}, ${margin.top})`);

d3.json("https://api.weather.gov/gridpoints/OKX/33,38/forecast").then(function(data) {

// filter for isDaytime equals "true"
const dataset = data.properties.periods.filter(d => d.isDaytime);

const tempscale = "F";
// create new property with celsius temperature
dataset.forEach(d => d.celsius = (d.temperature - 32) * 5/9);

xScale = d3.scaleLinear()
.domain([d3.min(dataset.map(d => d.temperature - 9)),
         d3.max(dataset.map(d => d.temperature + 9))])
.range([0, innerWidth]);

yScale = d3.scaleBand()
.domain(dataset.map(d => d.name))
.range([0, innerHeight]);

xAxis = d3.axisBottom()
.scale(xScale);
  
yAxis = d3.axisLeft()
.scale(yScale);

// Generate guide lines
svg.select("g#plot")
  .selectAll("line")
  .data(dataset)
  .enter()
  .append("line")
    .attr("x1", 0)
    .attr("x2", innerWidth)
    .attr("y1", d => yScale(d.name) + .5*yScale.bandwidth())
    .attr("y2", d => yScale(d.name) + .5*yScale.bandwidth())
    .attr("stroke", "#ddd")
    .attr("stroke-width", 1);

// Create circles
svg.select("g#plot")
  .selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle")
    .attr("cx", d => xScale(d.temperature))
    .attr("cy", d => yScale(d.name) + .5 * yScale.bandwidth())
    .attr("r", 3)
    .on("mouseover", function(event, d) {
        const xcoord = +d3.select(event.currentTarget).attr("cx") + 5
        const ycoord = +d3.select(event.currentTarget).attr("cy") - 5
        svg.select("g#plot")
          .append("text")
          .attr("id", "tooltip")
          .attr("x", xcoord)
          .attr("y", ycoord)
          .text(d.shortForecast);
        icon
          .attr("src", d.icon);
     })
     .on("mouseout", function() {
         d3.select("#tooltip")
           .remove();
         icon
           .attr("src", "https://github.com/jtr13/d3book/blob/main/images/blank86x86.png?raw=true");
     }
     );

// create x-axis
svg.select("g#plot")
  .append("g")
  .attr("id", "xaxis")
  .attr("transform", `translate (0, ${innerHeight})`)
  .call(xAxis);
  
// create x-axis label
svg.select("g#plot")
  .append("text") 
    .attr("id", "xlab")
    .attr("x", innerWidth/2)
    .attr("y", innerHeight + .75 * margin.bottom)
    .attr("text-anchor", "middle")
    .text("temperature (Fahrenheit)");

// create y-axis      
svg.select("g#plot")
  .append("g")
  .call(yAxis)    
        
// get value of radio button on click
d3.selectAll("input")
.on("click", function(event) { 
    const tempscale = event.currentTarget.value; 
    if (tempscale == "C") {
    // update xScale domain
        xScale.domain([d3.min(dataset.map(d => d.celsius - 5)),
                       d3.max(dataset.map(d => d.celsius + 5))]);  
    // update x-axis label
        svg.select("#xlab")
          .text("temperature (Celsius)")
    // update cx value of circles
        svg.selectAll("circle")
          .attr("cx", d => xScale(d.celsius))
    } else {
    // update xScale domain
        xScale.domain([d3.min(dataset.map(d => d.temperature - 9)),
                       d3.max(dataset.map(d => d.temperature + 9))]);  
    // update x-axis label
        svg.select("#xlab")
          .text("temperature (Fahrenheit)")      
    // update cx value of circles
        svg.selectAll("circle")
          .attr("cx", d => xScale(d.temperature))
    };
  // update x-axis
  svg.select("#xaxis")
    .call(xAxis); 

  }) // end .on
}) // end d3.json

.catch(function(error){
  d3.select("svg")
    .append("text")
    .style("font-size", "24px")
    .attr("x", "100")
    .attr("y", "100")
    .text("Error loading data");
});

</script>