{{value}} °C

Global Surface Temperature

Change in global surface temperature relative to 1951-1980 average temperatures.

  • Monthly Mean
  • Annual Mean
  • Five Year Mean

Source: NASA’s Goddard Institute for Space Studies (GISS)

Edit with CodePen

html

<link id="global-temp-annual"
      rel="variance-data"
      href="//variancecharts.com/data/global_temp_annual_mean.csv">
<link id="global-temp-fiveyear"
      rel="variance-data"
      href="//variancecharts.com/data/global_temp_fiveyear_mean.csv">
<link id="global-temp-monthly"
      rel="variance-data"
      href="//variancecharts.com/data/global_temp_monthly_recordings.csv">

<div id="global_temp">

  <chart class="global-temp"
         data="#global-temp-annual"
         map-xy="year annual_mean"
         scale-x-linear="1878 2020"
         scale-y-linear="-0.8 1.0">
    <guide-x ticks="1880 1900 1920 1940 1960 1980 2000 2010"></guide-x>
    <guide-y class="right" ticks="-0.8 -0.6 -0.4 -0.2 0 0.2 0.4 0.6 0.8">
      <span class='label'> {{value}} &deg;C</span>
    </guide-y>
    <points class="monthly" data="#global-temp-monthly" map-xy="year jan"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year feb"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year mar"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year apr"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year may"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year jun"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year jul"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year aug"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year sep"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year oct"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year nov"></points>
    <points class="monthly" data="#global-temp-monthly" map-xy="year dec"></points>
    <line class="annual-mean"></line>
    <line class="five-year-mean"
          data="#global-temp-fiveyear"
          map-xy="year five_year_mean"></line>
    <repeat class="annual-means">
      <point class="annual-mean"></point>
    </repeat>
    <div class="title">
      <h4>Global Surface Temperature</h4>
      <p>Change in global surface temperature relative to 1951-1980 average temperatures.</p>
    </div>
  </chart>

  <div class="legend-wrapper">
    <div class="legend">
      <ul>
        <li class="monthly">
          <span class="icon"></span>
          <span class="description">Monthly Mean</span>
        </li>
        <li class="annual">
          <span class="icon"></span>
          <span class="description">Annual Mean</span>
        </li>
        <li class="fiveyear">
          <span class="icon"></span>
          <span class="description">Five Year Mean</span>
        </li>
      </ul>
    </div>
    <div class="source">
      <p>Source: NASA’s Goddard Institute for Space Studies (GISS)</p>
    </div>
  </div>

</div>

css

#global_temp {
  padding: 40px;
  font-family: "Helvetica", "Arial", "sans-serif";
}
#global_temp .global-temp {
  width: 100%;
  height: 400px;
  max-width: 1100px;
}
#global_temp .global-temp guide-x, #global_temp .global-temp guide-y {
  color: #b1b1aa;
}
#global_temp .global-temp guide-y {
  width: 100%;
  right: 0;
  border: none;
  overflow: visible;
  font-size: 14px;
}
#global_temp .global-temp guide-y .tick {
  width: 100%;
  border-bottom: 1px dotted #dddddd;
}
#global_temp .global-temp guide-y .tick .label {
  right: 6px;
  left: auto;
  width: auto;
  background-color: #f8f8f2;
  padding: 0 4px;
}
#global_temp .global-temp guide-x {
  border-top: 1px solid #dddddd;
  overflow: visible;
  font-size: 16px;
}
#global_temp .global-temp guide-x .tick {
  border-left: 1px solid #dddddd;
}
#global_temp .global-temp point {
  background-color: #585a8b;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-left: -2.5px;
  margin-bottom: -2.5px;
}
#global_temp .global-temp point:last-child {
  color: red;
}
#global_temp .global-temp repeat.annual-means {
  -moz-animation-name: intro;
  -webkit-animation-name: intro;
  animation-name: intro;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  opacity: 0;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
#global_temp .global-temp repeat.annual-means datum:last-child point {
  background-color: #585a8b;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: -3px;
  margin-bottom: -3px;
}
#global_temp .global-temp repeat.northern point {
  background-color: #dddddd;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-left: -2.5px;
  margin-bottom: -2.5px;
}
#global_temp .global-temp line.northern svg path {
  stroke: #dddddd;
}
#global_temp .global-temp line.annual-mean svg path {
  stroke: #585a8b;
  stroke-width: 1px;
  stroke-dasharray: 2800px;
  stroke-dashoffset: 2800px;
  -moz-animation-name: drawstroke;
  -webkit-animation-name: drawstroke;
  animation-name: drawstroke;
  -moz-animation-duration: 4s;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#global_temp .global-temp line.five-year-mean svg path {
  stroke: #f64b49;
  stroke-width: 2px;
  stroke-dasharray: 1400px;
  stroke-dashoffset: 1400px;
  -moz-animation-name: drawstroke;
  -webkit-animation-name: drawstroke;
  animation-name: drawstroke;
  -moz-animation-duration: 4s;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#global_temp .global-temp point.monthly {
  background-color: rgba(0, 0, 0, 0.08);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: -3px;
  margin-bottom: -3px;
}
#global_temp .global-temp .five-year-mean point {
  background-color: red;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-left: -2px;
  margin-bottom: -2px;
}
#global_temp .title {
  width: 320px;
  padding: 0 8px;
  position: absolute;
  left: 20px;
  top: 60px;
}
#global_temp .title h4 {
  margin: 0 0 2px 0;
  padding: 0;
  background: #f8f8f2;
  color: #4b4b4b;
}
#global_temp .title p {
  margin: 0;
  padding: 0;
  background: #f8f8f2;
  display: inline;
  color: #8d8d87;
  line-height: 1.2;
  font-size: 15px;
}
#global_temp .legend-wrapper {
  margin-top: 60px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
#global_temp .legend {
  -webkit-flex: 1;
  flex: 1;
}
#global_temp .legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
}
#global_temp .legend li {
  color: #b1b1aa;
  font-size: 14px;
  margin-right: 18px;
}
#global_temp .legend li.monthly, #global_temp .legend li.annual, #global_temp .legend li.fiveyear {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
#global_temp .legend li.monthly .description, #global_temp .legend li.annual .description, #global_temp .legend li.fiveyear .description {
  margin-left: 6px;
}
#global_temp .legend li.monthly .icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  display: inline-block;
}
#global_temp .legend li.annual .icon {
  width: 14px;
  height: 1px;
  background-color: #585a8b;
  position: relative;
}
#global_temp .legend li.annual .icon:after {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #585a8b;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 4px;
  top: -3px;
}
#global_temp .legend li.fiveyear .icon {
  width: 14px;
  height: 2px;
  background-color: #f64b49;
}
#global_temp .source {
  -webkit-flex: 1;
  flex: 1;
  text-align: right;
}
#global_temp .source p {
  color: #b1b1aa;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

/* Keyframe animations */
@-moz-keyframes intro {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes intro {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes intro {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-moz-keyframes drawstroke {
  100% {
    stroke-dashoffset: 0px;
  }
}
@-webkit-keyframes drawstroke {
  100% {
    stroke-dashoffset: 0px;
  }
}
@keyframes drawstroke {
  100% {
    stroke-dashoffset: 0px;
  }
}