Published
Edited
Aug 11, 2020
md`# Práctica 1 de observable`
sum1 = (a,b) => a+b
sum1("hola", sum1(" ", "mundo"))
sum1(11, 12)
viewof xy = html`<input type="range" min=20 max=80>`
weird = (a) => (b) => a+b
sumTo13 = weird(13)
sumTo13(12)
Marks = md`Este slider controla el número de puntos: <input type="range" id="slNumPoints" value=11 min=3 max=50 oninput="document.getElementById('lbNumPoints').textContent=this.value"></input><label for="lbNUmPoints" id="lbNumPoints">11</label> puntos
`
numPoints = Generators.input(Marks.querySelector("#slNumPoints"));
width
d3 = require("d3@5")
viewof exp = html`<input type="range" min=0.01 max=2.81 step=0.01></input>`
exp
{
const height = 500,
margin = {left:50, right: 80, top:10, bottom:50},
iwidth = width - margin.left - margin.right,
iheight = height - margin.top - margin.bottom;
const svg = d3.select(html`<svg width=${width} height=${height}></svg>`);
const x = d3.scaleLinear().domain([0,100]).range([0, iwidth])
const y = d3.scalePow().exponent(exp).domain([0,2500]).range([iheight, 0])
const c = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.set(studentsData.map(d=> d.program)).values())
const r = d3.scaleSqrt().domain([1, 5.0]).range([1, 15]);
const g = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("rect")
.attr("width", iwidth)
.attr("height", iheight)
.attr("x", 0)
.attr("y", 0)
.attr("rx", 10)
.attr("ry", 10)
.style("fill", "#ddd4");
g.append("g").call(d3.axisBottom(x)).attr("transform", `translate(0, ${iheight})`)
g.append("g").call(d3.axisLeft(y))
g.selectAll("circle").data(studentsData).join("circle")
.attr("cx", d => x(d.age))
.attr("cy", d => y(d.valor))
.style("fill", d => c(d.program))
.attr("r", d => r(d.gpa))
return svg.node()
}
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.
