...
 
Commits (2)
......@@ -26,3 +26,37 @@
.figure-number {
display: none;
}
.icon-play {
position: relative;
z-index: 1
}
.metro-animation {
margin-top: -20px;
display: block;
height: 300px;
}
// Metro style
.metro-graph {
position: relative;
z-index: 0;
margin-top: -20px;
width: 47%;
height: 100%;
display: inline-block;
}
.metro-git-container {
display: inline-block;
font-family: 'Source Code Pro', monospace;
width: 45%;
height: 100%;
overflow: auto;
span {
display: block
;
}
}
......@@ -24,9 +24,18 @@ i {
-moz-osx-font-smoothing: grayscale;
}
.fa-play:before {
content: "\f04b";
}
.fa-pause:before {
content: "\f04c";
}
.fa-github:before {
content: "\f09b";
}
.fa-gitlab:before {
content: "\f296";
}
......@@ -3,10 +3,12 @@
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="fa_slim" horiz-adv-x="1024">
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="877.7142857142858" descent="-146.28571428571428" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="256" d="" />
<glyph unicode="&#xf09b;" glyph-name="github" d="M438.857 790.857q119.429 0 220.286-58.857t159.714-159.714 58.857-220.286q0-143.429-83.714-258t-216.286-158.571q-15.429-2.857-22.857 4t-7.429 17.143q0 1.714 0.286 43.714t0.286 76.857q0 55.429-29.714 81.143 32.571 3.429 58.571 10.286t53.714 22.286 46.286 38 30.286 60 11.714 86q0 68-45.143 117.714 21.143 52-4.571 116.571-16 5.143-46.286-6.286t-52.571-25.143l-21.714-13.714q-53.143 14.857-109.714 14.857t-109.714-14.857q-9.143 6.286-24.286 15.429t-47.714 22-48.571 7.714q-25.714-64.571-4.571-116.571-45.143-49.714-45.143-117.714 0-48.571 11.714-85.714t30-60 46-38.286 53.714-22.286 58.571-10.286q-22.286-20.571-28-58.857-12-5.714-25.714-8.571t-32.571-2.857-37.429 12.286-31.714 35.714q-10.857 18.286-27.714 29.714t-28.286 13.714l-11.429 1.714q-12 0-16.571-2.571t-2.857-6.571 5.143-8 7.429-6.857l4-2.857q12.571-5.714 24.857-21.714t18-29.143l5.714-13.143q7.429-21.714 25.143-35.143t38.286-17.143 39.714-4 31.714 2l13.143 2.286q0-21.714 0.286-50.571t0.286-31.143q0-10.286-7.429-17.143t-22.857-4q-132.571 44-216.286 158.571t-83.714 258q0 119.429 58.857 220.286t159.714 159.714 220.286 58.857zM166.286 160.571q1.714 4-4 6.857-5.714 1.714-7.429-1.143-1.714-4 4-6.857 5.143-3.429 7.429 1.143zM184 141.143q4 2.857-1.143 9.143-5.714 5.143-9.143 1.714-4-2.857 1.143-9.143 5.714-5.714 9.143-1.714zM201.143 115.429q5.143 4 0 10.857-4.571 7.429-9.714 3.429-5.143-2.857 0-10.286t9.714-4zM225.143 91.429q4.571 4.571-2.286 10.857-6.857 6.857-11.429 1.714-5.143-4.571 2.286-10.857 6.857-6.857 11.429-1.714zM257.714 77.143q1.714 6.286-7.429 9.143-8.571 2.286-10.857-4t7.429-8.571q8.571-3.429 10.857 3.429zM293.714 74.286q0 7.429-9.714 6.286-9.143 0-9.143-6.286 0-7.429 9.714-6.286 9.143 0 9.143 6.286zM326.857 80q-1.143 6.286-10.286 5.143-9.143-1.714-8-8.571t10.286-4.571 8 8z" />
<glyph unicode="&#xf296;" glyph-name="gitlab" d="M59.429 460.571l452.571-580-496 360q-10.286 7.429-14.286 19.714t0 24.286l57.714 176zM323.429 460.571h377.143l-188.571-580zM210.286 810.286l113.143-349.714h-264l113.143 349.714q4.571 13.143 18.857 13.143t18.857-13.143zM964.571 460.571l57.714-176q4-12 0-24.286t-14.286-19.714l-496-360 452.571 580zM964.571 460.571h-264l113.143 349.714q4.571 13.143 18.857 13.143t18.857-13.143z" />
<glyph unicode="&#xf04b;" glyph-name="play" horiz-adv-x="809" d="M790.857 348l-758.857-421.714c-17.714-9.714-32-1.143-32 18.857v841.143c0 20 14.286 28.571 32 18.857l758.857-421.714c17.714-9.714 17.714-25.714 0-35.429z" />
<glyph unicode="&#xf04c;" glyph-name="pause" horiz-adv-x="878" d="M877.714 768v-804.571c0-20-16.571-36.571-36.571-36.571h-292.571c-20 0-36.571 16.571-36.571 36.571v804.571c0 20 16.571 36.571 36.571 36.571h292.571c20 0 36.571-16.571 36.571-36.571zM365.714 768v-804.571c0-20-16.571-36.571-36.571-36.571h-292.571c-20 0-36.571 16.571-36.571 36.571v804.571c0 20 16.571 36.571 36.571 36.571h292.571c20 0 36.571-16.571 36.571-36.571z" />
<glyph unicode="&#xf09b;" glyph-name="github" horiz-adv-x="878" d="M438.857 804.571c242.286 0 438.857-196.571 438.857-438.857 0-193.714-125.714-358.286-300-416.571-22.286-4-30.286 9.714-30.286 21.143 0 14.286 0.571 61.714 0.571 120.571 0 41.143-13.714 67.429-29.714 81.143 97.714 10.857 200.571 48 200.571 216.571 0 48-17.143 86.857-45.143 117.714 4.571 11.429 19.429 56-4.571 116.571-36.571 11.429-120.571-45.143-120.571-45.143-34.857 9.714-72.571 14.857-109.714 14.857s-74.857-5.143-109.714-14.857c0 0-84 56.571-120.571 45.143-24-60.571-9.143-105.143-4.571-116.571-28-30.857-45.143-69.714-45.143-117.714 0-168 102.286-205.714 200-216.571-12.571-11.429-24-30.857-28-58.857-25.143-11.429-89.143-30.857-127.429 36.571-24 41.714-67.429 45.143-67.429 45.143-42.857 0.571-2.857-26.857-2.857-26.857 28.571-13.143 48.571-64 48.571-64 25.714-78.286 148-52 148-52 0-36.571 0.571-70.857 0.571-81.714 0-11.429-8-25.143-30.286-21.143-174.286 58.286-300 222.857-300 416.571 0 242.286 196.571 438.857 438.857 438.857zM166.286 174.285c1.143 2.286-0.571 5.143-4 6.857-3.429 1.143-6.286 0.571-7.429-1.143-1.143-2.286 0.571-5.143 4-6.857 2.857-1.714 6.286-1.143 7.429 1.143zM184 154.857c2.286 1.714 1.714 5.714-1.143 9.143-2.857 2.857-6.857 4-9.143 1.714-2.286-1.714-1.714-5.714 1.143-9.143 2.857-2.857 6.857-4 9.143-1.714zM201.143 129.143c2.857 2.286 2.857 6.857 0 10.857-2.286 4-6.857 5.714-9.714 3.429-2.857-1.714-2.857-6.286 0-10.286s7.429-5.714 9.714-4zM225.143 105.143c2.286 2.286 1.143 7.429-2.286 10.857-4 4-9.143 4.571-11.429 1.714-2.857-2.286-1.714-7.429 2.286-10.857 4-4 9.143-4.571 11.429-1.714zM257.714 90.857c1.143 3.429-2.286 7.429-7.429 9.143-4.571 1.143-9.714-0.571-10.857-4s2.286-7.429 7.429-8.571c4.571-1.714 9.714 0 10.857 3.429zM293.714 88c0 4-4.571 6.857-9.714 6.286-5.143 0-9.143-2.857-9.143-6.286 0-4 4-6.857 9.714-6.286 5.143 0 9.143 2.857 9.143 6.286zM326.857 93.714c-0.571 3.429-5.143 5.714-10.286 5.143-5.143-1.143-8.571-4.571-8-8.571 0.571-3.429 5.143-5.714 10.286-4.571s8.571 4.571 8 8z" />
<glyph unicode="&#xf296;" glyph-name="gitlab" d="M59.429 474.285l452.571-580-496 360c-13.714 10.286-19.429 28-14.286 44l57.714 176zM323.429 474.285h377.143l-188.571-580zM210.286 824l113.143-349.714h-264l113.143 349.714c6.286 17.714 31.429 17.714 37.714 0zM964.571 474.285l57.714-176c5.143-16-0.571-33.714-14.286-44l-496-360 452.571 580zM964.571 474.285h-264l113.143 349.714c6.286 17.714 31.429 17.714 37.714 0z" />
</font></defs></svg>
\ No newline at end of file
......@@ -11,6 +11,10 @@
{% css main %}
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900,400italic%7CSignika:700,300,400,600' rel='stylesheet' type='text/css'>
{% for style in page.styles %}
<link href="{{ style }}https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
{% endfor %}
<!-- <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet"> -->
<!-- RSS -->
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Blog zezin" />
......
{% js main %}
{% if page.custom_js %}
{% for js_file in page.custom_js %}
<script src='{{ js_file }}' type="text/javascript"></script>
{% endfor %}
{% endif %}
This diff is collapsed.
#+begin_EXPORT html
---
layout: post
title: Converting subway lines to git graph
comments: false
categories:
- programming
tags:
- clojure
- subway
---
#+jND_EXPORT
#+OPTIONS: ^:nil
Always when studying a new technology, try to do a practical example
In the case of clojure, it could be because of MetroGit
I was thinking about something so silly but at the same time so ingenous could be a good example
Dealing with git and graph algorithms could be a nice way to fit this new use case
A question came to my mind: Why don't we have a generic input with subway lines and stations and in the end,
it would output the required git commands to build a tree
Do you know the old saying that says destroy_hiroshima a good programmer would write destroy_city
buid_subway_paris build_subway_city(city)
* proposal
We gotta go from this:
Show the image of the subway from SP
To this:
Show the git command
At first, it looks easy, but we can't bring any cycles, have a context of visited stations, and outputs the git commands
always that we have a
* proposed algorithm
now this is the place for the animations
look for the predecessors
* nyc: the nemesis of the subways
to see if the algorithm really works, i tried to test with the bigger subway system of the world
a lot of cycles were introduced, so we always had to check this
also I built a parser of the page and the page introduced a lot of inconsistencies
check this link out and see for yourself.
* advantages of clojure
the same code that is built to create the git commands is used to create these animations. it's amazing
sorry about the cpu usage of these animations, i didn't have the time to optimize
metro-seq is awesome
Advantage of using something like clojure
metro-seq example, employ purity so the algorithms flows nicely
polimorphism is not restricted to object oriented languages.
in clojure a functional language it is achieved with protocols
show how map, count, etc. are all used
currently, there are only _sao paulo_ and _new york city_ implemented,
open _an issue_ if you would like to include your city in the list
anyway, thanks for reading this and sorry about the cpu usage of these animations.
#+BEGIN_EXPORT html
<h1>Hi</h1>
#+END_EXPORT
document.addEventListener('DOMContentLoaded', function(){
// var building1 = [{name: "Red", stations: ["A", "C", "D"]},
// {name: "Green", stations: ["B", "C", "E"]}];
var building1 = [{name: "Red", stations: ["A", "B"]},
{name: "Green", stations: ["C", "B"]}];
var building1Container = {
graph_container: "build-1",
};
metro.animations.build_animation(building1Container, building1, {git_container: false})
var containers = {
graph_container: "graph-simple",
git_container: "commands-simple",
timeout: 500
};
var configSimple = [{name: "Red", stations: ["A", "B", "C"]},
{name: "Blue", stations: ["D", "B", "E"]},
{name: "Green", stations: ["F", "B", "G"]}];
var state1 = metro.animations.build_animation(containers, configSimple)
metro.animations.stop_animation(state1);
document.getElementById("metro-play-button").addEventListener("click", function(event) {
var element = event.target;
if(element.classList.contains('fa-play')) {
element.classList.remove('fa-play');
element.classList.add('fa-pause');
metro.animations.start_animation(state1);
} else {
element.classList.remove('fa-pause');
element.classList.add('fa-play');
metro.animations.stop_animation(state1);
}
});
}, false);
/home/guilherme/Projects/metro-clojure/prod/main.js
\ No newline at end of file
/home/guilherme/Projects/metro-clojure/prod/main.js.map
\ No newline at end of file