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
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.