Brazilian, Computer Science: professor and researcher, Areas of interest: #dataviz, #datascience, #machinelearning, #python, #d3js. I believe that technology should be used for society.
function ScatterChart({
data,
element,
width = 600,
height = 150,
x,
y,
points,
highlightValue,
formatNumber = ".0s",
mainColor = { color: "#708090", stroke: "#121212", opacity: 0.3 },
highlightColor = { color: "#708090", stroke: "#121212", opacity: 0.8 }
}) {
const data_filtered = data.filter((d) => d);
const X = d3.map(data_filtered, (d) => d[x]);
const Y = d3.map(data_filtered, (d) => d[y]);
const xDomain = [0, d3.max(X)];
const yDomain = new d3.InternSet(Y);
const xRange = [0, width];
const yRange = [0, height];
const xScale = d3.scaleLinear(xDomain, xRange);
const yScale = d3.scaleBand(yDomain, yRange);
const xAxis = d3.axisBottom(xScale).ticks(width /80 )
.tickFormat(localized[language].format(".1s"));
const yAxis = d3.axisLeft(yScale).tickSizeOuter(0);
element.append("g").attr("transform", `translate(0,${height})`).call(xAxis);
const yAxisObject = element
.append("g")
.attr("transform", `translate(0,0)`)
.call(yAxis);
yAxisObject
.selectAll(".tick")
.attr("stroke-opacity", 0.3)
.attr("stroke-dasharray", "2,2")
.selectAll("line")
.attr("x2", width)
.attr("x1", -5);
yAxisObject.select(".domain").attr("stroke-opacity", 0);
yAxisObject.selectAll("text")
.attr("font-size", 13)
.each(function(d, i) { mapText(d3.select(this)) });
const circles = element
.append("g")
.selectAll("circle")
.data(data_filtered.filter(d => d[points] !== highlightValue))
.join("circle")
.attr("fill", (d) => d[points] === highlightValue ? highlightColor.color : mainColor.color)
.attr("stroke", (d) => d[points] == highlightValue ? highlightColor.stroke : mainColor.stroke)
.attr("stroke-width", 1)
.attr("r", 6)
.attr("cx", (d) => xScale(d[x]))
.attr("cy", (d) => yScale(d[y]) + yScale.bandwidth() / 2)
.attr("opacity", (d) => d[points] === highlightValue ? highlightColor.opacity : mainColor.opacity)
const images = element
.append("g")
.selectAll("image")
.data(data_filtered.filter(d => d[points] === highlightValue))
.join("image")
.attr("xlink:href", "https://cdn.pixabay.com/photo/2021/10/18/19/56/fire-6721968_960_720.png")
.attr("width", 25)
.attr("anchor", 'middle')
.attr("x", (d) => xScale(d[x]) - 25/2)
.attr("y", -5)
const labels = element
.append("g")
.selectAll("text")
.data(data_filtered.filter((d) => d[points] === highlightValue))
.join("text")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("font-weight", 'bold')
.attr("text-anchor", "middle")
.attr("fill", highlightColor.color)
.attr("x", (d) => xScale(d[x]))
.attr("y", (d) => yScale(d[y]) + yScale.bandwidth() / 2 + 20)
.text((d) => localized[language].format(',')(d[x]))
const labels2 = element
.append("g")
.selectAll("text")
.data(data_filtered.filter((d) => d[points] === highlightValue))
.join("text")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "start")
.attr("font-weight", 'bold')
.attr("fill", highlightColor.color)
.attr("opacity", 0.7)
.attr("x", (d) => xScale(d[x]) + 10)
.attr("y", (d) => yScale(d[y]) + yScale.bandwidth() / 2 - 20)
.text((d) => localized[language].format('.1%')(d[x] / area_total[d.bioma]) + " " + texts[language].label1)
}
Legend = ({element, x, y}) => {
// Circle
const legend = element.append("g")
.attr("id", "legend")
.attr("transform", `translate(${x},${y})`)
legend.append("circle")
.attr("fill", '#e6e6e6')
.attr("stroke", '#c0c0c0')
.attr("stroke-width", 1)
.attr("r", 6)
.attr("cx", 120)
.attr("cy", 70)
.attr("opacity", 0.8)
legend.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("font-weight", 'normal')
.attr("text-anchor", "start")
.attr("fill", '#808080')
.attr("x", 130)
.attr("y", 74)
.text(texts[language].label_legend)
legend.append("image")
.attr("xlink:href", "https://cdn.pixabay.com/photo/2021/10/18/19/56/fire-6721968_960_720.png")
.attr("width", 15)
.attr("anchor", 'middle')
.attr("x", 40)
.attr("y", 74 - 15)
.attr("opacity", 0.7)
legend.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("font-weight", 'normal')
.attr("text-anchor", "start")
.attr("fill", '#808080')
.attr("x", 60)
.attr("y", 74)
.text(selected_year)
}
positions = new Object({
barChart: {x: 30, y: 70},
biomaCharts: {x: 580, y: 65},
})
map_position_text = new Object({
'pt-br': {
1: "primeira",
2: "segunda",
3: "terceira",
4: "quarta",
5: "quinta",
6: "sexta",
7: "sétima",
8: "oitava",
9: "nona",
10: "décima",
11: "décima primeira",
12: "décima segunda",
13: "décima terceira",
14: "décima quarta",
15: "décima quinta",
16: "décima sexta",
17: "décima sétima",
18: "décima oitava",
19: "décima nona",
},
'en-US': {
1: "first",
2: "second",
3: "third",
4: "fourth",
5: "fifth",
6: "sixth",
7: "seventh",
8: "eighth",
9: "ninth",
10: "tenth",
11: "eleventh",
12: "twelfth",
13: "thirteenth",
14: "fourteenth",
15: "fifiteenth",
16: "sixteenth",
17: "seventeenth",
18: "eighteenth",
19: "nineteenth",
}
})
import {Annotations} from '@adolfoguimaraes/annotations_simple'
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.
