From e18a30816bc84b11fb8afe35fa9275997216b788 Mon Sep 17 00:00:00 2001 From: CherryKitten Date: Mon, 31 Oct 2022 15:31:56 +0100 Subject: [PATCH] Add Heat Map Certification project --- 4-data-visualization/3-heat-map/index.css | 24 ++++ 4-data-visualization/3-heat-map/index.css.map | 1 + 4-data-visualization/3-heat-map/index.html | 18 +++ 4-data-visualization/3-heat-map/index.js | 104 ++++++++++++++++++ 4-data-visualization/3-heat-map/index.scss | 22 ++++ 5 files changed, 169 insertions(+) create mode 100644 4-data-visualization/3-heat-map/index.css create mode 100644 4-data-visualization/3-heat-map/index.css.map create mode 100644 4-data-visualization/3-heat-map/index.html create mode 100644 4-data-visualization/3-heat-map/index.js create mode 100644 4-data-visualization/3-heat-map/index.scss diff --git a/4-data-visualization/3-heat-map/index.css b/4-data-visualization/3-heat-map/index.css new file mode 100644 index 0000000..ffba961 --- /dev/null +++ b/4-data-visualization/3-heat-map/index.css @@ -0,0 +1,24 @@ +html { + text-align: center; + margin: 0; + height: 100vh; + width: 100vw; + background-color: navajowhite; +} + +#tooltip { + display: none; + height: 100px; + width: 100px; + opacity: 0.8; + border-radius: 5px; + padding: 10px; + position: fixed; + z-index: 10; +} + +#chart { + text-align: center; +} + +/*# sourceMappingURL=index.css.map */ diff --git a/4-data-visualization/3-heat-map/index.css.map b/4-data-visualization/3-heat-map/index.css.map new file mode 100644 index 0000000..9c17504 --- /dev/null +++ b/4-data-visualization/3-heat-map/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE","file":"index.css"} \ No newline at end of file diff --git a/4-data-visualization/3-heat-map/index.html b/4-data-visualization/3-heat-map/index.html new file mode 100644 index 0000000..24830c5 --- /dev/null +++ b/4-data-visualization/3-heat-map/index.html @@ -0,0 +1,18 @@ + + + + + FreeCodeCamp Heat Map + + + + +

Monthly Global Land-Surface Temperature

+

1753 - 2015: base temperature 8.66℃

+
+
+
+ + + + \ No newline at end of file diff --git a/4-data-visualization/3-heat-map/index.js b/4-data-visualization/3-heat-map/index.js new file mode 100644 index 0000000..e66b7bb --- /dev/null +++ b/4-data-visualization/3-heat-map/index.js @@ -0,0 +1,104 @@ +const w = 900 +const h = 600 +const cellColor1 = '#ee0000'; +const cellColor2 = '#e7900d'; +const cellColor3 = '#6f9898'; +const cellcolor4 = '#02cefd'; +const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] + +d3.select('#chart') + .append('svg') + .attr('height', h) + .attr('width', w) + +d3.json('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json') + .then(data => { + const xScale = d3.scaleLinear() + .domain([1753, 2015]) + .range([40, w]) + + + const yScale = d3.scaleBand() + .domain(months) + .range([0, h]) + .padding(0); + + const xAxis = d3.axisBottom().scale(xScale) + .tickFormat(d3.format('d')) + + + const yAxis = d3.axisLeft().scale(yScale) + + + d3.select('#chart svg') + .append('g') + .call(xAxis) + .attr('id', 'x-axis') + .attr('transform', 'translate(40, 575)') + + d3.select('#chart svg') + .append('g') + .call(yAxis) + .attr('id', 'y-axis') + .attr('transform', 'translate(80, -17.5)') + + d3.select('#chart svg') + .selectAll('rect') + .data(data["monthlyVariance"]) + .enter() + .append('rect') + .attr('class', 'cell') + .attr('data-year', (d) => d["year"]) + .attr('data-month', (d) => d["month"] - 1) + .attr('data-temp', (d) => d["variance"]) + .attr('fill', (d) => { + const val = d["variance"]; + return val >= 0.5 ? cellColor1 + : val <= 0.5 && val > 0 ? cellColor2 + : val < 0 && val > -0.5 ? cellColor3 + : cellcolor4; + }) + .attr('x', (d) => xScale(d["year"]) + 40) + .attr('y', (d) => yScale(months[d["month"] - 1])) + .attr('height', 50) + .attr('width', 2) + .on('mouseover', (e) => { + console.log(e) + + d3.select('#tooltip') + .style('display', 'initial') + .style('left', e.pageX + 'px') + .style('top', e.pageY + 'px') + .attr('data-year', e.target.attributes['data-year'].nodeValue) + .attr('data-month', e.target.attributes['data-month'].nodeValue) + .attr('data-temp', e.target.attributes['data-temp'].nodeValue) + .style('background-color', e.target.attributes['fill'].nodeValue) + .html( + "

" + months[e.target.attributes['data-month'].nodeValue] + " " + e.target.attributes['data-year'].nodeValue + "

" + + "Temperature Variance: " + e.target.attributes['data-temp'].nodeValue + ) + + + }) + .on('mouseout', () => { + d3.select('#tooltip') + .style('display', 'none') + + }) + + } + ) + +d3.select('#legend') + .append('svg') + .attr('height', 100) + .attr('width', 400) + .selectAll('rect') + .data([cellColor1, cellColor2, cellColor3, cellcolor4]) + .enter() + .append('rect') + .attr('fill', d => d) + .attr('x', (d, i) => i * 100) + .attr('y', 5) + .attr('height', 100) + .attr('width', 100) \ No newline at end of file diff --git a/4-data-visualization/3-heat-map/index.scss b/4-data-visualization/3-heat-map/index.scss new file mode 100644 index 0000000..fbb8bf5 --- /dev/null +++ b/4-data-visualization/3-heat-map/index.scss @@ -0,0 +1,22 @@ +html { + text-align: center; + margin: 0; + height: 100vh; + width: 100vw; + background-color: navajowhite; +} + +#tooltip{ + display: none; + height: 100px; + width: 100px; + opacity: 0.8; + border-radius: 5px; + padding: 10px; + position: fixed; + z-index: 10; +} + +#chart { + text-align: center; +} \ No newline at end of file