Skip to content

Instantly share code, notes, and snippets.

@romsson
Last active September 9, 2019 14:03
Show Gist options
  • Save romsson/004a09c8131cb95ca8b5e9c143599a0c to your computer and use it in GitHub Desktop.
Save romsson/004a09c8131cb95ca8b5e9c143599a0c to your computer and use it in GitHub Desktop.
license: mit
name surname
10 50
20 10
40 20
30 40
50 10
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
d3.csv("dataset.csv", function(error, dataset) {
var accessor = function(d) { return d.name;};
var y = d3.scaleLinear()
.domain([d3.min(dataset, accessor),
d3.max(dataset, accessor)]) // d3.extent()
.range([0, 100])
var color = d3.scaleLinear()
.domain([d3.min(dataset, accessor),
d3.max(dataset, accessor)]) // d3.extent()
.range(["white", "red"])
var svg_enter = svg.selectAll("rect").data(dataset)
.enter();
console.log("enter", svg_enter);
svg_enter.append("rect")
.attr("x", function(d, i) { return 10 + i * 40; })
.attr("y", function(d, i) { return 100 + (100 - y(accessor(d))); })
.attr("width", 20)
.attr("height", function(d, i) { return y(accessor(d)); })
svg.on("click", function() {
// changer le mapping de données
accessor = function(d) { return d.surname;};
svg.selectAll("rect").data(dataset).transition().duration(1000)
.delay(function(d, i) { return i * 1000})
.attr("y", function(d, i) { return 100 + (100 - y(accessor(d))); })
.attr("height", function(d, i) { return y(accessor(d)); })
});
var line = d3.line().curve(d3.curveCardinal)
.x(function(d, i) { return 20 + i * 40; })
.y(function(d, i) { return 100 + (100 - y(accessor(d))); })
svg.selectAll("path").data([dataset]).enter()
.append("path")
.style("fill", "none")
.style("stroke", "black")
.attr("d", line)
var xAxis = d3.axisLeft()
.scale(y);
g = svg.append('g')
.attr('transform', 'translate(20,' + 100 + ')')
.attr('class', 'x axis')
.call(xAxis);
console.log(dataset);
})
// data.forEach(function(d, i) {
//
// svg.append("rect")
// .attr("x", 10 + i * 40)
// .attr("y", 100 + (100 - y(d)))
// .attr("width", 20)
// .attr("height", y(d))
//
// })
//
</script>
<!--
<svg width=500 height=500>
<rect x=10 y=100 width=20 height=100></rect>
<rect x=50 y=130 width=20 height=70></rect>
<rect x=90 y=110 width=20 height=90></rect>
<rect x=130 y=150 width=20 height=50></rect>
<svg>
-->
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment