legend3 = {
const svg = d3.create("svg")
.attr("width", series.length * 100)
.attr("height", 40)
.style("font", "10px sans-serif")
.style("margin-left", `${margin.left}px`)
.style("display", "block")
.attr("text-anchor", "middle");
const g = svg.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("transform", (d, i) => `translate(${i * 100},0)`);
g.append("rect")
.attr("width", 110)
.attr("height", 25)
.attr("fill", d => color2(d.key));
g.append("text")
.attr("x", 50)
.attr("y", 32)
.attr("dy", "0.35em")
.text(d => d.key);
return svg.node();
}
xN = d3.scaleBand()
.domain(datadeathavg.map(d => d.Region))
.range([margin.left, width - margin.right])
.padding(0.1)
xAxis5 = g => g
.attr("transform", `translate(0,${heightN - marginN.bottom})`)
.call(d3.axisBottom(x1).tickSizeOuter(0))
yAxis5 = g => g
.attr("transform", `translate(${marginN.left},0)`)
.call(d3.axisLeft(y5))
.call(g => g.select(".domain").remove())
y5 = d3.scaleLinear()
.domain([0, d3.max(datadeathnumbers, e => e.Deaths)]).nice()
.range([heightN - marginN.bottom, marginN.top])
x5 = d3.scaleBand()
.domain(datadeathincidents.map(d => d.Region))
.range([marginN.left, width - marginN.right])
.padding(0.1)
color1 = d3.scaleOrdinal()
.range([ "#E5CAB3", " #4E5249", "#B0B0B0", "#777F87", "#ADA48A",])
color2 = d3.scaleOrdinal()
.range(["#ADA48A" , "#B0B0B0", "#777F87", " #4E5249", "#E5CAB3" ])
x4 = d3.scaleBand()
.domain(datadeathavg.map(d => d.Region))
.range([marginN.left, width - marginN.right])
.padding(0.1)
y4 = d3.scaleLinear()
.domain([0, 17]).nice()
.range([heightN - marginN.bottom, marginN.top])
xAxis4 = g => g
.attr("transform", `translate(0,${heightN - marginN.bottom})`)
.call(d3.axisBottom(x4).tickSizeOuter(0))
yAxis4 = g => g
.attr("transform", `translate(${marginN.left},0)`)
.call(d3.axisLeft(y4))
.call(g => g.select(".domain").remove())
yN = d3.scaleLinear()
.domain([0, d3.max(datadeathavg, d => d.DeathsPerIncidents)]).nice()
.range([heightN - marginN.bottom, marginN.top])
x1 = d3.scaleBand()
.domain(datadeathincidents.map(d => d.Region))
.range([marginN.left, width - marginN.right])
.padding(0.1)
y1 = d3.scaleLinear()
.domain([0, d3.max(datadeathincidents, d => d.Incidents)]).nice()
.range([heightN - marginN.bottom, marginN.top])
xAxis1 = g => g
.attr("transform", `translate(0,${heightN - marginN.bottom})`)
.call(d3.axisBottom(x1).tickSizeOuter(0))
yAxis1 = g => g
.attr("transform", `translate(${marginN.left},0)`)
.call(d3.axisLeft(y1))
.call(g => g.select(".domain").remove())
heightN = 500
marginN = ({top: 20, right: 0, bottom: 30, left: 40})
datadeathnumbers = d3.csv("https://gist.githubusercontent.com/pdeshlab/120e1ef1465fc6d38ad2244db78891dd/raw/8431a0572b9d76c4370cd9b02769e1a881fd65a6/drowningbythenumbers.csv")
datadeathincidents = d3.csv("https://gist.githubusercontent.com/pdeshlab/120e1ef1465fc6d38ad2244db78891dd/raw/8431a0572b9d76c4370cd9b02769e1a881fd65a6/drowningbyincident.csv")
datadeathavg = d3.csv("https://gist.githubusercontent.com/pdeshlab/120e1ef1465fc6d38ad2244db78891dd/raw/8431a0572b9d76c4370cd9b02769e1a881fd65a6/drowningavgdeathsperincidents.csv")
d3 = require("d3@5")
getRandomNumberInRange = (min, max) => Math.random() * (max - min) + min
getRandomValue = arr => arr[Math.floor(getRandomNumberInRange(0, arr.length))]
sentenceCase = str => [
str.slice(0, 1).toUpperCase(),
str.slice(1),
].join("")
getStatusKey = ({sex, ses}) => [sex, ses].join("--")
data = d3.csvParse(await FileAttachment("MigrantsFINAL@1.csv").text(), (d, i, columns) => (d3.autoType(d), d.total = d3.sum(columns, c => d[c]), d))
series = d3.stack().keys(data.columns.slice(1))(data)
x = d3.scaleBand()
.domain(data.map(d => d.Date))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
.rangeRound([height - margin.bottom, margin.top])
color = d3.scaleOrdinal()
.range(["#4E5249", "#E5CAB3", " #4E5249", "#ADA48A", "#777F87"])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove())
height = 600
margin = ({top: 10, right: 10, bottom: 100, left: 40})
function zoom(svg) {
const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];
svg.call(d3.zoom()
.scaleExtent([1, 8])
.translateExtent(extent)
.extent(extent)
.on("zoom", zoomed));
function zoomed() {
x.range([margin.left, width - margin.right].map(d => d3.event.transform.applyX(d)));
svg.selectAll(".bars rect").attr("x", d => x(d.data.Date)).attr("width", x.bandwidth());
svg.selectAll(".x-axis").call(xAxis);
}
}
function wrap(text, width) {
text.each(function () {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
x = text.attr("x"),
y = text.attr("y"),
dy = 0, //parseFloat(text.attr("dy")),
tspan = text.text(null)
.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", ++lineNumber * lineHeight + dy + "em")
.text(word);
}
}
});
}
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.
