This is an extremely simple plug-in for D3 that generates an SVG-based parallel coordinate plot for a GeoJSON Feature Collection.
This code was heavily influenced by Jason Davies' Parallel Coordinates example. In fact, you might even say I just straight-up copied the code and changed it to meet my needs. Because, that's exactly what I did. Thank you, Jason, for this example.
Again, this is an extremely simple implementation of a Parallel Coordinate Plot. If you need something more complex or detailed, I suggest you take a look at Syntagmatic's Parallel Coordinates plug-in.
# d3.pcpGeoJson(collection[, options])
Creates a parallel coordinate plot for the properties, with values of type Number, of each Features in a Feature Collection. Returns a reference to
The collection parameter is required and must be a GeoJSON Feature collection. Behavior is undefined if this parameter is not a Feature Collection.
The options parameter is an optional object that allows you to define the following properties:
- id : [String] The ID of the container for the PCP, defaults to 'body'
- keys : [Array] List of all property names to be used as dimensions of the PCP, defaults to all properties in the first feature that has data of type Number
- buffers : [Array] Array of numbers, must specify all; [top, right, bottom, left], defaults to [30, 10, 10, 10]
- width : [Number] Width of the plot, defaults to 960
- height : [Number] Height of the plot, defaults to 500
- linker : [Function] Details to come...
Details to come.
<html lang="en">
<head>
<script src="//d3.v3.min.js" charset="utf-8"></script>
<script src="//d3.pcpGeoJson.min.js"></script>
<link href="//d3.pcpGeoJson.css" rel='stylesheet' />
</head>
<body>
<script type="text/javascript">
d3.json('collection.json', function (error, collection) {
if (error) {
return console.warn(error);
}
d3.pcpGeoJson(collection);
})
</script>
</body>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent