Public
Edited
Sep 11, 2023
chart = {
const height = 600;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-family", "sans-serif")
.attr("font-size", 10);
const yAxis = d3.axisLeft(scaleY);
const xAxis = d3.axisTop(scaleX);
const padding = 10;
const xAxisPlot = svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", `translate(45, 0)`)
.call(xAxis.tickSize(-height, 0, 0))
const yAxisPlot = svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", `translate(45, 0)`)
.call(yAxis.tickSize(-width, 0, 0))
yAxisPlot.selectAll(".tick line")
.attr("stroke", "silver")
.attr("x1", -10)
.attr("x2", width * 1);
yAxisPlot.selectAll("path.domain")
.attr("stroke", "silver")
yAxisPlot.selectAll(".tick text")
.attr("x", -10)
xAxisPlot.selectAll(".tick text")
.attr("transform", `translate(100, 35)`)
.attr("font", "bold 18px serif;")
xAxisPlot.selectAll(".tick line")
.attr("stroke", "silver")
.attr("y1", -5)
.attr("y2", (width - 0)* 1);
return svg.node()
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
scaleX(3)
scaleX = d3.scaleOrdinal().domain(labels).range([0,(width-45)/5, (2*width-45)/5, (3*width-45)/5, (4*width-45)/5, width-45])
scaleY = d3.scaleOrdinal().domain(times).range(arr)
// {
// for (let i = 0; i < times.length; i++) {
// arr.push((i*(575/17)) + 50)
// console.log(arr)
// }
// }
arr = [50, 83.8235294117647, 117.6470588235294, 151.47058823529412, 185.2941176470588, 219.1176470588235, 252.94117647058823, 286.7647058823529, 320.5882352941176, 354.4117647058823, 388.235294117647, 422.0588235294117, 455.88235294117646, 489.70588235294116, 523.5294117647059, 557.3529411764705, 591.1764705882352]
activityLog = [
{ "Day": "Mon", "Hour": "05:00", "Activity": "Work" },
{ "Day": "Weds", "Hour": "06:00", "Activity": "Work" },
{ "Day": "Tue", "Hour": "12:00", "Activity": "Work" },
{ "Day": "Thur", "Hour": "12:00", "Activity": "Work" },
{ "Day": "Thur", "Hour": "15:00", "Activity": "Work" },
{ "Day": "Thur", "Hour": "14:00", "Activity": "Work" },
{ "Day": "Thur", "Hour": "16:00", "Activity": "Work" },
]
time = ["05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"]
labels = ["Monday","Tuesday","Wednesday","Thursday","Friday"]
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.
