Comments (10)
Actually, it is left aligned at all times in Firefox.
Instead of JS, this can probably be fixed via some CSS guides. The elements might be instantiated dynamically, but classes can be added dynamically as well.
from books-library-stack.
<section class="vis">
contains both the bubbles and the text. One goal was to have bubbles and text both be more centered, in which case the vis class is the correct thing to change. However, I think I prefer the text box being right aligned. My tiny screen does not give much room for both to be squished any further together.
from books-library-stack.
changing the margin or padding of the .faculty-by-unit
class moves the entire drawing, so there is less total drawing, although it is more centered.
It turns out we care more about how the SVG is drawn respective to its container than the positioning of the container itself. CSS is not a good solution.
from books-library-stack.
It might be better to try to use D3's built in zoom/translate capabilities:
https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-zoom
from books-library-stack.
SVG geometric zooming
http://bl.ocks.org/mbostock/3680999
from books-library-stack.
The above works for moving and zooming around the bubble map as a user. It doesn't respect zoom level in any obvious way, although there would be three zoom levels of interest if that could somehow be captured.
There should be a way to capture the zoom object in order to translate/zoom it when items in the right text box are clicked, but it doesn't seem super easy at first glance.
from books-library-stack.
New branch feature_d3_zoom was created for this feature.
All text is now shown, for #3. Need to determine zoom level to show/hide text based on node depth, because it is unreadable right now.
One can zoom and translate about the map easily with double click, touch, and mouse wheel.
The connection between text box and circles has been lost, related to #6. This will need to be regained. The text box, when something is clicked within it, should able able to use zoom.center()
to focus on the
from books-library-stack.
click to zoom, much like the function in main, but zooms out when the thing zoomed into is clicked on:
http://bl.ocks.org/mbostock/2206590
zoom slider, which should help capture the discrete zoom levels and make it clear where to zoom out:
http://thisismattmiller.com/blog/add-zoom-slider-to-d3-js/
from books-library-stack.
This text is too long to be readable without word wrap. SVG does not do word wrap as such, but peeps be fixin probs:
http://svgjs.com/textflow/
from books-library-stack.
textflow didn't work with the d3 stuff.
manually adjust the text? some wordwrap code:
http://james.padolsey.com/javascript/wordwrap-for-javascript/
unlicensed:
http://james.padolsey.com/terms-conditions/
from books-library-stack.
Related Issues (8)
- add functionality to display by faculty interest HOT 2
- the pack bubbles need to display their purpose HOT 1
- Back button HOT 1
- back function to zoom out in full HOT 1
- right hand text display needs to be more flexible HOT 14
- svg text renders slowly, without text the svg is super quick HOT 5
- Add search/filtering for the Units/Intersts > people sidebar
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from books-library-stack.