Polar Agenda (Vanilla)

Developer
Rafael Abensur
Size
6,349 Kb
Views
34,408
  1. Polar Agenda (Vanilla) Previews
  2. Polar Agenda (Vanilla) HTML Codes
  3. Polar Agenda (Vanilla) CSS Codes
  4. Polar Agenda (Vanilla) JS Codes

How do I make an polar agenda (vanilla)?

A 24h Clock with a Ganttish Daily Agenda. What is a polar agenda (vanilla)? How do you make a polar agenda (vanilla)? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.

Polar Agenda (Vanilla) Previews
IQ Test

Polar Agenda (Vanilla) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Polar Agenda (Vanilla)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- original: https://dribbble.com/shots/2340978-Today-Schedule-freebies
-->
<div class="polar-gantt"> <div id="target" />
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/d3-jetpack.js'></script> <script src="js/index.js"></script>
</body>
</html>

Polar Agenda (Vanilla) - Script Codes CSS Codes

body { background: #454555;
}
.polar-gantt { width: 320px; height: 320px; margin: 20px auto 0;
}
.polar-gantt svg { width: 100%; height: 100%;
}
.polar-gantt svg .hours-hand,
.polar-gantt svg .minutes-hand,
.polar-gantt svg .seconds-hand { stroke-linecap: round; stroke: rgba(255, 255, 255, 0.5);
}
.polar-gantt svg .hours-hand { stroke-width: 2;
}
.polar-gantt svg .minutes-hand,
.polar-gantt svg .hours-tick { stroke-width: 1;
}
.polar-gantt svg .hands-cover { fill: #fff;
}
.polar-gantt svg .hours-tick { stroke: #fff;
}
.polar-gantt svg .hours-label { font-size: 10px; fill: rgba(255, 255, 255, 0.5);
}

