Scribd
Cargar
123 vistas2 páginas

Gráficos D3.js con CSV en HTML

El documento proporciona un ejemplo completo de cómo leer un archivo CSV y crear gráficos interactivos utilizando la biblioteca D3.js en un archivo HTML. Se muestra código para leer datos de un archivo CSV ubicado en la carpeta actual y crear un gráfico de barras y uno de líneas para visualizar los datos. Abriendo el archivo HTML en un navegador, los gráficos creados se mostrarán de forma interactiva en la página web.

Cargado por

ora
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
123 vistas2 páginas

Gráficos D3.js con CSV en HTML

El documento proporciona un ejemplo completo de cómo leer un archivo CSV y crear gráficos interactivos utilizando la biblioteca D3.js en un archivo HTML. Se muestra código para leer datos de un archivo CSV ubicado en la carpeta actual y crear un gráfico de barras y uno de líneas para visualizar los datos. Abriendo el archivo HTML en un navegador, los gráficos creados se mostrarán de forma interactiva en la página web.

Cargado por

ora
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd

¡Por supuesto!

Aquí te muestro un ejemplo completo de cómo leer un archivo CSV y


crear gráficos interactivos utilizando la biblioteca [Link] en un archivo HTML. Este
ejemplo cumple con los requisitos que mencionas: el archivo CSV debe estar ubicado
en la misma carpeta que el archivo HTML en el directorio C:/, y los gráficos se
pueden ver abriendo el archivo HTML con un navegador.

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi página web con datos CSV</title>

<!-- Agrega los estilos de la biblioteca [Link] -->


<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}

.bar {
fill: steelblue;
}

.bar:hover {
fill: brown;
}
</style>
</head>
<body>
<h1>Mi página web con datos CSV</h1>

<!-- Agrega un contenedor para los gráficos -->


<div id="graficos"></div>

<script src="[Link]
<script>
// Lee los datos desde el archivo CSV
[Link]("[Link]").then(function(data) {
// Convierte los valores de las columnas numéricas a números
[Link](function(d) {
d.Columna1 = +d.Columna1;
d.Columna2 = +d.Columna2;
d.Columna3 = +d.Columna3;
});

// Crea un gráfico de barras


var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - [Link] - [Link],
height = 500 - [Link] - [Link];

var x = [Link]()
.range([0, width])
.padding(0.1);

var y = [Link]()
.range([height, 0]);
var svg = [Link]("#graficos").append("svg")
.attr("width", width + [Link] + [Link])
.attr("height", height + [Link] + [Link])
.append("g")
.attr("transform", "translate(" + [Link] + "," + [Link] +
")");

[Link]([Link](function(d) { return d.Columna1; }));


[Link]([0, [Link](data, function(d) { return d.Columna2; })]);

[Link]("g")
.attr("class", "axis axis-x")
.attr("transform", "translate(0," + height + ")")
.call([Link](x));

[Link]("g")
.attr("class", "axis axis-y")
.call([Link](y).ticks(10, "%"))
.append("text")
.attr("class", "axis-title")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text("Columna2");

[Link](".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.Columna1); })
.attr("y", function(d) { return y(d.Columna2); })
.attr("width", [Link]())
.attr("height", function(d) { return height - y(d.Columna2); });

// Crea un gráfico de líneas


var line = [Link]()
.x(function(d) { return x(d.Columna1); })
.y(function(d) { return y(d.Columna3); });

[Link]("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
</script>
</body>
</html>
```

En este ejemplo, el archivo CSV "[Link]" debe estar ubicado en el directorio C:/
junto con el archivo HTML. La biblioteca [Link] se utiliza para leer los datos desde
el archivo CSV y crear dos gráficos: un gráfico de barras y un gráfico de líneas.

Para ver los gráficos, simplemente abre el archivo HTML en un navegador. Los
gráficos se mostrarán en la página web y serán interactivos (por ejemplo, puedes
hacer clic en las barras del gráfico de barras para resaltarlas).

También podría gustarte