https://github.com/zun-liang/fcc-d3-heat-map

Solution to freeCodeCamp Challenge Visualize Data with a Heat Map
https://github.com/zun-liang/fcc-d3-heat-map

css d3js html typescript vite

Last synced: 9 days ago
JSON representation

Solution to freeCodeCamp Challenge Visualize Data with a Heat Map

• Host: GitHub
• URL: https://github.com/zun-liang/fcc-d3-heat-map
• Owner: zun-liang
• Created: 2024-06-14T03:34:27.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-23T00:54:58.000Z (5 months ago)
• Last Synced: 2024-06-23T04:52:49.191Z (5 months ago)
• Topics: css, d3js, html, typescript, vite
• Language: TypeScript
• Homepage: https://zun-liang.github.io/fcc-d3-heat-map/
• Size: 279 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# freeCodeCamp - Visualize Data with a Heat Map

This is a solution to the [Visualize Data with a Heat Map](https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-heat-map) on freeCodeCamp.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Useful resources](#useful-resources)

- [Author](#author)

## Overview

### The challenge

Users should be able to:

- View the optimal layout for the site depending on their device's screen size

- Display the land-surface temperature changes from 1753 to 2015

- Interact with the heat map graph to learn about further information in each heat cell

### Screenshot

  

    

      

    

  

### Links

- Live Site URL: [here](https://zun-liang.github.io/fcc-d3-heat-map)

## My process

### Built with

- HTML

- CSS

- TypeScript

- D3.js

- Vite

- Mobile-first workflow

### What I learned

- Band scales

- Sequential Scales

- Object.prototype.valueOf()

- Use underscore ("_") to indicate intentionally unused

### Helpful Resources

- [Band Scales](https://d3js.org/d3-scale/band)

- [Sequential Scales](https://d3js.org/d3-scale/sequential#sequential-scales)

- [Object.prototype.valueOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf)

## Author

- Website - [Zun Liang](https://zunldev.com/)

- GitHub - [@zun-liang](https://github.com/zun-liang)

- Frontend Mentor - [@zun-liang](https://www.frontendmentor.io/profile/zun-liang)

- freeCodeCamp - [@zun-liang](https://www.freecodecamp.org/zun-liang)