chart = {
const svg = d3.select(DOM.svg(w, h))
const yearLabels = svg.selectAll(".yearLabel")
.data(years)
.enter().append("text")
.text(function (d) { return d; })
.attr("x", 0)
.attr("y", function (d, i) { return i * gridSize; })
.attr("font-size", "10pt")
.attr("fill", "#aaa")
.attr("transform", "translate(0," + (margin.left+ gridSize / 1.5) + ")")
.attr("class", "yearLabel mono axis");
const cityLabels = svg.selectAll(".cityLabel")
.data(city)
.enter().append("text")
.text(function(d) { return d; })
.attr("x", function(d, i) { return i * gridSize; })
.attr("y", 0)
.style("text-anchor", "middle")
.attr("transform", "translate(" + (80 + gridSize / 2) + ", 12)")
//.attr("font-size", "9pt")
//.attr("fill", "#aaa")
.attr("class", "cityLabel mono axis");
//nestedCity is better structured
const groupsOfCard = svg.selectAll('.city')
.data(nested_city)
.enter()
.append("g")
const cardsEnter = groupsOfCard.selectAll('.city')
.data(function(d) {
return d.values
})
.enter()
.append("rect")
.attr("x", function(d) { return city.indexOf(d.Ville) * gridSize ;})
.attr("y", function(d) { return d.index * gridSize; })
.attr("transform", "translate(80,20)")
//.attr("d", function(d){return d.values[0].value;})
.attr("rx", 4)
.attr("ry", 4)
.attr("class", "city bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("fill", function(d) { return getColors(d.value - 1); })
cardsEnter.append("title");
cardsEnter.transition().duration(1000)
.style("fill", function(d) { return getColors(d.value - 1); });
cardsEnter.select("title").text(function(d) { return d.value; });
groupsOfCard.exit().remove();
return svg.node();
}
getColors = function getColors(nb) {
var colors = ['#d7191c','#fdae61','#ffffbf','#abdda4','#2b83ba']
return colors[nb]
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
nested_city.forEach(function (d) {
d.values.forEach( function (h,index) {
h.index = index
})
})
nested_city = d3.nest()
.key(function(d) { return d.Ville; })
.entries(data)
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.
