Notebooks 2.0 is here.

Public
Edited
Nov 7, 2023
Insert cell
Insert cell
viewof rotation = Inputs.range([0, 360], {label: "Rotazione", step: 1})
Insert cell
{
let svg = d3.create("svg").attr("width", 600).attr("height", 300);

let gruppo = svg.append("g");

gruppo.append("circle").attr("r", 100).attr("fill", "green");
gruppo
.append("rect")
.attr("x", 20)
.attr("y", 30)
.attr("width", 100)
.attr("height", 20)
.attr("fill", "yellow")
.attr("stroke", "black");

//attributo transform non è diviso in tanti attributi differenti,
//riguarda, la rotazione, lo spostamento, la scala e la distorsione su uno
//dei due assi.
gruppo.attr("transform", "translate(100, 70) rotate(" + rotation + ")");

//lo traslo e lo ruoto
// poi richiamo lo slider di rotazione

return svg.node();
}
Insert cell
cars
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
{
let height = 500;
let svg = d3.create("svg").attr("width", width).attr("height", height);

let gruppi = svg.selectAll("g").data(cars).join("g");

let larghezza = 30;

let xScale = d3
.scaleLinear()
.range([0, width])
.domain(d3.extent(cars, (d) => d["0-60 mph (s)"]));

let yScale = d3
.scaleLinear()
.range([0, height])
.domain(d3.extent(cars, (d) => d["displacement (cc)"]));

gruppi.attr(
"transform",
(d) =>
"translate(" +
xScale(d["0-60 mph (s)"]) +
"," +
yScale(d["displacement (cc)"]) +
")"
);

let wScale = d3
.scaleLinear()
.range([10, 50])
.domain(d3.extent(cars, (d) => d["weight (lb)"]));

gruppi
.append("rect")
.attr("height", 5)
.attr("width", (d) => wScale(d["weight (lb)"]))
.attr("y", 5)
.attr("fill", "red");

gruppi
.append("rect")
.attr("height", 10)
.attr("width", (d) => wScale(d["weight (lb)"]) * 0.8)
.attr("rx", 5)
.attr("fill", "red");

gruppi.append("circle").attr("r", 2).attr("cy", 10).attr("cx", 4);

gruppi
.append("circle")
.attr("r", 2)
.attr("cy", 10)
.attr("cx", (d) => wScale(d["weight (lb)"]) - 4);

return svg.node();
}
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