Public
Edited
Jun 16, 2022
1 fork
1 star
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + 60, height]);
// precipitation P
svg.append('g').call(yGridP)
.style("stroke-dasharray", ("3, 3")) // <== This line here!!
svg.append('g').call(yGridT)
.style("stroke-dasharray", ("8, 3")) // <== This line here!!
.attr("class", "axisT")
svg.append("g")
.attr("fill", myColor)
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => yP(d.prec))
.attr("height", d => yP(0) - yP(d.prec))
.attr("width", x.bandwidth());
svg.append('g').call(xGrid)
svg.append("g").call(xAxis)
svg.append("g")
.attr("class", "axisP")
.call(yAxisP)
// temperature T
svg.append("path")
.data([data])
.style("stroke", "red")
.style("stroke-width", 10)
.attr("class", "line")
.attr("fill", "none")
.attr("d", d3.line()
.curve(d3.curveCatmullRom.alpha(0.15))
.x((d, i) => (x(i) + x.bandwidth()/2))
.y((d) => yT(d.temp)));
svg.append("gr")
.attr("transform", "translate( " + width + ", 0 )")
.call(d3.axisRight(yT)); svg.selectAll("myCircles")
.data(data)
.enter()
.append("circle")
.attr("fill", "black")
.attr("stroke", "none")
.attr("cx", (d, i) => (x(i) + x.bandwidth()/2))
.attr("cy", function(d) { return yT(d.temp) })
.attr("r",4)
svg.append("g").call(yAxisT)
// tile
svg.append("text")
.attr("x", (width / 2))
.attr("y", 18)
.attr("text-anchor", "middle")
.style("font-size", "24px")
.style("font-family", "sans-serif")
.style("text-decoration", "none")
.style("font-stretch", "condensed")
.text(location.short);
svg.append("text")
.attr("x", (width / 2))
.attr("y", height - 18)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("font-family", "sans-serif")
.style("text-decoration", "none")
.style("font-stretch", "condensed")
.text(summary);
return svg.node();
}
Math.round(10 * d3.mean(data, d => d.temp))/10
summary = "⌀: " + Math.round(10 * d3.mean(data, d => d.temp)) / 10 + " ℃, Σ: " + Math.round(d3.sum(data, d => d.prec)) + " mm, ϕ / λ: " + Math.round(1000 * lat)/1000 + " " + Math.round(1000 * lon)/1000
myColor = d3.interpolateBlues(Math.max(maxPrecVal, 60) / 250)
maxPrecVal = d3.max(data, d => d.prec)
xGrid = (g) => g
.attr('class', 'grid-lines-x')
.selectAll('myCircles')
.data(data)
.join('line')
.attr('x1', (d, i) => x(i) - x.bandwidth()/20)
.attr('x2', (d, i) => x(i) - x.bandwidth()/20)
.attr('y1', margin.top)
.attr('y2', height - margin.bottom)
yGridP = (g) => g
.attr('class', 'grid-lines-p')
.selectAll('path')
.data(ypticks)
.join('line')
.attr('x1', margin.left)
.attr('x2', width - margin.right)
.attr("y1", d => 0.5 + yP(d))
.attr("y2", d => 0.5 + yP(d))
ypticks = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000].filter(
function(num){
return num < d3.max(data, d => d.prec) && num > d3.min(data, d => d.prec)
})
ytticks = [-20, -15, -10, -5, 0, 5, 10, 15, 20, 25, 30, 35, 40].filter(
function(num){
return num < d3.max(data, d => d.temp) && num > d3.min(data, d => d.temp)
})
yGridT = (g) => g
.attr('class', 'grid-lines-t')
.selectAll('path')
.data(ytticks)
.join('line')
.attr('x1', margin.left)
.attr('x2', width - margin.right)
.attr("y1", d => 0.5 + yT(d))
.attr("y2", d => 0.5 + yT(d))
x = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.right])
.padding(0.1)
yP = d3.scaleLinear()
.domain([0, Math.max(d3.max(data, d => d.prec), 30)]).nice()
.range([height - margin.bottom, margin.top])
yTmin = d3.min(data, (d, i) => yT(i))
yT = d3.scaleLinear()
.domain([d3.min(data, d => d.temp) - 2.5, d3.max(data, d => d.temp) + 2.5]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => months[data[i].month - 1]).tickSizeOuter(0))
.attr("font-size", "15px")
yAxisP = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yP).ticks(12, data.format))
.attr("font-size", "16px")
.attr("color", "darkblue")
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 35)
.attr("fill", "darkblue")
.attr("text-anchor", "start")
.attr("font-size", "16px")
.text("Precipitation [mm]"))
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
yAxisT = g => g
.attr("transform", `translate(${width + margin.right},0)`)
.call(d3.axisRight(yT).ticks(null, data.format))
.attr("font-size", "16px")
.attr("color", "darkred")
.call(g => g.append("text")
.attr("x", - margin.right - 70)
.attr("y", 35)
.attr("fill", "darkred")
.attr("font-size", "16px")
.attr("text-anchor", "start")
.text("Temperature [ºC]"))
data = climate.data
climate = d3.json(url, function(data) {
data.forEach(function(d) {
} );
console.table(data);
console.log(data);
});
coordparam = "&lat=" + lat + "&lon=" + lon
url = "https://ummiume.mapresso.com/backend/server/climate/?id=954" + coordparam
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
location = d3.json("https://ummiume.mapresso.com/backend/addressshort.php?" + coordparam, function(data) {
});
position = [Math.round(lat * 100) / 100, Math.round(lon * 100) / 100].join(" / ")
lat = isNaN(+latlon.split(" ")[1]) ? 47.37 : Math.min(+latlon.split(" ")[0], 84)
lon = isNaN(+latlon.split(" ")[1]) ? 8.54 : +latlon.split(" ")[1]
months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
height = 500
margin = ({top: 60, right: 0, bottom: 60, left: 40})
html`
<style>
.grid-lines-x {
stroke: gray;
stroke-opacity: 0.2;
}
.grid-lines-p {
stroke: darkblue;
stroke-opacity: 0.2;
}
.grid-lines-t line {
stroke: red;
stroke-opacity: 0.1;
}
.axis path,
.axisT line {
stroke: darkred;
stroke-opacity: 0.2;
stroke-width: 1;
}
.axisP path,
.axisP line {
stroke: darkblue;
stroke-width: 1;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
</style>`
d3 = require("d3@6", "d3-array@2")
import {Text} from "@observablehq/inputs"
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.
