Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
Public
Edited
Jun 6, 2024
1 fork
1 star
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const players = svg
.append("g")
.selectAll("circle")
.data(sample_data)
.join("circle")
.attr("cx", d => x(d.age)) // + Math.random() * 20)
.attr("cy", d => y(d.wage_eur))
.attr("r", d => r(d.overall))
.attr("stroke", d => countryColor(d.nationality))
.attr("fill", d => countryColor(d.nationality))
.attr("opacity", 0.75);
players.append("title").text(tooltip);
svg
.append("text")
.attr("transform", `translate(${width / 2}, ${margin.top - 10})`)
.attr("font-family", "Ariel, Helvetica, sans serif")
.attr("text-anchor", "middle")
.attr("font-size", 18)
.attr("fill", `hsl(0, 0%, 25%)`)
.text("Wages (Euros) by Player Age");
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
tooltip = d => `Name: ${d.short_name}
Nation: ${d.nationality}
Club: ${d.club}`
sample = (aArray, n = 2000) => d3.shuffle([...aArray]).slice(0, n)
x = d3
.scaleLinear()
.domain(d3.extent(sample_data, d => d.age))
.range([margin.left, width - margin.right])
.nice()
y = d3
.scaleLinear()
.domain(d3.extent(sample_data, d => d.wage_eur))
.range([height - margin.bottom, margin.top])
.nice()
r = d3
.scaleSqrt()
.domain(d3.extent(sample_data, d => d.overall))
.range([1, 6])
countryColor = d3.scaleOrdinal(
uniqueOrderedCountries, //[...new Set(data.map(d => d.nationality))],
d3.schemeTableau10
)
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call(g => g.select(".domain").remove())
.call(g =>
g
.append("text")
.attr("x", width)
.attr("y", margin.bottom - 10)
.attr("font-family", "Ariel, Helvetica, sans serif")
.attr("fill", "black")
.attr("text-anchor", "end")
.text("Age")
)
yAxis = g =>
g
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g =>
g
.append("text")
.attr("x", -margin.left / 2.5)
.attr("y", margin.top - 15)
.attr("font-family", "Ariel, Helvetica, sans serif")
.attr("fill", "black")
.attr("text-anchor", "middle")
.text("Wages (Euros)")
)
import { legend, swatches } from "@d3/color-legend"
swatches({
color: d3.scaleOrdinal(uniqueOrderedCountries, d3.schemeTableau10),
columns: "150px",
swatchSize: 20
})
uniqueOrderedCountries = [
...new Set(sample_data.map(d => d.nationality))
].sort((a, b) => a.localeCompare(b))
chart2 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const players = svg
.append("g")
.selectAll("circle")
.data(sample_data)
.join("circle")
.attr("cx", d => x(d.age)) // + Math.random() * 40)
.attr("cy", d => y(d.wage_eur))
.attr("r", d => r(d.overall))
.attr("stroke", d => countryColor(d.nationality))
.attr("fill", d => countryColor(d.nationality))
.attr("opacity", 0.75);
players.append("title").text(tooltip);
svg
.append("text")
.attr("transform", `translate(${width / 2}, ${margin.top - 10})`)
.attr("font-family", "Ariel, Helvetica, sans serif")
.attr("text-anchor", "middle")
.attr("font-size", 18)
.attr("fill", `hsl(0, 0%, 25%)`)
.text("Wages (Euros) by Player Age");
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
swatches({
color: d3.scaleOrdinal(uniqueOrderedContinents, d3.schemeSet1)
})
uniqueOrderedContinents = [
...new Set(sample_data_with_continent.map(d => d.continent))
].sort((a, b) => a.localeCompare(b))
continentColor = d3.scaleOrdinal(
uniqueOrderedContinents, //[...new Set(data.map(d => d.continent))],
d3.schemeTableau10
)
chart3 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const players = svg
.append("g")
.selectAll("circle")
.data(sample_data_with_continent)
.join("circle")
.attr("cx", d => x(d.age) + Math.random() * 20)
.attr("cy", d => y(d.wage_eur))
.attr("r", d => r(d.overall))
.attr("stroke", d => continentColor(d.continent))
.attr("fill", d => continentColor(d.continent))
.attr("opacity", 0.75);
players.append("title").text(tooltip);
svg
.append("text")
.attr("transform", `translate(${width / 2}, ${margin.top - 10})`)
.attr("font-family", "Ariel, Helvetica, sans serif")
.attr("text-anchor", "middle")
.attr("font-size", 18)
.attr("fill", `hsl(0, 0%, 25%)`)
.text("Wages (Euros) by Player Age");
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.append("g").call(continentLegend);
return svg.node();
}
import {
legend as legendVertical,
swatches as swatchesVertical
} from "@slowkow/vertical-color-legend"
continentLegend = (g) =>
g.attr("transform", `translate(${width - margin.right * 14},60)`).call((g) =>
g.append(() =>
legendVertical({
color: continentColorReversed, //d3.scaleOrdinal(uniqueOrderedContinents, d3.schemeTableau10),
height: 200,
title: "Player's Continent",
tickSize: 0
})
)
)
chart4 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const players = svg
.append("g")
.selectAll("circle")
.data(sample_data_with_continent)
.join("circle")
.attr("cx", d => x(d.age) + Math.random() * 20)
.attr("cy", d => y(d.wage_eur))
.attr("r", d => r(d.overall))
.attr("stroke", d => continentColor(d.continent))
.attr("fill", d => continentColor(d.continent))
.attr("opacity", 0.75);
players.append("title").text(tooltip);
svg
.append("text")
.attr("transform", `translate(${width / 2}, ${margin.top - 10})`)
.attr("font-family", "Ariel, Helvetica, sans serif")
.attr("text-anchor", "middle")
.attr("font-size", 18)
.attr("fill", `hsl(0, 0%, 25%)`)
.text("Wages (Euros) by Player Age");
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
// Create Legend
const size = 6;
svg
.append("g")
.selectAll("circle")
.data(uniqueOrderedContinents)
.join("circle")
.attr("cx", width - margin.right * 14)
.attr("cy", (d, i) => 100 + i * (size + 20))
.attr("r", size)
.attr("stroke", d => continentColor(d))
.attr("fill", d => continentColor(d))
.attr("opacity", 1.0);
svg
.append("g")
.selectAll("text")
.data(uniqueOrderedContinents)
.join("text")
.attr("x", width - margin.right * 14 + size * 1.5)
.attr("y", (d, i) => 100 + i * (size + 20))
.attr("fill", d => continentColor(d))
.attr("text-anchor", "left")
.attr("alignment-baseline", "middle")
.attr("font-family", "Ariel, Helvetica, sans serif")
.attr("font-size", "14px")
.text(d => d);
return svg.node();
}
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.
