Published
Edited
Oct 8, 2021
chart = {
const svg = d3.select(DOM.svg(width, height + 30));
const g2 = svg.append('g')
.selectAll('g')
.data([1,2,4])
.enter()
.append("text")
.attr("transform", (d, i) => `translate(${(x(i) + x.bandwidth() / 2) - 10},0)`)
//.attr("x", function(d) { return x(d) - 3; })
.attr("y", 100 / 2)
.attr("dy", ".35em")
.attr('font-size', '2em')
.text(function(d) { return d; })
.attr('fill', 'orangered')
const g = svg
.append("g")
.selectAll("g")
.data(boxes)
.join("g");
g.append("path")
.attr("stroke", "currentColor")
.attr(
"d",
(d, i) => `
M${x(i) + x.bandwidth() / 2},${y(d.range[1])}
V${y(d.range[0])}
`
);
g.append("path")
.attr("fill", "#ddd")
.attr(
"d",
(d, i) => `
M${x(i)},${y(d.quartiles[2])}
H${x(i) + x.bandwidth()}
V${y(d.quartiles[0])}
H${x(i)}
Z
`
);
g.append("path")
.attr("stroke", "currentColor")
.attr("stroke-width", 2)
.attr(
"d",
(d, i) => `
M${x(i)},${y(d.quartiles[1])}
H${x(i) + x.bandwidth()}
`
);
g.append("g")
.attr("fill", "currentColor")
.attr("fill-opacity", 0.2)
.attr("stroke", "none")
.attr("transform", (d, i) => `translate(${x(i) + x.bandwidth() / 2},0)`)
.selectAll("circle")
.data(d => d.outliers)
.join("circle")
.attr("r", 3)
.attr("cx", () => (Math.random() - 0.5) * 4)
.attr("cy", d => y(d));
// make a horizontal line across the plot
svg.append("line")
.attr("transform", `translate(${margin.left + 10},0)`)
.attr("x1", 0)
.attr("x2", width - margin.left - margin.right)
.attr("y1", y(dataMean))
.attr("y2", y(dataMean))
.attr('stroke', 'orangered')
.attr('stroke-width', 3)
.attr('cursor', 'grab')
// make the line draggable
// and return the y number to the console
.call(drag);
svg.append("g").call(xAxis).attr('font-size', '2em');
svg.append("g").call(yAxis);
svg.selectAll("g")
.data(dat)
.enter()
.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", 100 / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
return svg.node();
}
x(2)
json = [
{category: "a", value: 100},
{category: "a", value: 52},
{category: "a", value: 124},
{category: "b", value: 20},
{category: "b", value: 52},
{category: "b", value: 124},
{category: "c", value: 100},
{category: "c", value: 1},
{category: "c", value: 150},
]
dat = [3,3,3]
dataMean = d3.mean(json, function(d) {
return d.value;
});
keys = [...new Set(json.map(x => x.category))]
x = d3
.scaleBand()
.domain(d3.range(boxes.length))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3
.scaleLinear()
.domain([d3.min(boxes, d => d.range[0]), d3.max(boxes, d => d.range[1])])
.nice()
.range([height - margin.bottom, margin.top])
xAxis = g =>
g.attr("transform", `translate(0,${height - margin.bottom + 10})`).call(
d3
.axisBottom(x)
.tickFormat(i => boxes[i].key)
.tickSizeOuter(0)
)
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.select(".domain").remove())
height = 450
width = 600
margin = ({ top: 100, right: 20, bottom: 30, left: 40 })
drag = {
// change the color this works
function dragstarted(event, d) {
d3.select(this).raise().attr("stroke", "gray");
}
// the x should stay the same
// the y needs to move to the event y?
function dragged(event, d) {
let yPos = Math.max(margin.top, Math.min(height - margin.bottom, event.y));
d3.select(this)
.attr("y1", yPos)
.attr("y2", yPos);
}
function dragended(event, d) {
d3.select(this).attr("stroke", 'orangered');
// how do I convert this back to y-scale?
console.log(event.y)
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
d3 = require("d3@7")
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.
