raw = d3.csvParse(await FileAttachment("ba_obras.csv").text())
formatted_data = raw.map(function(d) {
return {
x: +d.plazo_meses, // Estimated time of construction: Months
y: (+d.monto_contrato / 1000000) // Contract size: Millions of pesos
}
})
basic_plot(formatted_data, {
height: 500,
margin: 80,
radius: 6,
fill: "#72BE76",
opacity: 0.5
})
function basic_plot (data, style) {
const dimension = { width: width, height: style.height, margin: style.margin }
const svg_plot = d3.create("svg")
.attr("viewBox", [0, 0, dimension.width, dimension.height])
let xScale = d3.scalePow()
.exponent(0.5)
.domain([d3.min(data, d => d.x), d3.max(data, d => d.x)]).nice()
.range([dimension.margin, dimension.width - dimension.margin])
let yScale = d3.scalePow()
.exponent(0.5)
.domain([d3.min(data, d => d.y), d3.max(data, d => d.y)]).nice()
.range([dimension.height - dimension.margin, dimension.margin])
let xAxis = d3.axisBottom()
.scale(xScale)
let yAxis = d3.axisLeft()
.scale(yScale)
svg_plot.append('g')
.attr('transform', `translate(0, ${dimension.height - dimension.margin})`)
.call(xAxis);
svg_plot.append('g')
.attr('transform', `translate(${dimension.margin}, 0)`)
.call(yAxis);
svg_plot.append("g")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => xScale(d.x))
.attr("cy", d => yScale(d.y))
.attr("r", style.radius)
.attr("fill", style.fill)
.attr("fill-opacity", style.opacity)
.attr("stroke", style.fill)
.attr("stroke-width", 1);
return svg_plot.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.
