Nombres funciona completo sobre faaso
This commit is contained in:
parent
9821b58cce
commit
9692d7c100
@ -12,7 +12,7 @@ DBURL = "postgres://#{USER}:#{PASS}@#{DBHOST}:5432/nombres"
|
||||
puts "Connnecting to #{DBURL}"
|
||||
|
||||
# Create a connection pool to the database
|
||||
pg = ConnectionPool.new(capacity: 5, timeout: 0.2.seconds) do
|
||||
pg = ConnectionPool.new(capacity: 5, timeout: 1.seconds) do
|
||||
PG.connect(DBURL)
|
||||
end
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
name: busqueda
|
||||
runtime: kemal
|
||||
options:
|
||||
shard_build_options: "-d --error-trace"
|
||||
shard_build_options: "--release -d --error-trace"
|
||||
ship_packages: []
|
||||
devel_packages: []
|
||||
healthcheck_options: "--interval=1m --timeout=2s --start-period=2s --retries=3"
|
||||
|
||||
@ -25,3 +25,4 @@ faaso build historico
|
||||
faaso scale historico 0
|
||||
faaso scale historico 1
|
||||
|
||||
rsync -rav nombres.ralsina.me/* ralsina@pinky:/data/websites/nombres.ralsina.me/
|
||||
|
||||
@ -12,7 +12,7 @@ DBURL = "postgres://#{USER}:#{PASS}@#{DBHOST}:5432/nombres"
|
||||
puts "Connnecting to #{DBURL}"
|
||||
|
||||
# Create a connection pool to the database
|
||||
pg = ConnectionPool.new(capacity: 5, timeout: 0.2.seconds) do
|
||||
pg = ConnectionPool.new(capacity: 5, timeout: 1.seconds) do
|
||||
PG.connect(DBURL)
|
||||
end
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
name: historico
|
||||
runtime: kemal
|
||||
options:
|
||||
shard_build_options: "-d --error-trace"
|
||||
shard_build_options: "--release -d --error-trace"
|
||||
ship_packages: []
|
||||
devel_packages: []
|
||||
healthcheck_options: "--interval=1m --timeout=2s --start-period=2s --retries=3"
|
||||
|
||||
339
nombres.ralsina.me/index.html
Normal file
339
nombres.ralsina.me/index.html
Normal file
@ -0,0 +1,339 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://www.gstatic.com/charts/loader.js"
|
||||
></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<!-- Font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Kode+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script type="text/javascript">
|
||||
google.charts.load("current", { packages: ["corechart"] });
|
||||
google.charts.setOnLoadCallback(drawChart);
|
||||
|
||||
async function drawChart() {
|
||||
drawChart1();
|
||||
drawChart2();
|
||||
}
|
||||
|
||||
async function drawChart1() {
|
||||
fetch("https://faaso-prod.ralsina.me/faaso/busqueda/", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
p: document.getElementById("p").value,
|
||||
g: document.getElementById("g").value,
|
||||
a: document.getElementById("a").value,
|
||||
}),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((json) => {
|
||||
title = json["title"];
|
||||
data = json["data"];
|
||||
console.log(data);
|
||||
data = google.visualization.arrayToDataTable(data);
|
||||
var options = {
|
||||
title: title,
|
||||
titleTextStyle: {
|
||||
color: "#aaa",
|
||||
},
|
||||
animation: {
|
||||
startup: true,
|
||||
duration: 1000,
|
||||
easing: "out",
|
||||
},
|
||||
backgroundColor: "#1c212c",
|
||||
vAxis: {
|
||||
minValue: 0,
|
||||
gridlines: { color: "#666" },
|
||||
minorGridlines: { color: "#1c212c" },
|
||||
textStyle: { color: "#aaa" }
|
||||
},
|
||||
hAxis: {
|
||||
gridlines: { color: "#666" },
|
||||
minorGridlines: { color: "#1c212c" },
|
||||
textStyle: { color: "#aaa" }
|
||||
},
|
||||
legend: { position: 'none'},
|
||||
};
|
||||
|
||||
var chart1 = new google.visualization.BarChart(
|
||||
document.getElementById("chart1")
|
||||
);
|
||||
|
||||
chart1.draw(data, options);
|
||||
});
|
||||
}
|
||||
async function drawChart2() {
|
||||
fetch(
|
||||
"https://faaso-prod.ralsina.me/faaso/historico/?" +
|
||||
new URLSearchParams({
|
||||
names: document.getElementById("nombres").value,
|
||||
})
|
||||
)
|
||||
.then((response) => response.json())
|
||||
.then((json) => {
|
||||
var data = [json[0]];
|
||||
data.push(
|
||||
...json
|
||||
.slice(1)
|
||||
.map((item) => item.map((value) => parseInt(value)))
|
||||
);
|
||||
data = google.visualization.arrayToDataTable(data);
|
||||
var options = {
|
||||
title: "",
|
||||
animation: {
|
||||
startup: true,
|
||||
duration: 1000,
|
||||
easing: "out",
|
||||
},
|
||||
backgroundColor: "#1c212c",
|
||||
vAxis: {
|
||||
minValue: 0,
|
||||
gridlines: { color: "#666" },
|
||||
minorGridlines: { color: "#1c212c" },
|
||||
textStyle: { color: "#aaa" }
|
||||
},
|
||||
hAxis: {
|
||||
gridlines: { color: "#666" },
|
||||
minorGridlines: { color: "#1c212c" },
|
||||
textStyle: { color: "#aaa" }
|
||||
},
|
||||
legend: { position: "bottom", textStyle: { color: "#aaa" } },
|
||||
};
|
||||
|
||||
var chart2 = new google.visualization.LineChart(
|
||||
document.getElementById("chart2")
|
||||
);
|
||||
|
||||
chart2.draw(data, options);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
html * {
|
||||
font-family: "Quicksand", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container" style="text-align: center">
|
||||
<header>
|
||||
<h1>Cosas con Datos de Nombres de Argentina</h1>
|
||||
<h2>Adivinar nombres por edad y género</h2>
|
||||
</header>
|
||||
<div id="chart1" style="width: 80vw; height: 50vh; margin: auto"></div>
|
||||
<form
|
||||
onSubmit="return false;"
|
||||
style="margin: auto; margin-top: 2em; width: 80%"
|
||||
>
|
||||
<fieldset class="grid">
|
||||
<input type="text" name="p" id="p" placeholder="Como empieza tu nombre?" />
|
||||
<select name="a" id="a">
|
||||
<option selected value="">Año?</option>
|
||||
<option value="1922">1922</option>
|
||||
<option value="1923">1923</option>
|
||||
<option value="1924">1924</option>
|
||||
<option value="1925">1925</option>
|
||||
<option value="1926">1926</option>
|
||||
<option value="1927">1927</option>
|
||||
<option value="1928">1928</option>
|
||||
<option value="1929">1929</option>
|
||||
<option value="1930">1930</option>
|
||||
<option value="1931">1931</option>
|
||||
<option value="1932">1932</option>
|
||||
<option value="1933">1933</option>
|
||||
<option value="1934">1934</option>
|
||||
<option value="1935">1935</option>
|
||||
<option value="1936">1936</option>
|
||||
<option value="1937">1937</option>
|
||||
<option value="1938">1938</option>
|
||||
<option value="1939">1939</option>
|
||||
<option value="1940">1940</option>
|
||||
<option value="1941">1941</option>
|
||||
<option value="1942">1942</option>
|
||||
<option value="1943">1943</option>
|
||||
<option value="1944">1944</option>
|
||||
<option value="1945">1945</option>
|
||||
<option value="1946">1946</option>
|
||||
<option value="1947">1947</option>
|
||||
<option value="1948">1948</option>
|
||||
<option value="1949">1949</option>
|
||||
<option value="1950">1950</option>
|
||||
<option value="1951">1951</option>
|
||||
<option value="1952">1952</option>
|
||||
<option value="1953">1953</option>
|
||||
<option value="1954">1954</option>
|
||||
<option value="1955">1955</option>
|
||||
<option value="1956">1956</option>
|
||||
<option value="1957">1957</option>
|
||||
<option value="1958">1958</option>
|
||||
<option value="1959">1959</option>
|
||||
<option value="1960">1960</option>
|
||||
<option value="1961">1961</option>
|
||||
<option value="1962">1962</option>
|
||||
<option value="1963">1963</option>
|
||||
<option value="1964">1964</option>
|
||||
<option value="1965">1965</option>
|
||||
<option value="1966">1966</option>
|
||||
<option value="1967">1967</option>
|
||||
<option value="1968">1968</option>
|
||||
<option value="1969">1969</option>
|
||||
<option value="1970">1970</option>
|
||||
<option value="1971">1971</option>
|
||||
<option value="1972">1972</option>
|
||||
<option value="1973">1973</option>
|
||||
<option value="1974">1974</option>
|
||||
<option value="1975">1975</option>
|
||||
<option value="1976">1976</option>
|
||||
<option value="1977">1977</option>
|
||||
<option value="1978">1978</option>
|
||||
<option value="1979">1979</option>
|
||||
<option value="1980">1980</option>
|
||||
<option value="1981">1981</option>
|
||||
<option value="1982">1982</option>
|
||||
<option value="1983">1983</option>
|
||||
<option value="1984">1984</option>
|
||||
<option value="1985">1985</option>
|
||||
<option value="1986">1986</option>
|
||||
<option value="1987">1987</option>
|
||||
<option value="1988">1988</option>
|
||||
<option value="1989">1989</option>
|
||||
<option value="1990">1990</option>
|
||||
<option value="1991">1991</option>
|
||||
<option value="1992">1992</option>
|
||||
<option value="1993">1993</option>
|
||||
<option value="1994">1994</option>
|
||||
<option value="1995">1995</option>
|
||||
<option value="1996">1996</option>
|
||||
<option value="1997">1997</option>
|
||||
<option value="1998">1998</option>
|
||||
<option value="1999">1999</option>
|
||||
<option value="2000">2000</option>
|
||||
<option value="2001">2001</option>
|
||||
<option value="2002">2002</option>
|
||||
<option value="2003">2003</option>
|
||||
<option value="2004">2004</option>
|
||||
<option value="2005">2005</option>
|
||||
<option value="1966">1966</option>
|
||||
<option value="1967">1967</option>
|
||||
<option value="1968">1968</option>
|
||||
<option value="1969">1969</option>
|
||||
<option value="1970">1970</option>
|
||||
<option value="1971">1971</option>
|
||||
<option value="1972">1972</option>
|
||||
<option value="1973">1973</option>
|
||||
<option value="1974">1974</option>
|
||||
<option value="1975">1975</option>
|
||||
<option value="1976">1976</option>
|
||||
<option value="1977">1977</option>
|
||||
<option value="1978">1978</option>
|
||||
<option value="1979">1979</option>
|
||||
<option value="1980">1980</option>
|
||||
<option value="1981">1981</option>
|
||||
<option value="1982">1982</option>
|
||||
<option value="1983">1983</option>
|
||||
<option value="1984">1984</option>
|
||||
<option value="1985">1985</option>
|
||||
<option value="1986">1986</option>
|
||||
<option value="1987">1987</option>
|
||||
<option value="1988">1988</option>
|
||||
<option value="1989">1989</option>
|
||||
<option value="1990">1990</option>
|
||||
<option value="1991">1991</option>
|
||||
<option value="1992">1992</option>
|
||||
<option value="1993">1993</option>
|
||||
<option value="1994">1994</option>
|
||||
<option value="1995">1995</option>
|
||||
<option value="1996">1996</option>
|
||||
<option value="1997">1997</option>
|
||||
<option value="1998">1998</option>
|
||||
<option value="1999">1999</option>
|
||||
<option value="2000">2000</option>
|
||||
<option value="2001">2001</option>
|
||||
<option value="2002">2002</option>
|
||||
<option value="2003">2003</option>
|
||||
<option value="2004">2004</option>
|
||||
<option value="2005">2005</option>
|
||||
</select>
|
||||
<select name="g" id="g" />
|
||||
<option selected value="">Género?</option>
|
||||
<option value="f">Femenino</option>
|
||||
<option value="m">Masculino</option>
|
||||
</select>
|
||||
<input type="submit" value="Buscar" onCLick="drawChart1();" />
|
||||
</fieldset>
|
||||
</form>
|
||||
</main>
|
||||
<main class="container" style="text-align: center">
|
||||
<header>
|
||||
<h2>Popularidad de Nombres en Argentina</h2>
|
||||
</header>
|
||||
<div id="chart2" style="width: 80vw; height: 50vh; margin: auto"></div>
|
||||
<form
|
||||
role="search"
|
||||
onSubmit="return false;"
|
||||
style="margin: auto; margin-top: 2em; width: 80%"
|
||||
>
|
||||
<input
|
||||
type="search"
|
||||
name="nombres"
|
||||
id="nombres"
|
||||
placeholder="Nombres separados con comas"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<input type="submit" value="Buscar" onCLick="drawChart2();" />
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<main class="container">
|
||||
<header>
|
||||
<h2>Cosas Nerds</h2>
|
||||
</header>
|
||||
<ul>
|
||||
<li>Los datos utilizados son provistos por el RENAPER (Registro Nacional de las Personas), y sólo son útiles para Argentina: <a href="http://www.datos.gob.ar/dataset/otros-nombres-personas-fisicas">Los Datos</a>
|
||||
<li>Le saqué todos los acentos a la data. Después de todo, si te llamás María y te digo Maria no te vas a ofender.
|
||||
<li>Había una página del RENAPER que hacía algo parecido pero era una porquería. Ahora hay otra que ni miré.
|
||||
<li>La data no es perfecta. En el caso de algunos nombres muy peculiares están duplicados. Por ejemplo, mi cuñado se llama "Pedro Fuat", y hay dos registros en el mismo año. Sospecho que es un duplicado de él mismo. Nota de color: los tres hijos de mi suegra tienen nombres que nadie más tiene en la historia de la Argentina.
|
||||
<li>Los datos están publicados de manera conveniente <a href="https://www.dolthub.com/repositories/ralsina/nombres_argentina_1922_2005/doc/main">en dolthub.</a>
|
||||
<li>La detección de género está hecha en base a datos del INE de España (lista de los nombres de personas nacidas en España con más de 20 ocurrencias)
|
||||
<li>Si alguien tiene data similar de otros países me encantaría hacer páginas similares.
|
||||
<li>Si les interesa es muy fácil hacer un Jupyter Notebook para jugar con estos datos.
|
||||
<li>Código y cosas: https://github.com/ralsina/nombres
|
||||
</ul>
|
||||
La aplicación consiste de:
|
||||
<ul>
|
||||
<li>Una página estática (ésta!)
|
||||
<li>Los charts SVG están hechos con Google Charts
|
||||
<li>El código de backend está hecho en Crystal
|
||||
<li>Todo está ejecutándose en una computadora categoría RaspBerry Pi usando <a href="faaso.ralsina.me">faaso</a> con una base de datos Postgres
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user