chart2 = function(types) {
const n = types.length;
const width = 960;
const Allsites = [
...new Set(heatData.filter(d => types.includes(d.species)).map(d => d.site))
];
console.log('species', Allsites);
const height = Allsites.length * 20 < 100 ? 100 : Allsites.length * 20;
const to_chart_sites = [
...new Set(heatData.filter(d => d.species === types[0]).map(d => d.site))
];
const margin1 = { top: 20, right: 40, bottom: 40, left: 140 };
const chart_width = width - margin1.left - margin1.right;
let margin_others;
// .translateExtent([[0, 0], [chart_width, chart_bounds]])
// .extent([[0, 0], [chart_width, chart_bounds]]);
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const today = new Date();
const startExt = new Date();
const endExt = new Date();
startExt.setDate(today.getDate() - 1);
endExt.setDate(today.getDate() + 1);
// HERE I CREATE A CHART (FOCUS) FOR EACH VARIABLE.
let myVariables = {};
let myLines = {};
let myYs = {};
let myXs = {};
let y;
// let focus0;
const x = d3
.scaleTime()
.range([0, chart_width])
.domain([
d3.min(heatData, d => d.date),
d3.timeMonth.ceil(+d3.max(heatData, d => d.date) + 1)
]);
const xAxis = d3.axisBottom(x);
const top_margins = [];
types.forEach((vari, i) => {
// console.log('here', i);
let yside = "y" + i;
const sites = [
...new Set(heatData.filter(d => d.species === vari).map(d => d.site))
];
// console.log(species, Allspecies);
// mutable debug = species;
let h_each_plot = (height * sites.length) / Allsites.length;
top_margins.push(h_each_plot);
let chart_bounds =
(height * sites.length) / Allsites.length - margin1.top - margin1.bottom;
y = d3
.scaleBand()
.domain(sites)
.range([chart_bounds, 0])
.padding(.2);
const yAxis = g =>
g.call(d3.axisLeft(y)).call(g => g.select(".domain").remove());
const mar_top =
i === 0
? 0
: i === 1
? top_margins[0]
: d3.sum(top_margins.slice(0, [i]));
margin_others = {
top: mar_top,
right: 20,
left: 140
}; //adjust top
let variableName = "focus" + i;
myVariables[variableName] = svg
.append("g")
.attr("class", "focus" + i)
.attr(
"transform",
`translate(${margin_others.left},${margin_others.top})`
);
// console.log(vari, variableName);
console.log('blac', heatData.filter(d => d.species === vari));
myVariables[variableName]
.selectAll('rect')
.data(heatData.filter(d => d.species === vari))
.enter()
.append('rect')
.attr("class", "line" + i)
.attr('x', d => x(d.date))
.attr('y', d => {
// console.log('i', d);
return y(d.site);
})
.attr('width', d => x(d3.timeMonth.ceil(+d.date + 1)) - x(d.date) - 4)
.attr('height', y.bandwidth())
.attr('fill', d => {
return d.count > 0 ? "#ec4977" : "#ddd";
})
// .attr("fill", "none")
.attr("clip-path", "url(#clip)");
// .style("stroke", "steelblue")
// .style("stroke-width", "1.5px");
myVariables[variableName]
.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + chart_bounds + ")")
.call(xAxis);
myVariables[variableName]
.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
});
return svg.node();
}