Public
Edited
May 5, 2023
1 fork
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)"])
// Resolución ejercicio a)
swatches(["#D00000", "#FFBA08", "#3fc44a", "#1B3CDD","#9217f0"])
viewof c1_steps = slider({
min: 0,
max: 25,
step: 1,
value: 10,
title: "Cantidad de colores",
description: "Control para la cantidad de colores a visualizar en la paleta."
})
color1 = d3.quantize(d3.interpolateHcl("#362142","#f4e153"), c1_steps)
swatches(color1)
viewof c2_steps = slider({
min: 0,
max: 25,
step: 1,
value: 10,
title: "Cantidad de colores",
description: "Control para la cantidad de colores a visualizar en la paleta."
})
color2 = d3.quantize(d3.interpolateHcl("#DF9216","#806862"), c2_steps)
swatches(color2)
viewof c3_steps = slider({
min: 0,
max: 25,
step: 1,
value: 10,
title: "Cantidad de colores",
description: "Control para la cantidad de colores a visualizar en la paleta."
})
color3 = d3.quantize(d3.interpolateHcl("#041733","#c8f5f3"), c3_steps)
swatches(color3)
viewof lum_steps = slider({
min: 0,
max: 1,
step: 0.1,
value: 1,
title: "Luminosidad",
description: "Control para la luminosidad del color."
})
// Resolución ejercicio b)
viewof c4_steps = slider({
min: 0,
max: 25,
step: 1,
value: 10,
title: "Cantidad de colores",
description: "Control para la cantidad de colores a visualizar en la paleta."
})
color4 = d3.quantize(d3.interpolateHcl("#041733","#c8f5f3"), c4_steps)
swatches(color4)
// Link a csv con info sobre libros de Harry Potter en Git
iris=d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv",d3.autoType)
reformattediris = iris.map(function(obj){
var rObj = {};
rObj['Longitud_Sepalo'] = obj.Sepal_Length;
rObj['Longitud_Petalo'] = obj.Petal_Length;
rObj['Area_Petalo'] = (obj.Petal_Length*obj.Petal_Width)/2;
rObj['Species'] = obj.Species;
return rObj;
});
// Resolución ejercicio d)
height = 400
width = 400 // el ancho d3 lo pone por default
//margin = ({top: 20, right: 20, bottom: 120, left: 40})
margin = ({top: 20, right: 20, bottom: 120, left: 40})
x = d3.scaleLinear() // Escala lineal
.domain([0, d3.max(reformattediris, d => d.Longitud_Sepalo)])// requiere un dominio 0 -> max(cantidad)
.range([margin.left, width - margin.right]) // y un rango en la gráfica: márgenes laterales
y = d3.scaleLinear() // Escala lineal
.domain([0, d3.max(reformattediris, d => d.Longitud_Petalo)])// requiere un dominio 0 -> max(cantidad)
.range([height - margin.bottom, margin.top]) // y un rango en la gráfica: márgenes laterales
d3.max(reformattediris, d => d.Longitud_Sepalo)
d3.max(reformattediris, d => d.Longitud_Petalo)
x.domain()
y.domain()
x(5.1)
y(1.5)
// Resoluciín ejercicio e)
//margenes = ({top: 20, right: 20, bottom: 30, left: 40})
tipo=({'setosa':'blue','versicolor':'orange','virginica':'green'})
xAxis = function (g){
return g.attr("transform", `translate(0,${height - margin.bottom})`) // Esta línea llama al método transform y a translate y "desplaza" el eje dibujado desde 0 y movido sobre el eje Y en height - margin.bottom pixeles
.call(d3.axisBottom(x))
}
// Eje y, prueben el efecto de reemplazar {margin.left} por {width - margin.right}
// y {d3.axisLeft(y)} por {d3.axisRight(y)}
yAxis = function (g){ return g.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))}
//({'setosa':'blue','versicolor':'orange','virginica':'green'})
Swatches(d3.scaleOrdinal(["setosa", "versicolor", "virginica"], d3.schemeCategory10))
chart1 = {
// 1. Canvas
const svg = d3.create("svg")
//.attr("viewBox", [0, 0, width, height]);
.attr('width',400)
.attr('height',400)
// 2. Dibujamos eje x
svg.append("g")
.call(xAxis) // Llamada a la función que sabe dibujar el eje x
.selectAll("text") // Editamos las etiquedas del eje, primero seleccionamos el text
.style("font","11px sans-serif") // Fuente
.style("text-anchor", "end") // Indentación de texto a derecha
.attr("dx", "-.8em") // Pequeño desplazamiento en x e y para que no tape el eje
.attr("dy", ".15em")
//.attr("transform", "rotate(-65)" ); // Rotación - prueben cambiar el ángulo
// 3. Dibujamos eje y
svg.append("g")
.call(yAxis) // Llamada a la función que sabe dibujar el eje y
.selectAll("text") // Editamos las etiquedas del eje, primero seleccionamos el text
.style("font","11px sans-serif") // Fuente
.style("text-anchor", "end") // Indentación de texto a derecha
.attr("dx", "-.8em") // Pequeño desplazamiento en x e y para que no tape el eje
.attr("dy", ".15em")
// Dibujamos los circulos
svg.append("g")
// function(d) {return d.color;}
// .attr("fill", tipo[d => d.Species])
//.attr("fill", "Stillblue")
.selectAll("circle")
.data(reformattediris) // Una barra por cada fila
.join("circle")
.attr("cx", d => x(d.Longitud_Sepalo))
.attr("cy", d => y(d.Longitud_Petalo))
.attr("r", 3)
.attr("fill", d => tipo[d.Species])
//.attr("stroke", "orange")
//.attr("color",d => d.Species)
return svg.node()
}
import {Swatches} from "@d3/color-legend"
tipo['setosa']
x(5.1)
y(1.4)
// Resolución ejercicio f)
rad=({'setosa':3,'versicolor':0.75,'virginica':0.5})
//({'setosa':'blue','versicolor':'orange','virginica':'green'})
Swatches(d3.scaleOrdinal(["setosa", "versicolor", "virginica"], d3.schemeCategory10))
chart2 = {
// 1. Canvas
const svg = d3.create("svg")
//.attr("viewBox", [0, 0, width, height]);
.attr('width',400)
.attr('height',400)
// 2. Dibujamos eje x
svg.append("g")
.call(xAxis) // Llamada a la función que sabe dibujar el eje x
.selectAll("text") // Editamos las etiquedas del eje, primero seleccionamos el text
.style("font","11px sans-serif") // Fuente
.style("text-anchor", "end") // Indentación de texto a derecha
.attr("dx", "-.8em") // Pequeño desplazamiento en x e y para que no tape el eje
.attr("dy", ".15em")
//.attr("transform", "rotate(-65)" ); // Rotación - prueben cambiar el ángulo
// 3. Dibujamos eje y
svg.append("g")
.call(yAxis) // Llamada a la función que sabe dibujar el eje y
.selectAll("text") // Editamos las etiquedas del eje, primero seleccionamos el text
.style("font","11px sans-serif") // Fuente
.style("text-anchor", "end") // Indentación de texto a derecha
.attr("dx", "-.8em") // Pequeño desplazamiento en x e y para que no tape el eje
.attr("dy", ".15em")
// Dibujamos los circulos
svg.append("g")
// function(d) {return d.color;}
// .attr("fill", tipo[d => d.Species])
//.attr("fill", "Stillblue")
.selectAll("circle")
.data(reformattediris) // Una barra por cada fila
.join("circle")
.attr("cx", d => x(d.Longitud_Sepalo))
.attr("cy", d => y(d.Longitud_Petalo))
.attr("r", d => (d.Area_Petalo)*rad[d.Species]) // para mejorar la escala aplico un coef al area
.attr("fill", d => tipo[d.Species])
//.attr("stroke", "orange")
//.attr("color",d => d.Species)
return svg.node()
}
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.