heatmap

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'>
	</head>
	<body>
		<div class='app container'>
			<div class='module' id='plot'>
			</div>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js" charset="utf-8"></script>
		<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
		<script>
		d3.csv('raw-heatmap.csv',
		//中间函数
		function(d){
			d => d.sort((a, b) => +a.original_ranking - +b.original_ranking);
			return d;
		},function(error,raw){
			if (error) throw error;
			// debugger;
			const height = 700,marginLeft = 125,marginTop = 130,width = 800;

const years = raw.map(d => d.year);
			console.log(years);
			const keys = Object.keys(raw[0]).slice(2);
			console.log(keys);

svg.selectAll(`rect.ind-${i}`)
				.data(raw)
				.enter().append('rect')
					.classed(`ind-${i}`, true)
					.attr('x', d => x(key))
					.attr('y', d => y(d.year))
					.attr('width', x.bandwidth())
					.attr('height', y.bandwidth())
					.attr('fill', d => color(+d[key]))
				});
			
		})
		</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js