I have a multiline chart built with d3 that allows the user to select/deselect lines using checkboxes in the legend. I want to make two of the lines deselected by default, with the user having the ability to check them and add them in if desired.
Getting the functionality of this chart working was originally addressed in another stack overflow question.
I’m able to de-select the checkboxes. I thought that by adding the the two line groups I want deselected by default to the clickedItems array, that would remove them from the chart when it was first drawn, but that is not the case. Any idea how I can initially repress the “<18” and “56+” groups from the chart?
let timeW = 960,
timeH = 450
let timeMargin = {
top: 20,
right: 300,
bottom: 80,
left: 60
},
timeWidth = timeW - timeMargin.left - timeMargin.right,
timeHeight = timeH - timeMargin.top - timeMargin.bottom;
var x2 = d3.scaleTime().range([0, timeWidth]),
y2 = d3.scaleLinear().range([timeHeight, 0]);
var xAxis = d3.axisBottom(x2),
yAxis = d3.axisLeft(y2);
var line = d3.line()
.x(function(d) {
return x2(d.date);
})
.y(function(d) {
return y2(d.value);
});
const seriesColors = ['#ff3300', 'royalblue', 'green', 'turquoise', 'navy']
var color = d3.scaleOrdinal()
.range(seriesColors);
const parseDate = d3.timeParse("%Y%m%d");
d3.csv("https://raw.githubusercontent.com/sprucegoose1/sample-data/main/age.csv").then(function(data) {
console.log('data', data)
var long_data = [];
data.forEach(function(row) {
row.date = parseDate(row.Date)
let tableKeys = data.columns.slice(1);
Object.keys(row).forEach(function(colname) {
if (colname !== "date" && colname !== "Date") {
long_data.push({
"date": row["date"],
"value": +row[colname],
"bucket": colname
});
}
});
});
data.sort((a, b) => a.date - b.date)
let dataNest = d3.group(long_data, d => d.bucket)
let tableKeys = data.columns.slice(1);
drawChart(long_data, dataNest, tableKeys)
})
function drawChart(data, dataNest, tableKeys) {
d3.select("#timeseries").remove()
let timeseries = d3.select("#chart").append('svg')
.attr('id', 'timeseries')
.attr("width", timeWidth + timeMargin.left + timeMargin.right)
.attr("height", timeHeight + timeMargin.top + timeMargin.bottom)
var graph = timeseries.append('g').attr('transform', 'translate(' + timeMargin.left + ',' + timeMargin.top + ')');
var focus = timeseries.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + timeMargin.left + "," + timeMargin.top + ")");
x2.domain(d3.extent(data, function(d) {
return d.date;
}));
y2.domain([0, d3.max(data, function(d) {
return d.value;
})]);
focus
.selectAll("path")
.data(dataNest)
.enter().append("path")
.attr('class', d => 'groups a' + d[0].replaceAll("+", "").replaceAll("<", "").replaceAll(" ", "_"))
.attr("d", d => {
d.line = this;
return line(d[1]);
})
.style("stroke", d => color(d[0]))
.style("stroke-width", 1)
.style('fill', 'none')
.attr("clip-path", "url(#clip)")
focus.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + timeHeight + ")")
.call(xAxis);
focus.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
var gXAxis = focus.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + timeHeight + ")")
.call(xAxis);
var gYAxis = focus.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
let clickedItems = ["56+", "<18"]
var legend = timeseries.append('g')
.attr('class', 'legend')
.attr("transform", "translate(" + (timeW - timeMargin.right + 10) + "," + timeMargin.top + ")")
var legendGroups = legend
.selectAll(".legendGroup")
.data(dataNest, d => d[0])
var enterGroups = legendGroups
.enter()
.append("g")
.attr("class", d => "legendGroup " + d[0].replaceAll(" ", "_").replace("<", ""))
.on("click", function(event, d) {
console.log('d', d)
d.clicked = !d.clicked;
// toggle the rectangle's fill
d3.select('rect.a' + d[0].replaceAll(" ", "_").replace("+", "").replace("<", "")).attr("fill", d.clicked ? "transparent" : d => color(d[0]));
// hide/show the associated line
d3.select("path.a" + d[0].replaceAll(" ", "_").replace("+", "").replace("<", "")).style("display", d.clicked ? "none" : "block");
// hide/show the associated table row
d3.select(".row.a" + d[0].replaceAll(" ", "_").replace("+", "").replace("<", "")).style("display", d.clicked ? "none" : "block");
let i = d3.selectAll(".legend-rect").nodes().indexOf(this);
d3.selectAll(".group" + i).style("display", d.clicked ? "none" : "block");
// Logic for all empty:
// keep track of unchecked boxes (also used in rescaling below):
d.clicked ? clickedItems.push(d[0]) : clickedItems.splice(clickedItems.indexOf(d[0]), 1);
// If all are empty:
// if (clickedItems.length == tableKeys.length) {
// d3.selectAll(".legend-rect")
// .attr("fill", d => color(d[0]))
// .each(d => d.clicked = false);
// d3.selectAll(".groups")
// .style("display", "");
// clickedItems = [];
// }
// re-scale
x2.domain(d3.extent(data.filter(d => clickedItems.indexOf(d.bucket) == -1), function(d) {
return d.date;
}));
y2.domain([0, d3.max(data.filter(d => clickedItems.indexOf(d.bucket) == -1), function(dd) {
return dd.value;
})]);
gYAxis.call(yAxis)
gXAxis.call(xAxis)
focus.selectAll("path.groups")
.transition() // May want to use clip area for the line here.
.attr("d", d => {
return line(d[1]);
})
console.log('clicked items', clickedItems)
})
legendGroups
.exit()
.remove();
enterGroups
.append("rect")
.attr("width", 10)
.attr("height", 10)
.attr("fill", d => color(d[0]))
.attr("stroke", d => color(d[0]))
.attr("stroke-width", 2)
.attr('stroke-opacity', 1)
.attr("x", 30)
.attr("y", (d, i) => i * 20)
.attr("class", d => "a" + d[0].replace("+", "").replace("<", "") + ' legend-rect')
enterGroups
.append("text")
.attr('class', 'legend-text')
.text(d => d[0])
.attr("x", 45)
.attr("y", (d, i) => 10 + i * 20)
enterGroups
.append("foreignObject")
.attr("x", 15)
.attr("y", (d, i) => i * 19)
.attr("width", 12)
.attr("height", 14)
.attr("id", (d, i) => 'a' + i)
.append("xhtml:tree")
.html(d => d[0] == "56+" || d[0] == "<18" ? "<input type='checkbox' class='check'>" : "<input type='checkbox' checked class='check'>")
.attr('class', 'checkcontainer')
};#chart {
height: 450px;
width: 760px;
}
.check {
width: 11px;
height: 12px;
filter: grayscale(1);
margin: 0;
margin-top: -1px !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<div id="chart"></div>