Public
Edited
Mar 5, 2023
1 fork
ocmc11 = FileAttachment("OCMC (1)@1.json").json()
/*ocmc11[0].MatchCompletedDate.ISO8601Date;
ocmc11[0].Players.length
d3.time.format.iso.parse(d.x)*/
{
var x = d3.scaleTime()
.domain(d3.extent(ocmc11[0].MatchCompletedDate.ISO8601Date, function(d) {
return new Date(d.date);
}))
.range([0, width]);
}
d()
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"] = kd;
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)
filtered_OC = gamer_data.filter(function(d) {
return d.name == "OC McBuckets"
})
filtered_other = gamer_data.filter(function(d) {
return d.name == "other"
})
function get_filter_data(filtered_OC,filtered_other,player1,player2) {
var filtered_data = []
if (player1=="True"){
filtered_data = filtered_data.concat(filtered_OC)
}
if (player2=="True"){
filtered_data = filtered_data.concat(filtered_other)
}
return filtered_data
}
filtered_data = get_filter_data(filtered_OC,filtered_other,player1,player2)
player1
viewof player1 = Inputs.radio(["True","False"], {label: "OC McBuckets"});
viewof player2 = Inputs.radio(["True","False"], {label: "Other"})
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(filtered_data)
.join("circle")
.filter(d => d.kd)
.attr("cx", d => time(new Date(d.game_day)))
.attr("cy", d => y(d.kd))
.attr("r", 4);
return svg.node();
}
height=400
x = d3.scaleLinear()
.domain(d3.extent(gamer_data, d => d.game_day)).nice()
.range([margin.left, width - margin.right])
x2 = d3.scaleTime()
.domain([new Date("2019-01-01T00:00:00"), new Date("2022-12-31T00:00:00")])
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(time))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
margin = ({top: 25, right: 20, bottom: 35, left: 40})
/* Plot.plot({
marks: [
Plot.dot(gamer_data.slice(0,200), {x: "date_sub", y: "kd"})
]
}) */
time = d3.scaleTime()
.domain([new Date("2019-01-01T00:00:00"), new Date("2022-12-31T00:00:00")])
.range([0, width - margin.left - margin.right])
timeDomain = time.domain()
import {visualizeTicks} from "@d3/continuous-scales"
visualizeTicks(time_test, [2, d3.timeFormat("%b %d %y")])
filtered_data[0].game_day
time_test = d3
.scaleTime()
.domain([new Date(gamer_data[0].game_day), new Date(gamer_data[100].game_day)])
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.
