Public
Edited
Apr 30
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
// your code
numericColumns = data.columns.filter(col =>
data.every(d => !isNaN(+d[col]))
)
Insert cell
scales = Object.fromEntries(
numericColumns.map(col => [
col,
d3.scaleLinear()
.domain(d3.extent(data, d => +d[col]))
.range([0, 1])
])
)
Insert cell
D = numericColumns.length
Insert cell
r = 1
Insert cell
anchors = numericColumns.map((_, j) => {
const angle = (j) * 2 * Math.PI / D
return [r * Math.cos(angle), r * Math.sin(angle)]
})
Insert cell
points = data.map(d => {
let total = 0;
const values = [];
for (let col of numericColumns) {
const val = scales[col](+d[col]);
values.push(val);
total += val;
}

let x = 0, y = 0;
for (let j = 0; j < numericColumns.length; j++) {
const weight = values[j] / total;
x += weight * anchors[j][0];
y += weight * anchors[j][1];
}

return { x, y, original: d };
});


Insert cell
classes = [...new Set(data.map(d => d.class))];

Insert cell
color = d3.scaleOrdinal()
.domain(classes)
.range(d3.schemeCategory10);

Insert cell
chart = {
const width = 500;
const height = 500;
const radius = 200;
const centerX = width / 2;
const centerY = height / 2;

const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("background", "#fff");

const g = svg.append("g")
.attr("transform", `translate(${centerX}, ${centerY})`);

g.append("circle")
.attr("r", radius)
.attr("fill", "none")
.attr("stroke", "#ccc");

const anchorG = g.append("g");

anchors.forEach((anchor, i) => {
const [x, y] = [anchor[0], anchor[1]];

anchorG.append("line")
.attr("x1", 0).attr("y1", 0)
.attr("x2", x * radius).attr("y2", y * radius)
.attr("stroke", "#aaa");

anchorG.append("text")
.attr("x", x * radius * 1.1)
.attr("y", y * radius * 1.1)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("font-size", 10)
.text(numericColumns[i]);
});

g.append("g")
.selectAll("circle")
.data(points)
.join("circle")
.attr("cx", d => d.x * radius)
.attr("cy", d => d.y * radius)
.attr("r", 3)
.attr("fill", d => color(d.original.class || "default"))
.attr("opacity", 0.7);

return svg.node();
}

Insert cell
Insert cell
Insert cell
dimensions = ["sepal-length", "sepal-width", "petal-length", "petal-width"]
Insert cell
color_3 = d3.scaleOrdinal()
.domain(["Iris-setosa", "Iris-versicolor", "Iris-virginica"])
.range(["#FF6347", "#1E90FF", "#32CD32"])
Insert cell
chart_4 = {
const margin = {top: 30, right: 10, bottom: 10, left: 0};
const width = 700 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.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 dragging = {};

// Escalas
const y = {};
for (const dim of dimensions) {
y[dim] = d3.scaleLinear()
.domain(d3.extent(data, d => +d[dim]))
.range([height, 0]);
}

let x = d3.scalePoint()
.domain(dimensions)
.range([0, width])
.padding(1);

// Función path
function path(d) {
return d3.line()(dimensions.map(p => [position(p), y[p](d[p])]));
}

function position(d) {
return dragging[d] == null ? x(d) : dragging[d];
}

// Dibujar líneas
const lines = g.append("g")
.attr("class", "lines")
.selectAll("path")
.data(data)
.join("path")
.attr("d", path)
.attr("fill", "none")
.attr("stroke", d => color(d.class))
.attr("stroke-width", 1.5)
.attr("opacity", 0.5);

// Dibujar ejes
const axes = g.selectAll(".axis")
.data(dimensions)
.join("g")
.attr("class", "axis")
.attr("transform", d => `translate(${x(d)},0)`)
.call(d3.drag()
.subject(d => ({x: x(d)}))
.on("start", function(event, d) {
dragging[d] = x(d);
})
.on("drag", function(event, d) {
dragging[d] = Math.min(width, Math.max(0, event.x));
dimensions.sort((a, b) => position(a) - position(b));
x.domain(dimensions);
axes.attr("transform", d => `translate(${position(d)},0)`);
lines.attr("d", path);
})
.on("end", function(event, d) {
delete dragging[d];
axes.transition().duration(500).attr("transform", d => `translate(${x(d)},0)`);
lines.transition().duration(500).attr("d", path);
})
);

axes.each(function(d) {
d3.select(this).call(d3.axisLeft(y[d]));
})
.append("text")
.attr("y", -9)
.attr("text-anchor", "middle")
.text(d => d)
.style("fill", "black");

return svg.node();
}

Insert cell
Insert cell
Insert cell

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.
Learn more