class Calendar {
constructor (name, event_color, timezone_offset, valence) {
this.name = name;
this.color = event_color;
this.tz = timezone_offset;
this.valence = valence;
this.events = [];
}
addEvent (event_object) {
this.events.push(event_object);
}
}
class Event {
constructor(name, start_time, end_time) {
this.name = name;
this.start = start_time.getHours() * 60 + start_time.getMinutes();
this.end = end_time.getHours() * 60 + end_time.getMinutes();;
}
}
personal_calendar = {
let calendar = new Calendar("Personal", "#3F88C5", 0, 1);
calendar.addEvent(new Event("Dentist", today('16:00'), today('16:55')));
calendar.addEvent(new Event("Gym", today('8:30'), today('9:20')));
calendar.addEvent(new Event("Call Mom", today('17:00'), today('17:30')));
calendar.addEvent(new Event("Walk the Dog", today('19:00'), today('19:30')));
return calendar;
}
work_calendar = {
let calendar = new Calendar("Work", "#2E5E5A", 0, 2);
calendar.addEvent(new Event("Team Standup", today('10:00'), today('10:20')));
calendar.addEvent(new Event("1:1 with Katie", today('11:00'), today('11:30')));
calendar.addEvent(new Event("Q2 Planning", today('12:00'), today('14:00')));
calendar.addEvent(new Event("Block for Project Z", today('15:00'), today('15:50')));
return calendar;
}
social_calendar = {
let calendar = new Calendar("Social", "#F686BD", 0, 3);
calendar.addEvent(new Event("Coffee with Will", today('14:00'), today('14:30')));
calendar.addEvent(new Event("Dinner with with Simon", today('21:00'), today('22:30')));
return calendar;
}
wheelChart = function(data, style) {
const pi = Math.PI,
mins = d3.range(0, 1440);
const properties = {
width: width,
height: style.height,
margin: style.margin,
arc_thickness: style.thickness,
radius_padding: style.padding
},
center = {
x: properties.width / 2,
y: properties.height / 2
},
clockRadius = (properties.height - (4 * properties.margin)) / 2,
clockInnerRadius = clockRadius - properties.arc_thickness,
angle_domain = d3.extent(mins);
//Scales
let angleScale = d3.scaleLinear()
.domain(angle_domain)
.range([0, 2*pi]);
let colorScale = function(n) {
var color;
data.map(function(d) {
if (n >= d.start.minute && n <= d.end.minute)
color = d3.interpolateRgb(d.start.color, d.end.color)
((n - d.start.minute) / (d.end.minute - d.start.minute));
}); return color;
}
let arc = d3.arc()
.innerRadius(clockInnerRadius)
.outerRadius(clockRadius)
.startAngle(d => angleScale(d))
.endAngle(d => angleScale(d) + pi*2 / mins.length);
let remaining_arc = d3.arc()
.innerRadius(clockInnerRadius - properties.arc_thickness)
.outerRadius(clockInnerRadius)
.startAngle(d => angleScale(currentDateTime))
.endAngle(d => angleScale(daylight_remaining.end));
let lineRadial = d3.lineRadial();
var WheelChart = {};
WheelChart.addCalendar = function (cal, el, tooltip) {
var selected_valence =
use_valences == "One Valence" ? 1 : use_valences == "No Valences" ? 0 : cal.valence;
var outer = clockRadius + selected_valence*(properties.radius_padding + properties.arc_thickness),
inner = outer - properties.arc_thickness;
var arc_function = d3.arc()
.innerRadius(inner)
.outerRadius(outer)
.startAngle(d => angleScale(d.start))
.endAngle(d => angleScale(d.end));
el.append("g")
.attr("class", "calendar")
.selectAll("path")
.data(cal.events)
.enter()
.append("path")
.attr("d", arc_function)
.attr("fill", d => cal.color)
.attr("opacity", 0.8)
.attr("stroke-width", 1)
.attr("stroke", cal.color)
.on("mouseover", function(d) {
d3.selectAll(".tooltip").style("visibility", "hidden");
tooltip
.style("visibility", "visible")
.text(cal.name + ' - ' + d.name);
d3.select(this)
.attr("stroke", "black");
}).on("mousemove", function() {
tooltip
.style("top", (d3.event.pageY-10)+"px")
.style("left",(d3.event.pageX+20)+"px");
}).on("mouseout", function() {
tooltip.style("visibility", "hidden");
d3.select(this).attr("stroke-width", 0);
});
}
/* DRAW */
var svg = d3.create("svg")
.attr("viewBox", [0, 0, properties.width, properties.height]);
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
.style("font-size", "1rem")
.style("background", "rgba(255,255,255,0.8)")
.style("padding", "0.1rem 0.5rem")
.style("color", "#000")
.style("border-radius", "3px")
.style("border", "1px solid #000");
var container = svg.append("g")
.attr("class", "chart-container")
.attr("transform", `translate(${center.x}, ${center.y})`);
var wheel = container.append("g")
.attr("class", "wheel")
.selectAll("path")
.data(mins)
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => colorScale(d))
.attr("stroke", d => colorScale(d));
if (currentDateTime <= daylight_remaining.end && currentDateTime >= daylight_remaining.start) {
container.append("g")
.append("path")
.attr("d", remaining_arc)
.attr("fill", d => "#D00000")
.attr("opacity", 0.15);
container.append("g")
.attr("class", "light-left")
.selectAll("text")
.data([currentDateTime])
.enter()
.append("text")
.attr("transform", d =>`translate(
${(clockInnerRadius - 30) * Math.sin(angleScale(daylight_remaining.half_angle))},
${-(clockInnerRadius - 30) * Math.cos(angleScale(daylight_remaining.half_angle))})`)
.attr("dy", "0.35em")
.attr("font-weight", 700)
.attr("font-size", 24)
.text(daylight_remaining.left + '%');
}
container.append("g")
.attr("class", "needle")
.selectAll("path")
.data([currentDateTime])
.enter()
.append("path")
.attr("d", d => lineRadial([[0, 0], [angleScale(d), clockInnerRadius]]))
.attr("stroke", "black")
.attr("stroke-width", 10)
.attr("stroke-linecap", "round");
container.select("g.needle")
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 20)
.attr("stroke", "black")
.attr("stroke-width", 10)
.style("fill", "white");
WheelChart.svg = svg;
WheelChart.container = container;
WheelChart.tooltip = tooltip;
return WheelChart;
}
params = ({
today: new Date(),
lat: -34.603722,
lon: -58.381592
})
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.
