Published
Edited
Jul 14, 2021
//importo d3
d3 = require("d3@6")
data = d3.csvParse(await FileAttachment("Locales_compras_montos.csv").text(), d3.autoType)
selector_local =
{
var lista = ["Todos"];
for (var it = 0; it < locales.length; it = it+1){
lista.push(locales[it])
}
return lista.sort()
}
function filtro_local(row) {
//return (clase === 'Todos') || (row.Location === clase);
return (clase.includes('Todos')) || (clase.includes(row.Location));
}
viewof clase = select({
title: "Seleccion de Locales",
description: "Selecciona los locales que desees visualizar",
options: selector_local,
multiple: true,
value: "Todos"
})
x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.Compras)])
.range([margin.left, width - margin.right])
y = d3.scaleBand()
.domain(data.map(d => d.Location))
.range([margin.top, height - margin.bottom])
.padding(0.1)
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(width / 80, data.format))
.call(g => g.select(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
color = d3.scaleSequential() // Escala secuencial en d3
.domain([0, d3.max(data, d => d.Monto)]) // Rango: 0->max(cantidad)
.interpolator(d3.interpolateRgb("lightblue", "blue")) // Interpolar colores celeste-azul
d3.max(data, d => d.Monto)
barHeight = 25
height = 570
margin = ({top: 30, right: 0, bottom: 10, left: 140})
format = x.tickFormat(20, data.format)
color_pie = d3.scaleOrdinal()
.domain(data.map(d => d.Location))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())
height_pie = Math.min(width, 500)
arc = d3.arc()
.innerRadius(0)
.outerRadius(Math.min(width, height_pie) / 2 - 1)
arcLabel = {
const radius = Math.min(width, height_pie) / 2 * 0.8;
return d3.arc().innerRadius(radius).outerRadius(radius);
}
pie = d3.pie()
.sort(null)
.value(d => d.Monto)
md`## Para los horarios de compra por local`
x2 = d3.scaleLinear() // Escala lineal
.domain([0, d3.max(data2, d => d.Horaminuto)])// requiere un dominio 0 -> max(cantidad)
.range([margin2.left, width - margin2.right]) // y un rango en la gráfica: márgenes laterales
d3.max(data2, d => d.Horaminuto)
y2 = d3.scaleBand() // Escala por bandas
.domain(data.map(d => d.Location)) // requiere un dominio (nombres de frutas)
.range([margin2.top, height2 - margin2.bottom]) // y un rango en la gráfica: márgenes sup/inf
//.padding(0.1)
radio = d3.scaleLinear() // Escala lineal
.domain([d3.min(data2, d => d.Compras), d3.max(data2, d => d.Compras)])// requiere un dominio 0 -> max(cantidad)
.range([2,10]) // y un rango en la gráfica: márgenes laterales
height2 = 570
margin2 = ({top: 15, right: 0, bottom: 30, left: 140})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
