raw = {
const scsv = d3.dsvFormat(",") // Important to define the separator of your CSV file
return scsv.parse(await FileAttachment('season-1819_csv.csv').text())
}
teams_stats = {
const resultset = [];
const tempDict = {};
for(let match of raw){ //build our tempDict and format it
if(!(match.HomeTeam in tempDict)){tempDict[match.HomeTeam]={'team':match.HomeTeam,'goalsFor':0,'goalsAgainst':0,'points':0}}
if(!(match.AwayTeam in tempDict)){tempDict[match.AwayTeam]={'team':match.AwayTeam,'goalsFor':0,'goalsAgainst':0,'points':0}}
}
for(let match of raw){ //put relevant info into tempDict
if(match.FTR == "H"){
tempDict[match.HomeTeam].points += 3
} else if (match.FTR == "A"){
tempDict[match.AwayTeam].points += 3
} else if (match.FTR == "D"){
tempDict[match.HomeTeam].points += 1
tempDict[match.AwayTeam].points += 1
}
tempDict[match.HomeTeam].goalsFor += parseInt(match.FTHG)
tempDict[match.HomeTeam].goalsAgainst += parseInt(match.FTAG)
tempDict[match.AwayTeam].goalsFor += parseInt(match.FTAG)
tempDict[match.AwayTeam].goalsAgainst += parseInt(match.FTHG)
}
for(let index in tempDict) { //push the tempDict to the resultset for return
resultset.push(tempDict[index])
}
return resultset;
}
team_names = Array.from(new Set(teams_stats.map(entry => entry.team))).sort()
// Scale 1
scale1 = d3.scaleLinear().domain([15, 100]).range([0, size.width]);
// Scale 2
scale2 = d3.scaleLinear().domain([15, 85]).range([size.height, 100]);
// Scale 3
scale3 = d3.scaleLinear().domain([15, 100]).range([1, 20]);
// Scale n
// scalen =
{
// Create SVG
// const svg =
// Create axes groups and append axes
// svg.append("g")...
// svg.append("g")...
// render your visualization by calling render_data
// render_data(svgref, data);
// return svg.node();
const svg = d3.select(DOM.svg(size.width + margins.left + margins.right,
size.height + margins.top + margins.bottom))
svg.append("g").attr("transform", "translate(" + (margins.left - 100) + "," + size.height + ")")
.call(d3.axisBottom(scale1))
svg.append("g").attr("transform", "translate(" + (margins.left - 100) + "," + margins.top + ")")
.call(d3.axisLeft(scale2))
svg.append("text").attr("text-anchor", "end")
.attr("x", size.width/2 + margins.left)
.attr("y", size.height + 50)
.text("Goals For")
.attr("font-size", 30)
svg.append("text").attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.attr("x", -size.height/2)
.attr("y", 60)
.text("Goals Against")
.attr("font-size", 30)
const chartGroup = svg.append("g").attr("transform", "translate(" + (margins.left - 100) + "," + margins.top + ")")
chartGroup.selectAll("g").selectAll("circle").append("span")
render_data(chartGroup, teams_stats)
return svg.node()
}
render_data = (group, data) => {
// render elements. Remember to use the Data Join
const theColor = d3.scaleOrdinal().domain(team_names).range(d3.schemePaired)
group.selectAll(".dot").data(data).join( enter => enter
.append("circle")
.attr("class", "dot")
.attr("fill", theColor)
.attr("text", function (d) { return d.team})
.attr("cx", function (d) { return scale1(d.goalsFor)})
.attr("cy", function (d) { return scale2(d.goalsAgainst)})
.attr("r", function (d) { return scale3(d.points)})
.style("opacity", 0.5)
.attr("stroke", "black")
)
group.selectAll("text").data(data).join("text").attr("x", function(d) { return scale1(d.goalsFor)})
.attr("y", function(d) { return scale2(d.goalsAgainst)})
.attr("r", function (d) { return scale3(d.points)})
.text(d=>d.team)
.attr("font-size", d=>9)
}
concepthw1 = FileAttachment("conceptHw1.png").image()
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.
