chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.selectAll('rect')
.data(dados)
.join('rect')
.attr("x", d => x(d.semana))
.attr("y", d => y(d.tmax))
.attr("width", weekWidth * .95)
.attr("height", d => y(d.tmin) - y(d.tmax))
.attr("fill", d => fill(d.tmedia))
.attr("opacity", 0.5)
svg.selectAll('circle')
.data(dados)
.join('circle')
.attr('cx', d => x(d.semana))
.attr('cy', y(12))
.attr('r', d => radius(d.chuva))
.attr('fill', d => fill(d.tmedia))
.attr('opacity', .2)
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
x = d3.scaleTime()
.domain(d3.extent(dados, d => d.semana))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([12, d3.max(dados, d => d.tmax)])
.range([height - margin.bottom, margin.top])
.nice()
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
fill = d3.scaleLinear()
.domain([d3.min(dados, d => d.tmedia), d3.mean(dados, d => d.tmedia), d3.max(dados, d => d.tmedia)])
.range(["turquoise", "#ddd", "coral"])
radius = d3.scaleSqrt()
.domain(d3.extent(dados, d => d.chuva))
.range([0, 40])
margin = ({top: 20, right: 30, bottom: 30, left: 40})
d3 = require("d3@6")
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.
