Skip to content
Vuejs+D3 Zoomable Treemap
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Initial commit Nov 15, 2017
config Initial commit Nov 15, 2017
src Changed imports to only what is needed Nov 16, 2017
static Initial commit Nov 15, 2017
test Initial commit Nov 15, 2017
.babelrc Initial commit Nov 15, 2017
.editorconfig Initial commit Nov 15, 2017
.eslintignore Initial commit Nov 15, 2017
.eslintrc.js Initial commit Nov 15, 2017
.gitignore Initial commit Nov 15, 2017
.postcssrc.js Initial commit Nov 15, 2017
README.html
README.md Added reference to the demo Nov 15, 2017
index.html Added comments to the code Nov 15, 2017
package.json Initial commit Nov 15, 2017

README.md

Vuejs+D3 Zoomable Treemap

An implementation, updated to d3v4, in Vuejs, of the D3 Zoomable Treemap.

Demo

Yes. Here.

Dependencies

Node.js (>=4.x, 6.x preferred) and npm version 3+.
D3V4

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

Details

There's only one component that matters, in src/components/Treemap.vue, and you can extract it and use it in your own projects. The source data is a JSON file in static/flare.json. If you prefer, you can use this build as a base for your project, which uses the vuejs-webpack template, containing a webpack + vue-loader setup with hot reload, linting, testing & css extraction, and a router (vue router).

This implementation of a D3 visualization in Vuejs basically eliminates 3d-select and the need for an explicit rerender of the svg composition. It binds attributes to svg elements, and the svg structure, explicitly defined in the template, reflects the computed data, at any moment, taking advantage of the reactive nature of vuejs. Thus, by setting events (on click events in this project) on the svg elements, a new data tree can be refactored and the changes immediatly reflected in the visualization.

For a detailed explanation on how things work with vue-cli, check out the guide and docs for vue-loader.

ToDo

Cleanup a bit the code. There are still some inline styles in the svg.
Migrate some D3 function calls to Vuejs (the scales - scaleLinear and scaleOrdinal - probably).

License

MIT

You can’t perform that action at this time.