commit cc07168ab1a82a943eefed0c749729b2db790fac
parent 480dbf469e16d5fa874b0b2bba7615e806b1b225
Author: l0bsterz <hide4653@gmail.com>
Date: Thu, 17 Sep 2020 02:25:54 +0000
added d3 change
Diffstat:
6 files changed, 236 insertions(+), 230 deletions(-)
diff --git a/Pixle_Font.ttf b/Pixle_Font.ttf
Binary files differ.
diff --git a/css/style.css b/css/style.css
@@ -1,125 +0,0 @@
-@font-face {
- font-family: "Roboto Mono";
- src: url("../fonts/roboto-mono-medium.ttf");
-}
-
-:root {
- --font: "Roboto Mono";
- --background: #0f0e17;
- --foreground: #fffffe;
- --pink: #e53170;
- --red: #f25f4c;
- --orange: #ff8906;
- --branch: 1px solid #a7a9be;
-}
-
-html {
- font-size: 18px;
- overflow: hidden;
-}
-
-body {
- background: var(--background);
- width: 100vw;
- height: 100vh;
- margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.prompt {
- font-family: var(--font);
- color: var(--foreground);
-}
-
-.prompt~.prompt {
- padding: 1.5rem 0 0.3125rem;
-}
-
-span {
- color: var(--pink);
-}
-
-h1 {
- display: inline;
- font-family: var(--font);
- font-size: 1rem;
- font-weight: normal;
- color: var(--red);
- cursor: pointer;
-}
-
-.tree>ul {
- margin: 0;
- padding-left: 1rem;
-}
-
-ul {
- list-style: none;
- padding-left: 2.5rem;
-}
-
-li {
- position: relative;
-}
-
-li.hideChildren>ul {
- display: none;
-}
-
-li::before,
-li::after {
- content: "";
- position: absolute;
- left: -0.75rem;
-}
-
-li::before {
- border-top: var(--branch);
- top: 0.75rem;
- width: 0.5rem;
-}
-
-li::after {
- border-left: var(--branch);
- height: 100%;
- top: 0.25rem;
-}
-
-li:last-child::after {
- height: 0.5rem;
-}
-
-a {
- font-family: var(--font);
- font-size: 1rem;
- color: var(--foreground);
- text-decoration: none;
- outline: none;
-}
-
-a:hover,
-a:focus {
- color: var(--background);
- background: var(--orange);
-}
-
-form h1 {
- padding-left: 0.125rem;
-}
-
-/* you can fill the texarea above/below? the Viewport */
-#search {
- font-family: var(--font);
- font-size: 1rem;
- color: var(--foreground);
- background-color: var(--background);
- border: none;
- outline: none;
- position: absolute;
- width: 50vw;
- height: 50vh;
- word-break: break-all;
- resize: none;
-}-
\ No newline at end of file
diff --git a/d34.html b/d34.html
@@ -0,0 +1,236 @@
+
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
+ <link rel = "stylesheet" type = "text/css" href = "http://underd0g.co/projects/projectstyle.css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+
+
+</head>
+<body>
+ <style>
+
+ @font-face {
+ font-family: myfont;
+ src: url(slkscr.ttf);
+ font-size: 14px;
+ }
+
+body {
+ font-family: myfont;
+ font-weight: 300;
+ font-size: 1.2em;
+ line-height: 3.7em;
+ background: #222;
+}
+
+p{
+ background-color: #222;
+ color: white;
+
+}
+
+#top{
+ background: #222;
+}
+
+#col{
+
+}
+.text{
+ color:black;
+}
+
+/* */
+
+input {
+ width: 35%;
+ background: transparent;
+ border: none;
+ font-family: myfont;
+ font-size: 36;
+ color: #c0a79a;
+ padding-top: 150px;
+}
+
+input:focus {
+ outline: 0;
+}
+
+input::placeholder {
+ color: #fbfbfb;
+}
+#form-search {
+ margin: 1em 2em;
+}
+
+</style>
+
+
+ <div class="container"><center>
+ <form id="form-search" action="https://duckduckgo.com/" method="get" autocomplete="off">
+ <input id="search" placeholder="" type="text" name="q" autofocus="">
+ </form>
+ </center>
+ <div class="row" align='center'>
+ <div class="col-xsm-12" id = "col">
+
+ <script src="https://d3js.org/d3.v3.min.js"></script>
+
+ <script>
+
+ //Constants for the SVG
+ var width = 450,
+ height = 420;
+
+ //Set up the colour scale
+ var color = d3.scale.category20c()
+ // var color = d3.scaleOrdinal() // D3 Version 4
+ // .domain(["9", "7", "1"])
+ .range(["#87404f", "#615772" , "#4c9882"]);
+ //Set up the force layout
+ var force = d3.layout.force()
+ .gravity(0.03)
+ .charge(-240)
+ .linkDistance(100)
+ .size([width, height]);
+
+
+ //yes this is an svg
+ var svg = d3.select(".col-xsm-12").append("svg")
+ .attr("width", width)
+ .attr("height", height);
+
+
+ // hard-code some json
+ var graph = {
+ "nodes":[
+ {"name":"facebook","group":1, url: "https://facebook.com"},
+ {"name":"twitter","group":1, url: "https://twitter.com"},
+ {"name":"Reddit","group":1, url: "https://reddit.com"},
+ {"name":"youtube","group":9, url: "http://youtube.com"},
+ {"name":"gmail","group":9, url: "https://accounts.google.com/signin/v2/identifier?continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&service=mail&sacu=1&rip=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin"},
+ {"name":"wiki","group":9, url: "https://wikipedia.org"},
+ {"name":"l0bster","group":7, url: "https://l0bster.ru"},
+ {"name":"2f30","group":7,url:"https://2f30.org"}
+
+ ],
+ "links":[
+ {"source":1,"target":0,"value":1},
+ {"source":2,"target":0,"value":2},
+ {"source":4,"target":3,"value":3},
+ {"source":5,"target":4,"value":3},
+ {"source":5,"target":3,"value":4},
+ {"source":6,"target":5,"value":5},
+ {"source":6,"target":0,"value":5},
+ {"source":2,"target":1,"value":5},
+ {"source":7,"target":6,"value":5}
+
+
+ ]
+ }
+
+ //Creates the graph data structure out of the json data
+ force.nodes(graph.nodes)
+ .links(graph.links)
+ .start();
+
+ //Create all the line svgs but without locations yet
+ var link = svg.selectAll(".link")
+ .data(graph.links)
+ .enter().append("line")
+ .attr("class", "link")
+ .style("stroke-width", function (d) {
+ return Math.sqrt(d.value);
+ });
+
+ //Do the same with the circles for the nodes
+ var node = svg.selectAll(".node")
+ .data(graph.nodes)
+ .enter().append("g")
+ .attr("class", "node")
+ .call(force.drag);
+
+ node.append("circle")
+ .attr("r", 10)
+ .style("fill", function (d) {
+ return color(d.group);
+
+ })
+
+
+ //give my children some attributes!
+ node.each(function(d){
+ var thisNode = d3.select(this);
+
+ if (!d.children) {
+ thisNode.append("svg:a")
+ .attr("xlink:href",function(d) { return d.url; })
+ .attr("target", "_blank")
+ //.text(function(d) { return d.url; }) (this isnt clugy enough)
+ .append("text")
+ .attr("dx", 8)
+ .attr("dy", 3)
+ .attr("text-anchor", "start")
+
+
+ .text( function(d) { return d.name; });
+ } else {
+ thisNode.append("text")
+ .attr("dx", -8)
+ .attr("dy", 3)
+ .attr("text-anchor", "end")
+
+ .text(function(d) { return d.name; });
+ }
+ });
+
+
+ // force be with you
+ force.on("tick", function () {
+ link.attr("x1", function (d) {
+ return d.source.x;
+ })
+ .attr("y1", function (d) {
+ return d.source.y;
+ })
+ .attr("x2", function (d) {
+ return d.target.x;
+ })
+ .attr("y2", function (d) {
+ return d.target.y;
+ });
+
+ //Changed
+
+ d3.selectAll("circle").attr("cx", function (d) {
+ return d.x;
+ })
+ .attr("cy", function (d) {
+ return d.y;
+ });
+
+ d3.selectAll("text").attr("x", function (d) {
+
+ return d.x;
+ })
+ .attr("y", function (d) {
+ return d.y;
+ });
+ });
+
+
+ </script>
+
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+</body>
+</html>
diff --git a/fonts/roboto-mono-medium.ttf b/fonts/roboto-mono-medium.ttf
Binary files differ.
diff --git a/index.html b/index.html
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
- <meta charset="UTF-8">
- <link rel="stylesheet" type="text/css" href="css/style.css">
- <title>Home</title>
-</head>
-
-<body>
- <main>
- <div class="prompt">[<span data-Name>user</span>@<span>l0bster</span> ~]$ ls ++</div>
- <div class="tree">
- <h1>.</h1>
- <ul id="list">
- <li>
- <h1>[error]</h1>
- </li>
- </ul>
- </div>
- <div class="prompt">[<span data-Name>user</span>@<span>l0bster</span> ~]$ ddg</div>
-
- <form action="https://duckduckgo.com/" method="GET" autocomplete="off">
- <h1>search: </h1>
- <textarea type="text" name="q" id="search" wrap="hard" autofocus></textarea>
- </form>
- </main>
-</body>
-
-</html>
-
-<script src="script/script.js"></script>
diff --git a/script/script.js b/script/script.js
@@ -1,72 +0,0 @@
-const Config = {
- name: "user",
- scale: 1,
- Links: [
- [
- "Code",
- [
- ["github", "https://github.com/l0bsters"],
- ["w3s", "https://www.w3schools.com"]
- ]
- ],
- [
- ".Nix",
- [
- ["r/unix", "https://www.reddit.com/r/unixporn/"],
- ["d0tshareit", "http://www.dotshare.it"]
- ]
- ],
- [
- "Media",
- [
- ["vimeo", "https://www.vimeo.com"],
- ["youtube", "https://www.youtube.com"],
- ["TPB", "https://www.thepiratebay.org"]
- ]
- ],
- [
- "Misc",
- [
- ["digitalOcean", "https://www.digitalocean.com"],
- ["underd0g", "http://www.underd0g.co"],
- ["l0bster", "https://www.l0bster.ru"],
- ["2f30", "https://www.2f30.org"]
- ]
- ]
- ]
-}
-
-const Main = (() => {
- const list = document.getElementById("list");
- const names = document.querySelectorAll("[data-Name]");
- const search = document.getElementById("search");
- const form = document.forms[0];
-
- const init = () => {
- list.innerHTML = Config.Links.map(([gName, Links]) => `
- <li>
- <h1 onclick="this.parentNode.classList.toggle('hideChildren')">${gName}</h1>
- <ul>
- ${Links.map(([lName, url]) => `
- <li>
- <a href="${url}">${lName}</a>
- </li>`
- ).join("")}
- </ul>
- </li>`
- ).join("")
-
- names.forEach(el => {
- el.innerText = Config.name;
- });
-
- document.addEventListener("keydown", e => e.key.length === 1 && search.focus());
- search.addEventListener("keydown", () => (window.event ? event.keyCode : e.which) == 13 && form.submit());
- };
-
- return {
- init,
- };
-})();
-
-Main.init()
