Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg {border: 1px dashed black}
</style>
</head>
<body>
<script>
// base dimensions
const margin = {top: 20, right: 20, bottom: 20, left: 30}
const width = 700 - margin.left - margin.right
const height = 450 - margin.top - margin.bottom
// svg canvas
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate("+margin.left+ "," +margin.top+")")
// read the data
d3.json("data.json", function(error, data) {
if (error) return console.warn(error);
// nest data by genre
var dataGenres = d3.nest().key(d => d["top genre"])
.entries(data)
console.log(dataGenres)
// labels for rows and columns
var nums =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
// var nums = [1,2,3,4,5,6]
//var yrows = ['art1','art2','art3','art4','art5','art6']
var yrows = d3.max(data, d=> d["artist"])
console.log(yrows)
// x scales and axis
var x = d3.scaleBand().range([0,width])
.domain(nums)
.padding(0.01)
svg.append("g")
.attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x))
// y scale and axis
var y = d3.scaleBand().range([height, 0])
.domain(yrows)
.padding(0.01)
svg.append("g")
.call(d3.axisLeft(y))
// add rects
// svg.selectAll()
// .data(data)
// .enter().append('rect')
// .attr('x', (d, i) => i)
// .attr('y', (d, i) => i)
// .attr('width', 10)
// .attr('height', 10)
});
</script>
</body>
https://d3js.org/d3.v4.min.js