Skip to content

Instantly share code, notes, and snippets.

@JoymangulJensen
Last active November 14, 2017 09:52
Show Gist options
  • Save JoymangulJensen/b8b734928cfae9a8abc3ef4742ce88f0 to your computer and use it in GitHub Desktop.
Save JoymangulJensen/b8b734928cfae9a8abc3ef4742ce88f0 to your computer and use it in GitHub Desktop.
TP intro D3.js JOYMANGUL
license: mit
[
{"name": "A", "value": 10, "date": "2016-01"},
{"name": "B", "value": 30, "date": "2016-02"},
{"name": "C", "value": 20, "date": "2016-03"},
{"name": "D", "value": 40, "date": "2016-04"},
{"name": "E", "value": 50, "date": "2016-05"},
{"name": "F", "value": 20, "date": "2016-06"},
{"name": "K", "value": 10, "date": "2016-07"},
{"name": "G", "value": 30, "date": "2016-08"},
{"name": "H", "value": 40, "date": "2016-09"},
{"name": "I", "value": 60, "date": "2016-10"},
{"name": "J", "value": 30, "date": "2016-11"},
{"name": "K", "value": 10, "date": "2016-12"}
]
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.line {
fill: none;
stroke: black;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var width = 800;
var height = 400;
// See formats http://bl.ocks.org/zanarmstrong/raw/05c1e95bf7aa16c4768e/
// Data sample {"name": "G", "value": 10, "date": "2016-07"}
var parseDate = d3.timeParse("%Y-%m");
var displayDate = d3.timeFormat("%b %y");
var displayValue = d3.format(",.0f");
// Ordinal scale
var x = d3.scaleTime()
.range([0, width]);
// Linear scale
var y = d3.scaleLinear()
.range([height, height - 200]);
var line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
var g = svg.append("g")
.attr("transform", "translate(50, 0)")
d3.json("dataset.json", function(error, data) {
if (error) throw error;
// Pre-processing
data.forEach(function(d) {
d.value = +d.value;
d["date"] = parseDate(d["date"]);
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
svg.selectAll(".label").data(data).enter()
.append("text")
.attr("class", "label")
.text(function(d, i) { return displayDate(d.date); })
.attr("y", 420)
.attr("x", function(d) { return x(d.date) + 25; })
.style("font-size", 10)
.style("font-family", "monospace");
// Display last value
g.selectAll(".value").data([data[data.length -1]]).enter()
.append("text")
.text(function(d, i) { return displayValue(d.value); })
.attr("class", "value")
.attr("y", function(d) { return y(d.value); })
.attr("x", width + 10)
.style("font-size", 20)
.style("font-family", "monospace");
g.selectAll(".line").data([data]).enter().append("path")
.attr("class", "line")
.attr("d", line);
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 10)
.attr("cx", function(d) { return x(d.date)+50; })
.attr("cy", function(d) { return y(d.value); })
.style("fill", "black")
.style("opacity", "0.1")
.on("mouseover", function(d, i) {
d3.select(this).style("fill", "red")
.style("opacity", "1");
// Using Ids instead of values
d3.selectAll("text").filter(function(e, j) {
return i === j;
})
.style("font-size", 24);
d3.append("text")
.text(function(d, i) { return displayValue(d.value); })
.attr("class", "value")
.attr("y", function(d) { return y(d.value); })
.attr("x", width + 10)
.style("font-size", 20)
.style("font-family", "monospace");
})
.on("mouseout", function(d, i) {
d3.select(this).transition().duration(500).style("fill", "black")
.style("opacity", "0.1");
// Should be using Ids instead of values
d3.selectAll("text").filter(function(e, j) {
return i === j;
})
.transition().duration(500)
.style("font-size", 12);
});;
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment