chart = {
const svg = d3.select(DOM.svg(width,height))
const columns = svg.selectAll("g")
.data(nested_city)
.enter()
.append("g")
.attr("city", function(d) { return d.key ;})
.attr("x", function(d) { return x(d.key) ;})
.attr("y", "0")
.attr("transform", function(d) { return "translate(" + x(d.key) + ",0)" ;})
.attr("class", "column")
.on("mouseover", function(d) {
d3.select(this)
.style("cursor","pointer");
})
.on("mouseout", function(d){
d3.select(this)
.style("cursor","default");
})
.call(d3.drag()
.subject(function() {
var t = d3.select(this);
var tr = getTranslation(t.attr("transform"));
return {x: t.attr("x") + tr[0],
y: t.attr("y") + tr[1]};
})
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
const cardsEnter = columns.selectAll('.city')
.data(function(d) {
return d.values
})
.enter()
const cards = cardsEnter.append("rect")
// x inherited from g
.attr("y", function(d) { return y(d.Année) ; })
.attr("width", x.bandwidth())
//.attr("d", function(d){return d.values[0].value;})
.attr("rx", 4)
.attr("ry", 4)
.attr("class", "city bordered")
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", function(d) { return getColors(d.value - 1); })
cardsEnter.append("title");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
d3.select(this).attr("transform", function(d,i){
var coordinates = d3.mouse(this);
var mx = coordinates[0]
console.log( coordinates[0])
return "translate(" + [mx,0] + ")"})
}
function dragended(d) {
d3.select(this).classed("active", false);
}
cardsEnter.transition().duration(1000)
.style("fill", function(d) { return getColors(d.value - 1); });
cardsEnter.select("title").text(function(d) { return d.value; });
columns.exit().remove();
return svg.node();
}
getTranslation = function getTranslation(transform) {
// Create a dummy g for calculation purposes only. This will never
// be appended to the DOM and will be discarded once this function
// returns.
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
// Set the transform attribute to the provided string value.
g.setAttributeNS(null, "transform", transform);
// consolidate the SVGTransformList containing all transformations
// to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get
// its SVGMatrix.
var matrix = g.transform.baseVal.consolidate().matrix;
// As per definition values e and f are the ones for the translation.
return [matrix.e, matrix.f];
}
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
y = d3.scaleBand() // v4
.domain(years)
.range([height - margin.bottom, margin.top])
.padding(0.1)
x = d3.scaleBand() // v4
.domain(city)
.range([margin.left, (width - margin.right)/nbOfColumn])
//.padding(0.1)
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.
