Built with blockbuilder.org
Last active
October 12, 2018 13:19
-
-
Save Hassanbhb/ca36829775e1f9be556abac7ff528c69 to your computer and use it in GitHub Desktop.
Heat chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { | |
| text-align: center; | |
| margin:0; | |
| position:fixed; | |
| top:0;right:0; | |
| bottom:0; | |
| left:0; | |
| } | |
| #tooltip{ | |
| background-color: #001A39; | |
| color: #fff; | |
| padding: 10px; | |
| border-radius: 2px; | |
| text-align: center; | |
| width: 106px; | |
| position: absolute; | |
| top: 450px; | |
| z-index: 1; | |
| } | |
| rect:hover{ | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // Feel free to change or delete any of the code you see in this editor! | |
| d3.json('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json',function(data){ | |
| const base = data.baseTemperature; | |
| const dataset = data.monthlyVariance | |
| createChart(base, dataset); | |
| }) | |
| function createChart(base, dataset){ | |
| const height = 400; | |
| const width = 800; | |
| const padding = 60; | |
| //create svg | |
| const svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .style("padding", padding) | |
| //set the domains | |
| const minYear = d3.min(dataset, d => d.year); | |
| const maxYear = d3.max(dataset, d => d.year); | |
| const monthsExtent = d3.extent(dataset, d => { | |
| return d.month | |
| }); | |
| //set domain on scales | |
| const yearsScale = d3.scaleLinear() | |
| .domain([minYear, maxYear+1]) | |
| .range([0, width]) | |
| const monthScale = d3.scaleLinear() | |
| .domain(monthsExtent) | |
| .range([0, height - height / 12]) | |
| //generate axises | |
| const xAxis = d3.axisBottom(yearsScale) | |
| .ticks(20)//this displays the ticks by 10's (1910, 1920, 1930 ...) | |
| .tickFormat(d3.format("d")); | |
| const months = ["January", "February", "March", "April", "May", "June", "July","August", "September", "October", "November", "December"]; | |
| //change numbers to months | |
| const yAxis = d3.axisLeft(monthScale) | |
| .tickFormat((d, i) => months[i]) | |
| svg.append('g') | |
| .attr('transform', 'translate(0, '+height+')') | |
| .call(xAxis); | |
| svg.append('g') | |
| .attr('transform', 'translate(0, 0)') | |
| .call(yAxis) | |
| // colors | |
| const colorDomain = d3.extent(dataset, (d)=>{ | |
| return d.variance | |
| }) | |
| const colorArr = ["#08519c","#3182bd","#6baed6","#bdd7e7","#eff3ff","#ffffb2","#fed976","#feb24c", | |
| "#fd8d3c","#f03b20","#bd0026"]; | |
| const colorScale = d3.scaleQuantize() | |
| .domain(colorDomain) | |
| .range(colorArr) | |
| //create the tool tip | |
| const tooltip = d3.select('body') | |
| .append('p') | |
| .attr('id', 'tooltip') | |
| .style('opacity', 0) | |
| const chart = d3.select("svg") | |
| .selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append('rect') | |
| .attr('x', (d,i) => yearsScale(d.year) ) | |
| .attr('y', (d) => monthScale(d.month)) | |
| .attr('width', d => 2.5) | |
| .attr('height', height / 12) | |
| .style('fill', (d)=>{ | |
| return colorScale(d.variance) | |
| }) | |
| .on('mouseover', (d, i) => { | |
| tooltip | |
| .style('opacity', 0.9) | |
| .style('left', yearsScale(d.year)+'px') | |
| .style('top', monthScale(d.month)- 40 +'px') | |
| .html(`${d.year}-${months[d.month-1]}<br/> | |
| ${(base+d.variance).toFixed(1)}℃<br/> | |
| ${d.variance.toFixed(1)}℃`) | |
| }) | |
| .on('mouseout', (d, i)=> { | |
| tooltip | |
| .style('opacity', 0) | |
| }) | |
| const legend = d3.select('svg') | |
| .selectAll('.legend') | |
| .data(colorArr) | |
| .enter() | |
| .append('g') | |
| .attr('class', 'legend') | |
| legend.append('rect') | |
| .attr('x', (d, i) => i*20) | |
| .attr('y', height + 20) | |
| .attr("height", 20) | |
| .attr('width', 20) | |
| .style('fill', (d, i) => colorArr[i]) | |
| legend.append('text') | |
| .attr('x', (d, i) => i*20) | |
| .attr('y', height + 60) | |
| .text((d, i) => { | |
| const legendArr = [0, 2.7, 3.9, 5.0, 6.1, 7.2, 8.3, 9.4, 10.5, 11.6, 12.7] | |
| return legendArr[i].toFixed(0) | |
| }) | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment