viewof color_steps = slider({
min: 0,
max: 30,
step: 1,
value: 10,
title: "Cantidad de colores",
description: "Control para la cantidad de colores a visualizar en la paleta."
})
// Ejemplo, se pueden definir colores mediante HEX, nombre, HSL, RGB/RGBA
swatches(["#ff3399", "hotpink", "hsl(330, 100%, 70.5%)", "rgba(128, 0, 128, 0.2)"])
swatches(["#ff5b62", "#ffca4a", "#8cc835", "#1884c3", "#6a4d92"])
rojo = {
return d3.quantize(d3.interpolateRgbBasis(["#000217", "#ff0000", "#feba2b"]), color_steps);
}
swatches(rojo.slice(0, color_steps));
swatches(d3.quantize(d3.interpolateHcl("#eec5b6", "#784735"), color_steps))
swatches(d3.quantize(d3.interpolateHcl("#00035c", "#ccf0f8"), color_steps))
viewof lum_steps = slider({
min: 0,
max: 100,
step: 1,
value: 10,
title: "Luminosidad",
description: "Control para la luminosidad del color."
})
{
//Hue:16, Saturation: 62% a 84%, Luminosity: 82 a 34
var luminosidad = d3.interpolate(`hsl(16, 62%, ${0.82*lum_steps}%)`, `hsl(16, 84%, ${0.34*lum_steps}%)`);
var colors = d3.quantize(luminosidad, color_steps);
return swatches(colors)
}
color_especies = ({ "setosa": "#b00000", "versicolor": "#00b000", "virginica": "#0000b0"})
function procesar_datos(fila) {
delete fila.Sepal_Width
fila.longitud_sepalo = +fila.Sepal_Length
fila.longitud_petalo = +fila.Petal_Length
fila.especie = fila.Species
fila.area = fila.Petal_Length * fila.Petal_Width / 2;
fila.color = color_especies[fila.especie]
delete fila.Sepal_Length
delete fila.Petal_Length
delete fila.Petal_Width
delete fila.Species
return fila;
}
datos_iris = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv",procesar_datos)
ancho = 450
alto = 450
margen = ({arr: 25, der: 25, abj: 50, izq: 50})
x = d3.scaleLinear()
.domain([d3.min(datos_iris, d => d.longitud_sepalo), d3.max(datos_iris, d => d.longitud_sepalo)])
.range([margen.izq, ancho - margen.der]);
eje_x = function (g) { return g.attr("transform", `translate(0,${alto - margen.abj})`)
.call(d3.axisBottom(x))
.append('text')
.attr('class', 'axis-label')
.text("Longitud Sepalo")
.attr('x', margen.izq + (ancho - margen.izq - margen.der) / 2)
.attr('y', 10) // Relative to the x axis.)
}
y = d3.scaleLinear()
.domain([d3.min(datos_iris, d => d.longitud_petalo), d3.max(datos_iris, d => d.longitud_petalo)])
.range([alto - margen.abj, margen.arr]);
eje_y = function (g) { return g.attr("transform", `translate(${margen.izq},0)`)
.call(d3.axisLeft(y))}
d3Legend = require('d3-svg-legend')
max_area = d3.max(datos_iris, d => d.area);
min_area = d3.min(datos_iris, d => d.area)
import {legend} from "@d3/color-legend"
//Leyenda
leyenda= legend({
color: d3.scaleSequential([min_area, max_area], d3.interpolateLab("red","blue")),
title: "Area del Petalo"
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.