html`<style>
.bikeLinks {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>`
{
let xScale = d3
.scaleLinear()
.domain([0, simulationSteps - 1])
.range([margin, width - margin]);
let yScale = d3
.scaleLinear()
.domain([1, 0])
.range([margin, height - margin]);
let svg = d3
.create('svg')
.attr("width", width)
.attr('height', height)
.attr('id', 'monitor');
let bg = svg
.append('rect')
.attr("width", width)
.attr('height', height)
.attr('fill', backgroundColor);
// svg
// .selectAll('.trafficDot')
// .data(history.traffic)
// .enter()
// .append('circle')
// .attr('cx', xScale(d => d.generationNumber))
// .attr('cy', yScale(d => d.averageTraffic))
// .attr('r', 6)
// .attr('fill', '#d95d39')
// .attr('opacity', 1)
// .attr('class', 'trafficDot');
// svg
// .selectAll('.noiseDot')
// .data(history.noise)
// .enter()
// .append('circle')
// .attr('cx', xScale(d => d.generationNumber))
// .attr('cy', yScale(d => d.averageNoise))
// .attr('r', 6)
// .attr('fill', '#7b9e89')
// .attr('opacity', 1)
// .attr('class', 'noiseDot');
// Draw the axis
let yAxis = svg
.append("g")
.attr("transform", "translate(" + margin + ",0)")
.call(d3.axisLeft(yScale));
yAxis.selectAll('text').style("fill", "white");
yAxis.selectAll('line').style("stroke", "white");
yAxis.selectAll('path').style("stroke", "white");
// Draw the axis
let xAxis = svg
.append("g")
.attr("transform", "translate(0," + (height - margin) + ")")
.call(d3.axisBottom(xScale));
xAxis.selectAll('text').style("fill", "white");
xAxis.selectAll('line').style("stroke", "white");
xAxis.selectAll('path').style("stroke", "white");
return svg.node();
}
function updateSideEffectMonitor(gen) {
if (gen == 0){
d3.select("#monitor")
.selectAll('circle').remove()
}
let xScale = d3
.scaleLinear()
.domain([0, simulationSteps - 1])
.range([margin, width - margin]);
let yScale = d3
.scaleLinear()
.domain([1, 0])
.range([margin, height - margin]);
history.traffic.forEach(
d => (d.averageTraffic = d3.mean(d.roadTraffic, e => e))
);
history.noise.forEach(d => (d.averageNoise = d3.mean(d.roadNoise, e => e)));
let initialValue = 0;
history.co2.forEach(
d =>
(d.totalCarbonEmission = d.carbonEmission.reduce(
(totalValue, currentValue) => {
return totalValue + currentValue;
},
initialValue
))
);
d3.select("#monitor")
.selectAll('.trafficDot')
.data(history.traffic)
.enter()
.append('circle')
.attr('cx', d => xScale(d.generationNumber))
.attr('cy', d => yScale(d.averageTraffic))
.attr('r',0)
.attr('fill','red')
.attr('class','trafficDot')
.transition()
.duration(genTime)
.attr('r',10)
;
d3.select("#monitor")
.selectAll('.noiseDot')
.data(history.noise)
.transition()
.attr('cx', d => xScale(d.generationNumber))
.attr('cy', d => yScale(d.averageNoise));
}
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.
