Public
Edited
Mar 12, 2024
import {Legend} from "@d3/color-legend"
height = 500
width = 1100
margin = ({top: 40, right: 250, bottom: 60, left: 60})
graph = {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x))
.append("text")
.attr("text-anchor", 'end')
.attr('fill', 'black')
.attr("font-size", '12px')
.attr("font-weight", 'bold')
.attr("x", width - margin.right)
.attr('y', '-10')
.text("Physical Attack");
svg.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
.append("text")
.attr("transform", `translate(20, ${margin.top}) rotate (-90)`)
.attr("text-anchor", 'end')
.attr('fill', 'black')
.attr("font-size", '12px')
.attr("font-weight", 'bold')
.text("Special Attack");
let regressionLine = calculateRegressionLine(pokemonFoundedImages);
let lineFunction = d3.line()
.x(d => x(d.Attack))
.y(d => y(regressionLine.bestFitSlope * d.Attack + regressionLine.bestFitIntercept));
let colorScale = d3.scaleSequential([0.5, 1.5], ["green", "purple"]);
let lineColor = colorScale(regressionLine.slope);
svg.append("path")
.datum(pokemonFoundedImages)
.attr("class", "regression-line")
.attr("fill", "none")
.attr("stroke", lineColor)
.attr("stroke-opacity", 0.5)
.attr("stroke-width", 5)
.attr("d", lineFunction);
svg.select(".regression-line")
.datum(pokemonFoundedImages)
.transition()
.duration(1000)
.attr("d", lineFunction);
svg.append("text")
.attr("class", "hover-text")
.attr("x", 0) // Adjust the x position as needed
.attr("y", 20) // Adjust the y position as needed
.attr("fill", "black")
.attr("font-size", 14)
.text(`Hover over the Pokemon sprites to view their stats!`);
svg.append("text")
.attr("class", "slope-text")
.attr("x", 0) // Adjust the x position as needed
.attr("y", 480) // Adjust the y position as needed
.attr("fill", "black")
.attr("font-weight", "bold")
.text(`Physical(Green) vs Special Attack(Purple) Index Value: ${regressionLine.slope}`);
const individual = svg
.selectAll('image')
.data(pokemonFoundedImages.filter(d => d.Type.includes(select)))
.join('image')
.attr('xlink:href', d => d.img)
.attr('x', d => x(d.Attack))
.attr('y', d => y(d['Sp.Atk']))
.attr('width', 40)
.attr('height', 40);
individual
.append('title')
.text(d => `Name: ${d.Name}\nHP: ${d.HP}\nType: ${d.Type}\nAttack: ${d.Attack}\nDefense: ${d.Defense}\nSp.Atk: ${d['Sp.Atk']}\nSp.Def: ${d['Sp.Def']}\nSpeed: ${d.Speed}\nHeight: ${d.Height}\nWeight: ${d.Weight}`);
individual
.on('mouseover', function(d) {
d3.select(this).attr('stroke', '#333').attr('stroke-width', 2);
})
.on('mouseout', function() {
d3.select(this).attr('stroke', null);
})
update();
//update function
function update() {
const filteredData = pokemonFoundedImages.filter(d => d.Type.includes(select));
let newRegressionLine = calculateRegressionLine(filteredData);
let newLineFunction = d3.line()
.x(d => x(d.Attack))
.y(d => y(newRegressionLine.bestFitSlope * d.Attack + newRegressionLine.bestFitIntercept));
let newLineColor = colorScale(newRegressionLine.slope);
individual
.data(filteredData, d => d.Name)
.transition()
.duration(1000)
.ease(d3.easeCubic)
.attr('cx', d => x(d.Attack))
.attr('cy', d => y(d['Sp.Atk']))
.attr('r', function() { return 10; });
svg.select(".regression-line")
.datum(filteredData)
.transition()
.duration(1000)
.attr("stroke", newLineColor)
.attr("d", newLineFunction);
svg.select(".slope-text")
.text(`Physical(Green) vs Special Attack(Purple) Index Value: ${newRegressionLine.slope}`);
}
return Object.assign(svg.node(), { update });
}
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.
