Public
Edited
Dec 10
svg2 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const margin = { left: 80, right: 20, top: 75, bottom: 50 },
iwidth = width - margin.left - margin.right,
iheight = height - margin.top - margin.bottom;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const presentData = full_time_data.filter((d) => d.abundance === "Present");
const elevatedData = full_time_data.filter((d) => d.abundance === "Present");
const y = d3
.scaleLinear()
.domain([
0,
d3.max(groupedData2, (gr) => d3.median(gr[1], (g) => g["water_temp"]))
])
.range([iheight, 0])
.nice();
const color2 = d3.scaleSequentialSqrt(d3.interpolateBlues).domain(y.domain());
g.append("text")
.attr("class", "title")
.attr("text-anchor", "middle")
.attr("x", iwidth / 2)
.attr("y", -(height / 25))
.style("font-size", width / 50)
.style("font-family", '"Open Sans", sans-serif')
.text(
"Coscinodiscus morphotype Median Cell Count by Month in all Sample Sites"
);
g.append("g")
.attr("class", "x--axis")
.style("font-size", width / 80)
.attr("transform", `translate(0, ${iheight})`)
.call(
d3
.axisBottom(x2)
.tickValues(
x2.domain().filter(function (d, i) {
return !(i % 12);
})
)
.tickSize(0)
.tickFormat(d3.timeFormat("%Y"))
);
g.append("g")
.attr("class", "y--axis")
.style("font-size", width / 80)
.call(d3.axisLeft(y));
g.append("text")
.attr("class", "y label")
.attr("text-anchor", "middle")
.attr("x", -(iheight / 2))
.attr("y", -width / 25)
.style("font-size", "18px")
.attr("transform", "rotate(-90)")
.style("font-family", '"Open Sans", sans-serif')
.text("Median Cell Count per Liter");
g.selectAll(".bar")
.data(groupedData2)
.join("rect")
.attr("class", "bar")
.attr("x", (gr) => x2(gr[0]))
.attr("width", x2.bandwidth())
.attr("y", (gr) => y(d3.median(gr[1], (g) => g["water_temp"])))
.attr(
"height",
(gr) => iheight - y(d3.median(gr[1], (g) => g["water_temp"]))
)
.attr("fill", (gr) => color2(d3.median(gr[1], (g) => g["count"])));
return svg.node();
}
color_domain2 = d3.extent(time_data, (d) => d.count)
color_domain = [0, 100]
color = d3.scaleSequentialSqrt(d3.interpolateGreens).domain(color_domain)
svg = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const margin = { left: 80, right: 20, top: 75, bottom: 50 },
iwidth = width - margin.left - margin.right,
iheight = height - margin.top - margin.bottom;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3
.scaleBand()
.domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])
.padding(0.3)
.range([0, iwidth]);
const y = d3
.scaleLinear()
.domain([
0,
d3.max(groupedData, (gr) => d3.median(gr[1], (g) => g["count"]))
])
.range([iheight, 0])
.nice();
const color2 = d3
.scaleSequentialSqrt(d3.interpolateGreens)
.domain(y.domain());
g.append("text")
.attr("class", "title")
.attr("text-anchor", "middle")
.attr("x", iwidth / 2)
.attr("y", -(height / 25))
.style("font-size", width / 50)
.style("font-family", '"Open Sans", sans-serif')
.text(
"Coscinodiscus morphotype Median Cell Count by Month in all Sample Sites"
);
g.append("g")
.attr("class", "x--axis")
.style("font-size", width / 100)
.call(d3.axisBottom(x).tickFormat(monthFmt))
.attr("transform", `translate(0, ${iheight})`)
.call((axis) =>
axis
.append("text")
.text("Month")
.style("fill", "black")
.style("font-size", width / 75)
.attr("transform", `translate(${iwidth / 2}, 40)`)
.style("text-anchor", "middle")
);
g.append("g")
.attr("class", "y--axis")
.style("font-size", width / 100)
.call(d3.axisLeft(y));
g.append("text")
.attr("class", "y label")
.attr("text-anchor", "middle")
.attr("x", -(iheight / 2))
.attr("y", -width / 25)
.style("font-size", "14px")
.attr("transform", "rotate(-90)")
.style("font-family", '"Open Sans", sans-serif')
.text("Average Cell Count per Liter");
g.selectAll(".bar")
.data(groupedData)
.join("rect")
.attr("class", "bar")
.attr("x", (gr) => x(gr[0]))
.attr("width", x.bandwidth())
.attr("y", (gr) => y(d3.median(gr[1], (g) => g["count"])))
.attr("height", (gr) => iheight - y(d3.median(gr[1], (g) => g["count"])))
.attr("fill", (gr) => color2(d3.median(gr[1], (g) => g["count"])));
g.selectAll(".value")
.data(groupedData)
.join("text")
.attr("class", "value")
.attr("text-anchor", "middle")
.attr("x", (gr) => x(gr[0]) + x.bandwidth() / 2)
.attr("y", (gr) => y(d3.median(gr[1], (g) => g["count"])) - height / 200)
.style("fill", "black")
.style("font-size", "8pt")
.style("font-family", '"Open Sans", sans-serif')
.text((gr) => d3.format(".2f")(d3.median(gr[1], (g) => g["count"])));
return svg.node();
}
myarray = Array.from(new Set(groupedData2.flatMap((gr) => gr[0])))
presentData5 = groupedData2.filter((gr) => gr[1].abundance === "Present")
x2 = d3
.scaleBand()
.domain(Array.from(new Set(groupedData2.flatMap((gr) => gr[0]))))
.padding(0.25)
.range([0, iwidth])
monthFmt(0)
monthFmt = (d) =>
[
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
][d]
Array.from({ length: 103 }, (_, i) => i)
margin = ({ left: 60, right: 20, top: 50, bottom: 50 })
iwidth = width - margin.left - margin.right
iheight = height - margin.top - margin.bottom
groupedData = d3.groups(full_time_data, (d) => d["datecollec"].getMonth())
groupedData2 = d3.groups(full_time_data, (d) => d["datecollects"])
mydomain = [new Date("2003-06-01T10:30:24Z"), new Date("2011-12-01T13:20Z")]
mydomain2 = [new Date("2003-06-01T10:30:24Z"), new Date("2014-12-01T13:20Z")]
time_data = {
return data.map((t) => {
t.datetime = new Date(t.datetime);
return t;
});
}
full_time_data = {
return full_data.map((t) => {
t.datecollec = new Date(t.datecollec);
t.year = t.datecollec.getUTCFullYear();
t.month = t.datecollec.getUTCMonth();
t.datecollects = new Date(t.year, t.month);
return t;
});
}
full_data = FileAttachment("non_zero_cosc_df@2.csv").csv()
height = width * 0.6
d3 = require("d3@6")
import { legend } from "@d3/color-legend"
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.
