Public
Edited
Nov 30, 2022
1 fork
chart = {
const svg = d3.create('svg')
.attr('viewBox', [-width/10, -width/10, width, 1.2 * height])
.style('margin', '5px')
.style('background', '#FCFCFC')
.style('border-radius', '15px')
.style('box-shadow', '0px 0px 5px 0px rgba(0, 0, 0, 0.075)');
const edgeElements = svg.append('g')
.attr('id', 'edges');
const nodeElements = svg.append('g')
.attr('id', 'nodes');
return Object.assign(svg.node(), {
update(g, nodes, edges) {
edgeElements
.selectAll('path')
.data(edges)
.join(
enter => enter.append('path')
.attr('d', d => d.d)
.style('stroke', d => d.stroke)
.style('stroke-width', d => d.stroke_width)
.style('fill', 'none')
.style('opacity', 0)
.call(
enter => enter.transition()
.duration(delay * 0.5)
.delay(delay*0.25)
.style('opacity', 1)
),
update => update.call(
update => update.transition()
.duration(delay * 0.75)
.delay(delay * 0.25)
.attr('d', d => d.d)
.style('opacity', 1)
),
remove => remove.call(
remove => remove.transition()
.duration(delay * 0.25)
.style('opacity', 0)
.remove()
)
);
nodeElements
.selectAll('path')
.data(nodes)
.join(
enter => enter.append('path')
.attr('d', d => d.d)
.style('stroke', d => d.stroke)
.style('stroke-width', d => d.stroke_width)
.attr("stroke-linecap", "round")
.style('fill', 'none')
.style('opacity', 0)
.call(
enter => enter.transition()
.duration(delay * 0.5)
.delay(delay * 0.25)
.style('opacity', 1)
),
update => update.call(
update => update.transition()
.duration(delay * 0.75)
.attrTween('d', function(d) {
return d3.interpolatePath(
this.getAttribute('d'),
d.d
);
})
.style('opacity', 1)
),
remove => remove.call(
remove => remove.transition()
.duration(delay * 0.25)
.style('opacity', 0)
.remove()
)
);
nodeElements
.selectAll('text')
.data(nodes)
.join(
enter => enter.append('text')
.filter(d => (d.x != null) && (d.y != null))
.text(d => d.data_id)
.attr('transform', d => `translate(${d.x}, ${d.y})`)
.attr('text-anchor', 'left')
.style('font-family', 'Helvetica, Arial, sans-serif')
.style('font-size', '11px')
.style('paint-order', 'stroke')
.style('stroke', '#FCFCFC')
.style('stroke-width', 2.5)
.style('stroke-linecap', 'round')
.style('stroke-linejoin', 'round')
.call(
enter => enter.transition()
.duration(delay * 0.5)
.delay(delay * 0.25)
.style('opacity', 1)
),
update => update.call(
update => update.transition()
.duration(delay * 0.75)
.text(d => d.data_id)
.attr('transform', d => `translate(${d.x}, ${d.y})`)
.style('opacity', 1)
),
remove => remove.call(
remove => remove.transition()
.duration(delay * 0.25)
.style('opacity', 0)
.remove()
)
);
return 'I arrange the graph...';
}
});
}
import {dummyE, category} from "@cs7290/geocoding-bioscience-map-of-maine-filter"
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.
