chart = {
const container = d3.select(DOM.svg()).attr("viewBox", [0, 0, width, height])
const group = container
.append('g')
const group1 = container
.append('g')
const svg = group.selectAll('.row')
//const svg = d3.select(DOM.svg()).attr("viewBox", [0, 0, width-20, height-20]);
// svg.selectAll('.row')
.data(data)
.enter()
.append('g')
.attr('transform', (d, i) => `translate(0, ${i * cellWidth})`)
.selectAll('.cell')
.data((d, i) => data[i])
.enter()
.append('image')
.attr('xlink:href', 'https://raw.githubusercontent.com/amanda-kochak/Final-Project/b64de717135a3530f922c7ae940980423b180147/smallBusiness.svg')
.attr("width", cellWidth - 20)
.attr('height', cellWidth - 20)
.attr('x', (d, i) => i * cellWidth)
.attr("opacity", 1)
container.on('mouseover', function(d) {
svg
.attr('opacity', 1)
.transition()
.ease(d3.easeLinear)
.duration(1000)
.attr("opacity", 0.15)
const svg2 = group.selectAll('.row')
//svg.append('image')
.data(data2)
.enter()
.append('g')
//.attr('transform', (d, i) => `translate(0, ${i * cellWidth})`)
.attr('transform', (d, i) => `translate(${i * cellWidth},0)`)
.selectAll('.cell')
.data((d, i) => data2[i])
.enter()
.append('image')
.attr('xlink:href', 'https://raw.githubusercontent.com/amanda-kochak/Final-Project/b64de717135a3530f922c7ae940980423b180147/smallBusiness.svg')
.attr("width", cellWidth-20)
.attr('height', cellWidth -20)
});
return container.node()
}
nrows1 = 1
ncols1 = 20
data = {
let data = Array(nrows).fill(0).map(() => Array(ncols).fill(0));
data.forEach(
(row, i) => row.forEach(
(cell, j) => data[i][j] = Math.cos(i * .2 - 6) + Math.sin(j * .1 + 3)
)
)
return data
}
data2 = {
let data2 = Array(ncols1).fill(0).map(() => Array(nrows1).fill(0));
data2.forEach(
(row, i) => row.forEach(
(cell, j) => data2[i][j] = Math.cos(i * .2 - 6) + Math.sin(j * .1 + 3)
)
)
return data2
}
cellWidth = width / ncols;
height = nrows * cellWidth
d3 = require('d3')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
