ralsina/Functions
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
9692d7c100
Functions/nombres.ralsina.me/index.html

340 lines
13 KiB
HTML
Raw Blame History

<!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>
Reference in New Issue View Git Blame Copy Permalink