Denise Mauldin is a full stack software engineer with experience in bioinformatics, web site development, and APIs. Perl, Python, Ruby, JavaScript mostly.
Published
Edited
Nov 30, 2020
md`# Grouping and Reduce`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
console.log(skiers);
const path = svg.append("g")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(data)
.join("path")
.style("mix-blend-mode", "multiply")
.attr("d", d => line(d.data));
return svg.node();
}
line = d3.line()
.defined(d => !isNaN(d.difference))
.x((d, i) => xScale(d.run))
.y((d, i) => yScale(d.difference))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale)
.tickSize(-width +margin.left + margin.right)
)
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale)
.tickSize(-innerHeight)
)
yScale = d3.scaleLinear()
.domain(d3.extent([+d3.min(tabledata, d => d.difference),+d3.max(tabledata, d => d.difference)]))
.range([0, innerHeight])
.nice()
xScale = d3.scaleLinear()
.domain(d3.extent(x_data_labels))
.range([margin.left, width - margin.right])
.nice()
x_data_labels = Array.from(d3.group(tabledata, d => +d.run).keys())
innerHeight = height - margin.top - margin.bottom;
height=600
margin = ({top: 20, right: 30, bottom: 30, left: 30})
data = skiers.reduce((accumulator, currentValue) => {
let data = currentValue[1].reduce((inner, dp) => {
inner.push({
"run": +dp["run"],
"difference": +dp['difference']
})
return inner
}, [])
accumulator.push({
"bib": currentValue[0],
"data": data})
return accumulator
}, [])
skiers = d3.groups(tabledata, d => d.bib)
tabledata = d3.csvParse(await FileAttachment("bib12.csv").text())
d3 = require("d3@6")
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.
