Public
Edited
Oct 25, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data
X
variety
Y
yield
Color
variety
Size
mean
yield
Facet X
Facet Y
site
Mark
dot
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
color: { legend: true },
y: { type: "linear" },
width,
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.dot(data, {
fy: "year",
x: "variety",
y: "yield",
stroke: "variety",
r: "yield",
tip: true
})
]
})
Insert cell

// Create a frame with reduced stroke opacity
svg.append("rect")
.attr("width", width)
.attr("height", 500)
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-opacity", 0.1);

// Create scales (x and y scales)
const xScale = d3.scaleBand()
.domain(data.map(d => d.variety))
.range([0, width])
.padding(0.1);

const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.yield)])
.range([500, 0]); // Adjust the range as needed

// Create circles for the dot plot
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => xScale(d.variety) + xScale.bandwidth() / 2)
.attr("cy", d => yScale(d.yield))
.attr("r", d => d.yield) // Use "yield" as the radius
.attr("fill", d => d.variety) // Use "variety" for fill color
.attr("stroke", d => d.variety) // Use "variety" for stroke color
.attr("stroke-width", 1)
.attr("stroke-opacity", 1);

// Add tooltips (customize this part)
svg.selectAll("circle")
.on("mouseover", (event, d) => {
// Display tooltip here (e.g., using d3.tip or custom code)
})
.on("mouseout", (event, d) => {
// Hide tooltip here
});

// Create a legend (customize this part)
const legend = svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(20,20)"); // Adjust the legend position as needed

// Add legend entries
legend.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", (d, i) => i * 20)
.attr("width", 10)
.attr("height", 10)
.attr("fill", d => d.variety);

// Add legend labels
legend.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("x", 20)
.attr("y", (d, i) => i * 20 + 10)
.text(d => d.variety); // Use "variety" for legend labels

Insert cell
data
X
sum
yield
Y
variety
Color
year
Size
Facet X
Facet Y
site
Mark
line
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
color: { legend: true },
width: 2000,
height: 1500,
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.ruleX([0]),
Plot.lineX(
data,
Plot.groupY(
{ x: "sum" },
{ fy: "site", x: "yield", y: "variety", stroke: "year", tip: true }
)
)
]
})
Insert cell
Plot.plot({
width:500,
height: 2000,
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.lineX(
data,
Plot.groupY(
{ x: "sum" },
{ fy: "site", x: "yield", y: "year", r: "yield", tip: true }
)
),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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