ocmc11 = FileAttachment("OCMC (1).json").json()
function getData(game_data) {
var player_data = [];
for (let i = 0; i < game_data.length; i++) {
for (let j = 0; j < game_data[i].Players.length; j++) {
/*player_data.push(i)*/
var kd = game_data[i].Players[j].TotalKills/game_data[i].Players[j].TotalDeaths;
if(kd>3){
kd = 0
}
var player_dict = {};
player_dict["name"] = game_data[i].Players[j].Player.Gamertag;
player_dict["game-day"] = game_data[i].MatchCompletedDate.ISO8601Date;
player_dict["kd"] = game_data[i].Players[j].TotalKills/game_data[i].Players[j].TotalDeaths;
player_dict["date_sub"] = i;
player_data.push(player_dict)
/*
player_data.push([game_data[i].Players[j].Player.Gamertag,game_data[i].MatchCompletedDate.ISO8601Date,
game_data[i].Players[j].TotalKills/game_data[i].Players[j].TotalDeaths,i]) */
}
}
return player_data
}
gamer_data = getData(ocmc11)
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")
.selectAll("circle")
.data(gamer_data)
.join("circle")
.filter(d => d.date_sub)
.attr("cx", d => x(d.kd))
.attr("cy", d => y(d.date_sub))
.attr("r", 40);
return svg.node();
}
data = FileAttachment("penguins.csv").csv({typed: true})
gamer_data[1].kd
height = 400
x = d3.scaleLinear()
.domain(d3.extent(gamer_data, d => d.kd)).nice()
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(gamer_data, d => d.kd)).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
margin = ({top: 0.25, right: 0.20, bottom: 0.35, left: 0.40})
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.
