axios
Public
Edited
Jul 18, 2023
chart = Pack(data_grouped, {
value: d => d['COUNTA of player_name'],
label: d => d.club_country,
fill: '#dcdcdc',
width: 1000,
height: 1000,
})
// chart = {
// // Specify the dimensions of the chart.
// const width = 928;
// const height = width;
// const margin = 1; // to avoid clipping the root circle stroke
// // Specify the number format for values.
// const format = d3.format(",d");
// // Create the pack layout.
// const pack = d3.pack()
// .size([width - margin * 2, height - margin * 2])
// .padding(3);
// // Compute the hierarchy from the JSON data; recursively sum the
// // values for each node; sort the tree by descending value; lastly
// // apply the pack layout.
// const root = pack(d3.hierarchy(column7_18Sheet31)
// .sum(d => d.value)
// .sort((a, b) => b.value - a.value));
// // Create the SVG container.
// const svg = d3.create("svg")
// .attr("width", width)
// .attr("height", height)
// .attr("viewBox", [-margin, -margin, width, height])
// .attr("style", "width: 100%; height: auto; font: 10px sans-serif;")
// .attr("text-anchor", "middle");
// // Place each node according to the layout’s x and y values.
// const node = svg.append("g")
// .selectAll()
// .data(root.descendants())
// .join("g")
// .attr("transform", d => `translate(${d.x},${d.y})`);
// // Add a title.
// node.append("title")
// .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
// // Add a filled or stroked circle.
// node.append("circle")
// .attr("fill", d => d.children ? "#fff" : "#ddd")
// .attr("stroke", d => d.children ? "#bbb" : null)
// .attr("r", d => d.r);
// // Add a label to leaf nodes.
// const text = node
// .filter(d => !d.children && d.r > 10)
// .append("text")
// .attr("clip-path", d => `circle(${d.r})`);
// // Add a tspan for each CamelCase-separated word.
// text.selectAll()
// .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g))
// .join("tspan")
// .attr("x", 0)
// .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.35}em`)
// .text(d => d);
// // Add a tspan for the node’s value.
// text.append("tspan")
// .attr("x", 0)
// .attr("y", d => `${d.data.name.split(/(?=[A-Z][a-z])|\s+/g).length / 2 + 0.35}em`)
// .attr("fill-opacity", 0.7)
// .text(d => format(d.value));
// return svg.node();
// }
regions = ['AFC', 'CAF', 'CONCACAF', 'CONMEBOL', 'OFC', 'Other', 'UEFA']
hier = d3.hierarchy({name:"root", children: regions.map((d) => d3.hierarchy({children: column7_18Sheet31.filter(i => i.region === d)}))})
data_grouped = d3.group(column7_18Sheet31, d => d.region)
COLUMN 7_18 - Sheet2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
column7_18Sheet2
Type SQL, then Shift-Enter. Ctrl-space for more options.
COLUMN 7_18 - Sheet2.csv
Type SQL, then Shift-Enter. Ctrl-space for more options.
COLUMN 7_18 - Sheet3@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import {Pack} from "@d3/pack"
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.
