swimmerplot = {
var svg = d3.select(DOM.svg(width, height))
let shape_size = 30
let line_size = 15
let swimmer = svg.selectAll("swimmer-plot")
.data(data)
.enter()
.append('g')
.attr('class', 'swimmer-plot')
swimmer.selectAll("main-shape-lane")
.data(d => d.swimmers)
.enter()
.append("g")
.attr('class', 'main-shape-lane')
.attr('transform', (d,i) => `translate(${0},${i*shape_size+30})`)
.selectAll('path')
.data(d => d)
.enter()
.append('path')
.attr('transform', (d,i) => `translate(${xScale(d.x)},0)`)
.attr("d", d => shape(d.type))
.attr('fill', 'none')
.attr("fill", d => d.risk === 2 ? colorScale(d.risk) : "none")
.attr('stroke', d => typeColorScale(d.type))
.attr('stroke-width', 2)
let fontsize = 12
swimmer.selectAll("black-dot-lane")
.data(d => d.blackDots)
.enter()
.append("g")
.attr("transform", d => `translate(${xScale(d.x)}, ${fontsize})`)
.append("text")
.attr("font-size", fontsize)
.text(d => d.value)
.attr('text-anchor', 'middle')
let lines = swimmer.selectAll("line-lanes")
.data(d => d.lines)
.enter()
.append("g")
.attr('class', 'line-lanes')
.attr('transform', (d,i) => `translate(${0},${i*10-line_size})`)
lines.selectAll('line-lanes')
.data(d => d)
.enter()
.append("line")
.attr('stroke', d => typeColorScale(d.type))
.attr("x1", d => xScale(d.x_start))
.attr("y1", shape_size + line_size + 20)
.attr("x2", d => xScale(d.x_end))
.attr("y2", shape_size+ line_size + 20)
.attr('stroke-width', 1)
lines.selectAll('g')
.data(d => d)
.enter()
.append("path")
.attr("d", d3.symbol().type(d3.symbolTriangle).size(20))
.attr('stroke', d => typeColorScale(d.type))
.attr('fill', d => typeColorScale(d.type))
.attr('transform', (d,i) => `translate(${xScale(d.x_end)},${shape_size + line_size + 20})rotate(90)`)
return svg.node()
}