games = {
const scsv = d3.dsvFormat(",") // Important to define the separator of your CSV file
return scsv.parse(await FileAttachment('premierleague1819.csv').text())
}
teams = {
return Array.from(new Set(
games.map( game => game.HomeTeam )
)).sort()
}
{
const width = 500;
const height = 20;
const padding = 2;
const side = (width - teams.length * padding) / teams.length;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.style("display", "block");
svg.selectAll('rect')
.data(teams)
.join(
enter => enter.append("rect")
.attr("x", (d, i) => (i * (10 + 2) ))
.attr("y", 0)
.attr("width", 10)
.attr("height", 10)
.attr("fill", (d, i) => 'red')
);
return svg.node();
}
teams_subset = teams.slice(0,5)
{
const width = 500;
const height = 20;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.style("display", "block");
const t1 = svg.transition().duration(1000);
const t2 = svg.transition().duration(1000);
svg.selectAll('rect')
.data(teams)
.join(
enter => enter.append("rect")
.attr("x", (d, i) => (i * (10 + 2) ))
.attr("y", 0)
.attr("width", 10)
.attr("height", 10)
.attr("fill", (d, i) => 'grey'),
);
svg.selectAll('rect')
.data(teams_subset)
.join(
enter => enter,
update => update.transition(t1).attr("fill", "green"),
exit => exit.transition(t2).attr("fill", "red")
);
return svg.node();
}
d3 = require("d3")
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.
