Visualize Data with a Heat Map

Help
#1

Thanks for Dr. Curran so I can fork the code up and learn, there are some details I can not do it exactly with the code: https://heat-map.freecodecamp.rocks/, like the way shows of years and the tooltip.

The vega and vega-lite are powerfull tools to code Visualize Data, but the connection of

.x()
.fieldN('year')
.type('ordinal')
.title('years')
.sort('y'),

and

“x”: {
“timeUnit”: “yearmonth”, “field”: “date”,
“axis”: {“domain”: false, “format”: “%Y”, “tickSize”: 0}
},

is way too much unclear to me, could somebody teach me how to learn this? thanks very much!

#2

why the x-axis was worked in vizhub, but not worked in VScode and CodePen?

#3

It would probably be better to implement the heat map using just D3, rather than trying to use Vega-Lite-API. The source of that link you shared is visible here:

https://heat-map.freecodecamp.rocks/script.js

If you share the error messages you get when you run the code in VSCode and CodePen, it would be possible to help debug. In general, the VizHub export .zip contains everything you need to develop locally. You just need to run npm install; npm run build to generate bundle.js locally.

Good luck!