Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
Jun 17
chart(geopandas)
colorMap = ({
Python: "hsl(47, 98%, 63%)",
"C++": "hsl(203, 100%, 40%)",
Fortran: "hsl(270, 29%, 45%)"
})
geopandas = ({
name: "GeoPandas",
description: "Geo DataFrame Library",
language: "Python",
children: [
{
name: "Pandas",
language: "Python",
description:
"pandas is a Python library for data structures and data analysis.",
children: [
{
name: "NumPy",
language: "Python",
description:
"NumPy is the fundamental package for N-dimensional arrays, mathematical functions, and numerical computing in Python.",
children: [
{
name: "NumPy core",
description: "The core of NumPy is well-optimized C code.",
language: "C++"
},
{
name: "BLAS/LAPACK",
description:
"The NumPy linear algebra functions rely on BLAS and LAPACK to provide efficient low level implementations of standard linear algebra algorithms. Those libraries may be provided by NumPy itself using C versions of a subset of their reference implementations but, when possible, highly optimized libraries that take advantage of specialized processor functionality are preferred.",
language: "Fortran"
}
]
}
]
},
{
name: "pyogrio",
language: "Python",
description:
"Pyogrio is a Python module that provides fast, bulk-oriented read and write access to GDAL/OGR vector data sources, such as ESRI Shapefile, GeoPackage, GeoJSON, and several others",
children: [
{
name: "GDAL/OGR",
language: "C++",
description:
"GDAL is a translator library for raster and vector geospatial data formats."
}
]
},
{
name: "pyproj",
description:
"Fast, powerful, flexible and easy to use open source data analysis and manipulation tool",
language: "Python",
children: [
{
name: "PROJ",
language: "C++",
description:
"PROJ is a generic coordinate transformation software that transforms geospatial coordinates from one coordinate reference system (CRS) to another. This includes cartographic projections as well as geodetic transformations."
}
]
},
{
name: "matplotlib",
description: "Basic plotting",
language: "Python"
},
{
name: "Shapely",
description:
"Library for manipulation and analysis of geometric objects in the Cartesian plane.",
language: "Python",
children: [
{
name: "GEOS",
description:
"GEOS is a C/C++ library for computational geometry with a focus on algorithms used in geographic information systems (GIS) software. It implements the OGC Simple Features geometry model and provides all the spatial functions in that standard as well as many others.",
language: "C++"
}
]
}
]
})
height = width / 2
margin = 1 // to avoid clipping the root circle stroke
root = pack(d3.hierarchy(geopandas).count())
pack = d3
.pack()
.size([width - margin * 2, height - margin * 2])
.padding(48)
chart = (data) => {
// 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\n${d.data.description}`
);
// Add a filled or stroked circle.
node
.append("circle")
.attr("stroke", (d) => colorMap[d.data.language])
.attr("stroke-width", 3)
.attr("fill", (d) => colorMap[d.data.language])
.attr("fill-opacity", 0.3)
.attr("r", (d) => d.r);
const leaf = node.filter((d) => !d.children);
leaf
.append("text")
.selectAll("tspan")
.data((d) => d.data.name.split(/\s+/g)) // Split words into their own tspans and lines
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.attr("fill", "#40081C")
.text((d) => d)
.clone(true)
.lower()
.attr("aria-hidden", "true")
.attr("fill", "none")
.attr("stroke", "#FAEBF0")
.attr("stroke-width", 2)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round");
const groupLabel = svg
.append("g")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.selectAll("text")
.data(root.descendants().filter((d) => d.children))
.join("text")
.text((d) => d.data.name);
groupLabel
.attr("transform", (d) => `translate(${d.x}, ${d.y - d.r})`)
.attr("dy", "-0.25em")
.attr("fill", "#fff")
.clone(true)
.lower()
.attr("aria-hidden", "true")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round");
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.
