340 lines
13 KiB
HTML
340 lines
13 KiB
HTML
<!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>
|