// Resolución ejercicio a)
swatches(d3.schemeSet1)
swatches(d3.quantize(d3.piecewise(d3.interpolateRgb.gamma(1.2), ["#000217", "#d0020c", "#feba2b"]), color_by));
swatches(d3.quantize(d3.interpolate("#eec5b6", "#784735"), color_pink));
swatches(d3.quantize(d3.interpolate("#000455", "#c5f2f8"), color_steps_b));
// Resolución ejercicio b)
swatches(d3.quantize(d3.interpolate(darken("#000455",lum_steps), darken("#c5f2f8",lum_steps)), color_steps_b));
function darken(color, k = 1) {
const {l, c, h} = d3.lch(color);
return d3.lch(l - 18 * k, c, h);
}
// Resolución ejercicio c)
data = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv",d3.autoType)
{
data.forEach(function(d){
d['longitud_sepalo'] = d['Sepal_Length'];
delete d['Sepal_Length'];
d['longitud_petalo'] = d['Petal_Length'];
delete d['Petal_Length'];
d['area_petalo'] = (d['longitud_petalo']*d['Petal_Width'])/2
})
return data
}
// Resolución ejercicio d)
y = d3.scaleLinear().domain([0, d3.max(data, d => d.longitud_sepalo)]).range([shape.height - margin.bottom, margin.top])
x = d3.scaleLinear().domain([0, d3.max(data, d => d.longitud_petalo)]).range([margin.right,shape.width - margin.left])
xAxis = function (g){
return g.attr("transform", `translate(0,${shape.height - margin.bottom})`)
.call(d3.axisBottom(x))
}
yAxis = function (g){
return g.attr("transform", `translate(${margin.right},0)`)
.call(d3.axisLeft(y))
}
Legend(d3.scaleSequential([d3.min(data, d => d.longitud_sepalo),d3.max(data, d => d.longitud_sepalo)],
d3.interpolateViridis),
{title: "Área del pétalo"})
margin = ({top: 10, right: 60, bottom: 60, left: 20});
shape = ({height:300,width:300})
escalado = function(data,k=2){return Math.sqrt(data)*k}
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.
