Public
Edited
Oct 12, 2023
8 forks
2 stars
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)
old_svg = {
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_subset)
.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) => 'blue')
);
return svg.node();
}
{
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");
render_chart(svg, teams_subset);
render_chart(svg, teams);
render_chart(svg, teams_subset)
return svg.node();
}
cityNames = ({
items: ['New York', 'Tokyo', 'Rio de Janeiro'] ,
addItem(item){
this.items.push(item)
},
removeItem(index){
this.items.splice(index, 1);
},
updateItem(index, newItem){
this.items[index] = newItem;
}
})
{
const ul = d3.create('ul');
renderCityNames(ul, cityNames.items);
setTimeout(() => {
cityNames.addItem('Sao Paulo');
// cityNames.removeItem(1);
renderCityNames(ul, cityNames.items);
}, 3000);
// cityNames.addItem('Sao Paulo');
return ul.node();
}
renderCityNames = (root, data) => {
root.selectAll('li')
.data(data, data => data)
.join(
enter => enter
.append('li')
.text( name => { return name } )
.style('color', 'red'),
update => update
.style('color', 'blue'),
exit => exit
.style('color', 'green')
)
// return ul.node();
}
render_chart = (svg, data) => {
const t1 = svg.transition().duration(1000);
const t2 = svg.transition().duration(2000);
svg.selectAll('rect')
.data(data)
.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) => 'blue'),
update => update.transition(t1).attr('fill', pickColor()),
exit => exit.transition(t2).attr('fill', 'white').remove()
);
}
function pickColor(){
const colors = ['green', 'red'];
const randomIndex = Math.floor( Math.random() * colors.length );
return colors[randomIndex];
}
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.
