Published
Edited
Feb 28, 2021
md`# Teste Histograma`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");
const xScale = d3.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([0, width - margin.left - margin.right]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(bins, d => d.length)])
.range([height - margin.bottom, margin.top]);
const g = svg.append("g")
.attr("fill", "pink")
.selectAll('rect')
.data(bins)
.join("rect")
.attr('x', d => xScale(d.x0 + 1))
.attr('y', d => yScale(d.length))
.attr('width', d => Math.max(0, xScale(d.x1) - xScale(d.x0) - 1))
.attr('height', d => yScale(0) - yScale(d.length));
return svg.node();
}
myScale = d3.scaleLinear()
.domain([0, 1000000])
.range([0, 1]);
data = Object.assign(d3.csvParse(await FileAttachment("unemployment-x.csv").text(), ({rate}) => +rate), {x: "Unemployment (%)", y: "Counties"})
bins = d3.bin().thresholds(40)(data)
width = 500
height = 500
margin = ({top: 20, right: 20, bottom: 30, left: 40})
console.log(myScale(10000));
d3 = require("d3@^6.2.0")
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.
