A Pen by David Ollerhead on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"in_process_packages": | |
[ | |
], | |
"install_prereleases": true, | |
"installed_packages": | |
[ | |
"Alignment", | |
"AngularJS", | |
"Autoprefixer", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
path { | |
stroke: white; | |
stroke-width: 0.25px; | |
fill: grey; | |
} | |
</style> | |
<body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var route = view.map.svg | |
.select(".transactions") | |
.append("path") | |
.datum({ | |
type: "LineString", | |
coordinates: [routeCoords[0], routeCoords[1]] | |
}) | |
.attr("class", "route") | |
.attr("d", view.map.path.projection(view.map.projection)); |
I combined Mike Bostock's Zoomable Sunburst and Sunburst Partition examples, so that I could have both zooming and updating the underlying data (between count and size, in this case). A simple combination of the examples does not work; you have to edit the arcTween function used for updating the data, so that when it redraws the partition layout, it takes account of the current zoom level by adjusting the domain of the x scale.
Click on any arc to zoom in, and click on the center circle to zoom out. Use the Size/Count radio buttons to update the data.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Vue from 'vue' | |
import VueApollo from 'vue-apollo' | |
import { | |
createApolloClient, | |
restartWebsockets | |
} from 'vue-cli-plugin-apollo/graphql-client' | |
import { setContext } from 'apollo-link-context' | |
import authConfig from '@/../auth_config.json' | |
const middlewareLink = setContext((_, { headers }) => { |
OlderNewer