// when the map selections change, update the line chart
aktualisierungJ = viewof jahr.updateLines(data_line)
// when the year changes in the line chart, update the map fill colors
aktualisierungG = viewof gem_sel.updateMapFill(jahr)
function drag() {
function dragstarted() {
d3.select('#svg').select("#dragrect").attr("fill", "grey");
}
function dragged(event, d) {
console.log(event.target)
console.log(event.subject)
console.log(event.sourceEvent)
const xvalue = sticky(event.x);//class="mdl-application__wrapper " margin
const jahr = Math.round(xScale.invert(xvalue));
console.log(jahr);
// emit an input event to tell Observable that there's a new value for chart
d3.select('#svg').property("value", jahr);
d3.select('#svg').dispatch("input");
d3.select(this).attr("transform", `translate(${xvalue},0)`);
d3.select("#dragYear").text("\u25C0 " + jahr + " \u25B6");
}
function dragended() {
d3.select('#svg').select("#dragrect").attr("fill", "whitesmoke");
}
return d3
.drag()
.container(d3.select(this).childNode)
//.subject('#dragGr')
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
sticky = function (x) {
let stickyX = d3.max([d3.min([xScale.range()[1], x]), xScale.range()[0]]);
stickyX = xScale(Math.round(xScale.invert(stickyX)));
return stickyX;
}
colorScaleOrd = d3.scaleOrdinal()
.range(d3.schemeDark2)
.unknown('dimgrey');
widthNow = d3.min([width, 768])
heightMap = 320
margin = ({ top: 15, right: 25, bottom: 30, left: 35 })
height = 750 - margin.top - margin.bottom
heightChart = 180
id = "GDE_ID"
padding = 10
mapSize = [widthNow, heightMap]
projectionMap = d3
.geoIdentity()
.reflectY(true)
.fitExtent([[padding, padding], mapSize.map(d => d - padding)], mapData)
pathMap = d3.geoPath(projectionMap)
xAxis = (g) =>
g
.attr("transform", `translate(0,${heightChart - margin.bottom + 10})`)
.call(d3.axisBottom(xScale).tickFormat((d) => d.toString()))
xScale = d3
.scaleLinear()
.range([margin.left, widthNow - margin.right])
.domain(yearExt)
yMaxLine = d3.max([
5,
d3.max(data_line.data_sel, (data_raum) =>
d3.max(data_raum.ALLE_JAHRE, (d) => +data_raum.ALLE_WERTE[d])
)
])
yMaxTot = 10
colorScale = d3
.scaleThreshold()
.range(d3.schemeGnBu[8])
.domain([0.5, 1, 1.5, 2, 3, 5, 10, 15])
.unknown("lightgrey")
d3.schemeBuGn[3]
d3.interpolateMagma[8]
parseYear = d3.timeParse("%Y")
formatYear = d3.timeFormat("%Y")
xScale.range()[0]
import {legend, swatches} 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.
