Skip to content

Instantly share code, notes, and snippets.

View ng-the-engineer's full-sized avatar

Anthony Ng ng-the-engineer

2 followers · 2 following
View GitHub Profile
@ng-the-engineer
ng-the-engineer / plot.js
Created May 18, 2021 12:02
Code snippet of tutorial bubble plot
svg
.append("text")
.attr("x", 230)
.attr("y", 420)
.style("text-anchor", "middle")
.text("Last used year");
svg
.append("text")
.attr("x", -200)
@ng-the-engineer
ng-the-engineer / plot.js
Last active May 21, 2021 10:38
Code snippet of tutorial bubble plot
const margin = { top: 10, right: 20, bottom: 30, left: 50 };
const width = 500 - margin.left - margin.right;
const height = 420 - margin.top - margin.bottom;
const xLabelHeight = 50;
d3.csv("https://tutorial-node-api-k8s-ng-the-engineer.cloud.okteto.net/skills", (data) => {
...
}
);
@ng-the-engineer
ng-the-engineer / index.html
Last active May 21, 2021 09:55
Code snippet of tutorial bubble plot
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"
integrity="sha512-cd6CHE+XWDQ33ElJqsi0MdNte3S+bQY819f7p3NUHgwQQLXSKjE4cPZTeGNI+vaxZynk1wVU3hoHmow3m089wA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
@ng-the-engineer
ng-the-engineer / plot.js
Last active May 17, 2021 18:07
Code snippet of tutorial bubble plot
svg
.append("g")
.selectAll("dot")
.data(data)
.enter()
.attr("class", "bubbles")
.attr("cx", (d) => x(d.lastUse))
.attr("cy", (d) => y(d.exp))
.attr("r", (d) => z(d.competency ** 3 / 100))
.style("fill", (d) => myColor(d.category))
@ng-the-engineer
ng-the-engineer / plot.js
Created May 17, 2021 17:59
Code snippet of tutorial bubble plot
const showTooltip = function (d) {
tooltip.transition().duration(200);
tooltip
.style("opacity", 1)
.html(d.skill)
.style("left", d3.mouse(this)[0] + 30 + "px")
.style("top", d3.mouse(this)[1] + 30 + "px");
};
const moveTooltip = function (d) {
@ng-the-engineer
ng-the-engineer / plot.js
Created May 17, 2021 17:56
Code snippet of tutorial bubble plot
const tooltip = d3
.select("#skills_bubble_plot")
.append("div")
.style("position", "absolute")
.style("opacity", 0)
.style("background-color", "black")
.style("border-radius", "5px")
.style("padding", "10px")
.style("color", "white");
@ng-the-engineer
ng-the-engineer / plot.js
Last active May 17, 2021 15:34
Code snippet of tutorial bubble plot
var myColor = d3
.scaleOrdinal()
.domain([
"Javascript",
"Frontend",
"Backend",
"Testing",
"Database",
"Programming Language",
"Version Control",
@ng-the-engineer
ng-the-engineer / deployment.yaml
Created May 4, 2021 19:39
Code snippet of tutorial node api k8s
apiVersion: apps/v1
kind: Deployment
metadata:
name: tutorial-node-api-k8s
spec:
replicas: 2
selector:
matchLabels:
name: tutorial-node-api-k8s
template:
@ng-the-engineer
ng-the-engineer / okteto-pipeline.yaml
Created May 4, 2021 16:21
Code snippet of tutorial node api k8s
deploy:
- okteto build -t okteto.dev/tutorial-node-api-k8s:latest
- kubectl apply -f k8s
@ng-the-engineer
ng-the-engineer / service.yaml
Created May 4, 2021 16:10
Code snippet of tutorial node api k8s
apiVersion: v1
kind: Service
metadata:
name: tutorial-node-api-k8s
labels:
name: tutorial-node-api-k8s
annotations:
dev.okteto.com/auto-ingress: "true"
spec:
type: ClusterIP