open source with R and JavaScript
html`<link href="https://unpkg.com/parcoord-es@2.1.5/dist/parcoords.css" rel="stylesheet" />`
{
let parcoords2 = ParCoords()("#example2")
.data(// objects
[
{name: "Asparagus", protein: 2.2, calcium: 0.024, sodium: 0.002},
{name: "Butter", protein: 0.85, calcium: 0.024, sodium: 0.714},
{name: "Coffeecake", protein: 6.8, calcium: 0.054, sodium: 0.351},
{name: "Pork", protein: 28.5, calcium: 0.016, sodium: 0.056},
{name: "Provolone", protein: 25.58, calcium: 0.756, sodium: 0.876}
]
)
.on("render axesreorder", function() {
const pc = this
const svg = pc.svg
// just a pretend object to illustrate how we might achieve horizontal overlay lines
// could easily add more to the object such as style, etc.
const lines = [
{dimension: "protein", value: 15},
{dimension: "calcium", value: 0.7}
]
let overlay = this.svg.selectAll('.overlay').data([lines])
overlay = overlay.merge(overlay.enter().append('g').classed('overlay', true))
overlay.call(drawLines)
function drawLines(selection) {
const data = selection.datum()
let paths = selection.selectAll('path').data(data)
const dim = pc.dimensions()
paths = paths.merge(paths.enter().append('path'))
paths
.attr('d', d => {
// reorder makes things much more complicated
// since the xscale will not have been updated during reorder
let x = pc.xscale(d.dimension)
const y = dim[d.dimension].yscale(d.value)
return d3.line()([[x-30, y],[x+30, y]])
})
.style('stroke', 'red')
}
})
parcoords2
.render()
.createAxes()
// .reorderable() allows axes to move but does not seem to redraw connections
.reorderable()
return parcoords2
}
ParCoords = require('parcoord-es')
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.
