Working as Lead researcher @datavisyn on information visualization in life sciences. Lecturer. Web Developer.
Public
Edited
Jan 24, 2024
1 star
pieLayout = {
const width = 200;
const height = 200;
const svg = d3.create("svg").attr("width", width).attr("height", height);
const g = svg
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const data = [1, 2, 0.5, 1, 1.5];
const radius = Math.min(width, height) / 2;
const color = d3.scaleOrdinal(d3.schemeCategory10);
const arc = d3
.arc()
.outerRadius(radius - 10)
.innerRadius(0);
const pie = d3.pie();
const pied_data = pie(data);
const arcs = g
.selectAll(".arc")
.data(pied_data)
.join((enter) =>
enter.append("path").attr("class", "arc").style("stroke", "white")
);
arcs.attr("d", arc).style("fill", (d, i) => color(i));
return svg.node();
}
forceLayout = {
const margin = {
top: 40,
bottom: 10,
left: 20,
right: 20
};
const width = 700 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
// Creates sources <svg> element and inner g (for margins)
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
/////////////////////////
const simulation = d3
.forceSimulation()
.force(
"link",
d3.forceLink().id((d) => d.id)
)
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
const color = d3.scaleOrdinal(d3.schemeCategory10);
// Links data join
const link = g
.selectAll(".link")
.data(miserables.links)
.join((enter) => enter.append("line").attr("class", "link"));
// Nodes data join
const node = g
.selectAll(".node")
.data(miserables.nodes)
.join((enter) => {
const node_enter = enter
.append("circle")
.attr("class", "node")
.attr("r", 5);
node_enter.append("title").text((d) => d.id);
return node_enter;
});
node.style("fill", (d) => color(d.group));
simulation.nodes(miserables.nodes).force("link").links(miserables.links);
simulation.on("tick", (e) => {
link
.attr("x1", (d) => d.source.x)
.attr("y1", (d) => d.source.y)
.attr("x2", (d) => d.target.x)
.attr("y2", (d) => d.target.y);
node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
});
return svg.node();
}
viewof passengerClass = Inputs.select(
new Map([
["All classes", null],
["1st class", 1],
["2nd class", 2],
["3rd class", 3]
]),
{ label: "Passenger Class" }
)
Plot.plot({
marks: [Plot.rectY(filteredData, Plot.binX({ y: "sum" }, { x: "age" }))]
})
sexPieChart = PieChart(sexPieData, d3.schemeSet3)
function PieChart(data, colorScheme) {
const margin = 10;
const radius = 100;
// Creates sources <svg> element
const svg = d3
.create("svg")
.attr("width", radius * 2 + margin * 2)
.attr("height", radius * 2 + margin * 2);
// Group used to enforce margin
const g = svg
.append("g")
.attr("transform", `translate(${radius + margin},${radius + margin})`);
// TODO
const pie = d3
.pie()
.value((d) => d.values.length)
.sortValues(null)
.sort(null);
const pied = pie(data);
console.log(pied);
return svg.node();
}
data = FileAttachment("titanic3.csv").csv({ typed: true })
filteredData = data.filter((d) => {
if (passengerClass && d.pclass !== passengerClass) {
return false;
}
return true;
})
sexPieData = ["male", "female"].map((key) => ({
key,
values: filteredData.filter((d) => d.sex === key)
}))
<style>
rect {
fill: steelblue;
fill-opacity: 0.8;
}
rect:hover {
fill-opacity: 1;
}
path {
fill-opacity: 0.8;
}
.selected,
path:hover {
fill-opacity: 1;
}
.axis {
font-size: smaller;
}
</style>
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.
