Line Chart / arinasanches

viewof year = Scrubber(d3.range(0, 42, 1), {format: Math.floor, loop: false, delay:100})

chart = {

const tooltip = new Tooltip();

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("path")

.datum(data)

.attr("fill", "none")

.attr("stroke", "red")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line)

svg.append("g")

.attr("fill", "none")

.attr("pointer-events", "all")

.selectAll("rect")

.data(d3.pairs(data))

.join("rect")

.attr("x", ([a, b]) => x(a.key))

.attr("height", height)

.attr("width", ([a, b]) => x(b.key) - x(a.key))

.on("mouseover", ([a]) => tooltip.show(a))

.on("mouseout", () => tooltip.hide());

svg.append(() => tooltip.node);

/*const tooltip = svg.append("g");

tooltip.append("circle")

.attr("r", 3);

svg.on("touchmove mousemove", function() {

const {key, value} = bisect(d3.mouse(this)[0]);

tooltip

.attr("transform", `translate(${x(key)},${y(value)})`)

.call(callout, `${(key)}

${(value)}`);

});

svg.on("touchend mouseleave", () => tooltip.call(callout, null));*/

return svg.node();

}

class Tooltip {

constructor() {

this._date = svg`<text y="-22"></text>`;

this._close = svg`<text y="-12"></text>`;

this.node = svg`<g

pointer-events="none" display="none" font-family="sans-serif" font-size="10" text-anchor="middle">

${this._date}

${this._close}

</g>`;

}

show(d) {

this.node.removeAttribute("display");

this.node.setAttribute("transform", `translate(${x(d.key)},${y(d.value)})`);

this._date.textContent = ('Year: ' + d.key);

this._close.textContent = ('Occurrences: '+ d.value);

}

hide() {

this.node.setAttribute("display", "none");

}

callout = (g, value) => {

console.log(value[1])

if (!value) return g.style("display", "none");

g

.style("display", null)

.style("pointer-events", "none")

.style("font", "10px sans-serif");

const path = g.selectAll("path")

.data([null])

.join("path")

.attr("fill", "white")

//.attr("stroke", "black");

const text = g.selectAll("text")

.data([null])

.join("text")

.call(text => text

.selectAll("tspan")

.data(('year: '+ value).split(/\n/))

.join("tspan")

.attr("x", 0)

.attr("y", (d, i) => `${i * 1.1}em`)

.style("font-weight", (_, i) => i ? null : "bold")

.text(d => d));

const {x, y, width: w, height: h} = text.node().getBBox();

text.attr("transform", `translate(${-w / 2},${15 - y})`);

path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);

}

bisect = {

const bisect = d3.bisector(d => d.key).left;

return mx => {

const date = x.invert(mx);

const index = bisect(data, date, 1);

const a = data[index - 1];

const b = data[index];

return b && (date - a.key > b.key - date) ? b : a;

};

}

dataset = d3.csv("https://gist.githubusercontent.com/nandabezerran/ead62cdad2f5a94e50f6f9b3c5b33ce2/raw/d00336972ffce34fb8292bc9b92ffb96eb8c65a4/MassShootings.csv").then(function(data) {

data.forEach(function(d) {

d.Year = d.Date.slice(-4);

})

return data

})

lineData = d3.nest()

.key(function(d) {return d.Year;})

.rollup(function(d) {

return d3.sum(d, function(e) { return 1; });

})

.entries(dataset).sort((a,b) => a.key - b.key)

mutable data = lineData.slice(0, year)

d3.range(1800, 2010, 0.1), {format: Math.floor, loop: false}

line = d3.line()

.defined(d => !isNaN(d.value))

.x(d => x(d.key))

.y(d => y(d.value))

x = d3.scaleTime()

.domain(d3.extent(data, d => d.key))

.range([margin.left, width - margin.right])

y = d3.scaleLinear()

//.domain([0, d3.max(data, d => d.value)]).nice()

.domain([0, 70])

.range([height - margin.bottom, margin.top])

xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(x).tickFormat(d3.format("d")).ticks())

//.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))

yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(y))

//.call(g => g.select(".domain").remove())

.call(g => g.select(".tick:last-of-type text").clone()

.attr("x", 3)

.attr("text-anchor", "start")

.attr("font-weight", "bold")

.text(data.y))

margin = ({top: 20, right: 30, bottom: 30, left: 40})

height = 500

d3 = require("d3@5")

import {Scrubber} from "@mbostock/scrubber"

Purpose-built for displays of data