Polar Agenda (Vanilla) - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
console.clear();
var PolarGantt = function () { function PolarGantt() { _classCallCheck(this, PolarGantt); this.radians = Math.PI / 180; } PolarGantt.prototype.init = function init(opt) { var _this = this; var container = d3.select(opt.sel), measures = container.node().getBoundingClientRect(), t = new Date(); this.clockRadius = measures.width * 0.8 / 2; this.margin = measures.width * 0.2 / 4; this.width = (this.clockRadius + this.margin * 2) * 2; this.height = (this.clockRadius + this.margin * 2) * 2; this.hoursHandLength = this.clockRadius - 18; this.minutesHandLength = this.clockRadius / 2; this.secondsHandLength = this.clockRadius / 1.25; this.hoursTickStart = this.clockRadius; this.hoursTickLength = -8; this.hoursLabelRadius = this.clockRadius - 40; this.hoursLabelYOffset = 6; this.hoursScale = d3.scale.linear().range([0, 330]).domain([0, 23]); this.minutesScale = this.secondsScale = d3.scale.linear().range([0, 354]).domain([0, 59]); this.hoursData = { value: t.getHours() + t.getMinutes() / 60, length: -this.hoursHandLength, scale: this.hoursScale }; this.minutesData = { value: t.getMinutes(), length: -this.minutesHandLength, scale: this.minutesScale }; this.secondsData = { value: t.getSeconds(), length: -this.secondsHandLength, scale: this.secondsScale }; this.color = d3.scale.linear().range(["hsl(-180,50%,50%)", "hsl(180,50%,50%)"]).domain([0, this._fields().length - 1]).interpolate(this._interpolateHsl); this._draw(container); setInterval(function () { _this._updateData(); _this._moveHands(); }, 1000); }; PolarGantt.prototype._arc = function _arc(data) { var t0 = data.start.getHours() + data.start.getMinutes() / 60, t1 = data.end.getHours() + data.end.getMinutes() / 60, scale = this.hoursData.scale, ratio = (this.clockRadius - 8) / this._fields().length, padding = 0.3; var arc = d3.svg.arc().startAngle(scale(t0) * this.radians).endAngle(scale(t1) * this.radians).innerRadius(function (d) { return (d.index + padding) * ratio; }).outerRadius(function (d) { return (d.index - padding) * ratio + ratio; }).cornerRadius(ratio); return arc(data); }; PolarGantt.prototype._draw = function _draw(container) { var _this2 = this; this._updateData(); var svg = container.append('svg').attr({ width: this.width, height: this.height }); // Lower Container var face = svg.append('g').attr({ id: 'clock-face', transform: ['translate(', this.clockRadius + this.margin * 2, ',', this.clockRadius + this.margin * 2, ')'].join('') }); // Outer Arc (frame) face.append('path').attr('d', d3.svg.arc().startAngle(0).endAngle(Math.PI * 2).innerRadius(this.clockRadius + this.hourTickLength).outerRadius(this.clockRadius)).style('fill', 'rgba(24, 24, 31, 0.8)'); // Inner Circle (background) face.append('circle').attr({ cx: 0, cy: 0, r: this.clockRadius, fill: 'rgba(31, 30, 39, 0.8)' }); // Ticks face.selectAll('.hours-tick').data([0, 6, 12, 18]).enter().append('line').attr({ class: 'hours-tick', x1: 0, x2: 0, y1: this.hoursTickStart, y2: this.hoursTickStart + this.hoursTickLength, transform: function transform(d) { var rotate = 0; switch (d) { case 6: rotate = 90;break; case 12: rotate = 180;break; case 18: rotate = 270;break; default: rotate = 0; } return 'rotate(' + rotate + ')'; } }); // Ticks Labels face.selectAll('.hours-label').data(['18H', '6H']).enter().append('text').attr({ class: 'hours-label', 'alignment-baseline': 'middle', 'text-anchor': function textAnchor(d, i) { return i ? 'start' : 'end'; }, x: function x(d, i) { return i ? _this2.width / 2 - 28 : -_this2.width / 2 + 28; }, y: function y(d, i) { return -_this2.hoursLabelRadius * Math.cos(_this2.radians * 90); } }).text(function (d) { return d; }); var field = face.selectAll('g.agenda-arc').data(this._fields).enter().append('g').attr('class', 'agenda-arc'); field.append("path").attr('class', 'agenda-arc-path'); field.select("path").attr('d', function (d) { return _this2._arc(d); }).style("fill", function (d) { return _this2.color(d.index); }); var hands = face.append('g').attr('id', 'clock-hands'); face.append('g').attr('id', 'face-overlay').append('circle').attr({ class: 'hands-cover', x: 0, y: 0, r: this.clockRadius / 20 }); hands.append('line').attr({ class: 'hours-hand', x1: 0, y1: 0, x2: 0, y2: this.hoursData.length, transform: 'rotate(' + this.hoursData.scale(this.hoursData.value) + ')' }); hands.append('line').attr({ class: 'minutes-hand', x1: 0, y1: 0, x2: 0, y2: this.minutesData.length, transform: 'rotate(' + this.minutesData.scale(this.minutesData.value) + ')' }); hands.append('line').attr({ class: 'seconds-hand', x1: 0, y1: 0, x2: 0, y2: this.secondsData.length, transform: 'rotate(' + this.secondsData.scale(this.secondsData.value) + ')' }); }; PolarGantt.prototype._fields = function _fields() { var suffix = '2015-11-09 '; return [{ index: 0, start: new Date(suffix + '03:00:00 UTC'), // 2 PM end: new Date(suffix + '09:00:00 UTC') // 3:30 PM }, { index: 1, start: new Date(suffix + '09:00:00 UTC'), // 3 PM end: new Date(suffix + '14:00:00 UTC') // 6 PM }, { index: 2, start: new Date(suffix + '11:00:00 UTC'), // 6 PM end: new Date(suffix + '14:00:00 UTC') // 10 PM }, { index: 3, start: new Date(suffix + '12:00:00 UTC'), // 6 PM end: new Date(suffix + '18:00:00 UTC') // 10 PM }, { index: 4, start: new Date(suffix + '16:40:00 UTC'), // 6 PM end: new Date(suffix + '21:00:00 UTC') // 10 PM }]; }; PolarGantt.prototype._moveHands = function _moveHands() { d3.select('#clock-hands .hours-hand').transition().ease('elastic').duration(1000).attr('transform', 'rotate(' + this.hoursData.scale(this.hoursData.value) + ')'); d3.select('#clock-hands .minutes-hand').transition().ease('elastic').duration(1000).attr('transform', 'rotate(' + this.minutesData.scale(this.minutesData.value) + ')'); d3.select('#clock-hands .seconds-hand').transition().ease('linear').duration(1000).attr('transform', 'rotate(' + this.secondsData.scale(this.secondsData.value) + ')'); }; PolarGantt.prototype._interpolateHsl = function _interpolateHsl(a, b) { var i = d3.interpolateString(a, b); return function (t) { return d3.hsl(i(t)); }; }; PolarGantt.prototype._updateData = function _updateData() { var t = new Date(); this.hoursData.value = t.getHours() + t.getMinutes() / 60; this.minutesData.value = t.getMinutes(); this.secondsData.value = t.getSeconds(); }; return PolarGantt;
}();
var polarGantt = new PolarGantt();
polarGantt.init({ sel: '#target' });
Polar Agenda (Vanilla) - Script Codes
Polar Agenda (Vanilla) - Script Codes
Home Page Home
Developer Rafael Abensur
Username abensur
Uploaded September 12, 2022
Rating 3
Size 6,349 Kb
Views 34,408
Do you need developer help for Polar Agenda (Vanilla)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rafael Abensur (abensur) Script Codes
Name
Isocubes
Responsive SVG thermometer
Chart tooltip example
React Loader
Roundout Ribbon
React Progress Bar
Pocker Mortys dataviz
Food Seasons
Tesseract experiments
D3.js with CSS sprites
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!