Gráfico scatter / arinasanches

md`# Gráfico scatter`

chart = {

const svg = d3.create("svg")

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

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("g")

.call(grid);

svg.append("g")

.attr("stroke", "white")

.selectAll("circle")

.data(nested)

.join("circle")

.attr("class", "bubbles")

.sort((a, b) => d3.descending(a.value.fatalities, b.value.fatalities))

.attr("cx", d => x(d.value.victims))

.attr("cy", d => y(d.value.occurrences))

.attr("r", d => z(d.value.fatalities))

.attr("fill", d => myColor(d.value.victims))

.attr("fill-opacity", 0.6)

.on("mouseover", function(d){

d3.select(this) // seleciona o elemento atual

.style("cursor", "pointer") //muda o mouse para mãozinha

.attr("stroke-width", 3)

.attr("stroke","#FFF5B1");

const rect = this.getBoundingClientRect();

showTooltip(d, rect.x, rect.y);

})

.on("mouseout", function(d){

d3.select(this)

.style("cursor", "default")

.attr("stroke-width", 1)

.attr("stroke","white"); //volta ao valor padrão

hideTooltip();

});

svg.append("g")

.selectAll('text')

.data(nested.filter(function (n){return n.value.victims > 90;}))

.enter()

.append('text')

.attr('x', d => x(d.value.victims -15))

.attr('y', d => y(d.value.occurrences))

.attr('font-family', 'sans-serif')

.attr("font-size", 12)

.attr('fill', 'black')

.text(d => d.key);

console.log(svg.selectAll('text'))

return svg.node();

}

nested.filter(function (n){return n.value.victims > 100;})

y(100)

function hideTooltip(){

d3.select("#tooltip")

.classed("hidden", true)

}

function showTooltip(d, x, y) {

const offset = 10;

const t = d3.select("#tooltip");

t.select("#state").text(d.key);

t.select("#occurrence").text(d.value.occurrences);

t.select("#victims").text(d.value.victims);

t.select("#fatalities").text(d.value.fatalities);

t.classed("hidden", false);

const rect = t.node().getBoundingClientRect();

const w = rect.width;

const h = rect.height;

if (x + offset + w > width) {

x = x - w;

}

t.style("left", x + offset + "px").style("top", y - h + "px");

}

tooltip = {

d3.select('#tooltip').remove()

let node = d3.select('body')

.append('div')

.attr('id', 'tooltip')

.attr('class', 'hidden')

.append('p')

.html(" Number of ocurrence: Number of victims: Number of fatalities: ")

return node

}

x = d3.scaleLinear()

.domain([0, d3.max(nested, d => d.value.victims)])

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

d3.max(nested, d => d.value.victims)

xAxis = g => g

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

.call(d3.axisBottom(x))

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

.call(g => g.append("text")

.attr("x", width /2)

.attr("y", margin.bottom - 1)

.attr("fill", "currentColor")

.attr("font-size", 16)

//.attr("text-anchor", "end")

.text(" Total number of victims (deaths and injuries)"))

y = d3.scaleLinear()

.domain([0, d3.max(nested, d => d.value.occurrences)])

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

d3.max(nested, d => d.value.occurrences)

yAxis = g => g

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

.call(d3.axisLeft(y))

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

.call(g => g.append("text")

.attr("transform", "rotate(-90)")

.attr("y", 0 - margin.left + 25)

.attr("x",0 - (height/2 +90))

.attr("fill", "currentColor")

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

.attr("font-size", 16)

.text("Number of Occurrences"))

z = d3.scaleLinear()

.domain([0, d3.max(nested, d => d.value.fatalities)])

.range([5, 40]);

myColor = d3.scaleQuantize()

.domain([0, 150])

.range(d3.schemeReds[5])

d3.schemeReds[7]

grid = g => g

.attr("stroke", "currentColor")

.attr("stroke-opacity", 0.1)

.call(g => g.append("g")

.selectAll("line")

.data(x.ticks())

.join("line")

.attr("x1", d => 0.5 + x(d))

.attr("x2", d => 0.5 + x(d))

.attr("y1", margin.top)

.attr("y2", height - margin.bottom))

.call(g => g.append("g")

.selectAll("line")

.data(y.ticks())

.join("line")

.attr("y1", d => 0.5 + y(d))

.attr("y2", d => 0.5 + y(d))

.attr("x1", margin.left)

.attr("x2", width - margin.right));

height = 600 - margin.top - margin.bottom

margin = ({top: 40, right: 50, bottom: 40, left: 60})

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

})

nested = d3.nest()

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

.rollup(function(d) {

return {

fatalities: d3.sum(d, function(e) { return e.Fatalities; }),

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

victims: d3.sum(d, function(e) {return e['Total victims'];})

};

})

.entries(dataset);

d3 = require('d3')

html`Esta célula contém os estilos da visualização.

<style>

#tooltip {

position: absolute;

width: auto;

height: auto;

padding: 10px;

border: solid 1px darkgray;

background-color: white;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

pointer-events: none;

}

#tooltip.hidden {

display: none;

}

#tooltip p {

margin: 0;

font-family: sans-serif;

font-size: 16px;

line-height: 20px;

}

</style>`

Purpose-built for displays of data