Comments (7)
I am okay with the simple example you provided showing the value.
Just talked to @evanmaeda and we both agree that the selected state could be more "IBM Design Language". I will make an issue for that visual problem. No worries to nock out that interaction now.
No matter what, the hover and focused state should be the same interaction.
from charts.
Reference page: https://www.ibm.com/design/language/experience/data-visualization/chart-models/stacked-barchart/
from charts.
For the second image (% based data) a couple of questions:
- Colour accessibility - do we need to differentiate by texture along with colour?
- Hover states - are there designs for these anywhere?
- Would the hover state also change the colours? eg:
@hchughes is there any guidance for the above?
from charts.
Further thoughts on colours for point 1 above - using hue's instead of different colours:
However we may need to change the legend in order to be able to differentiate the colours (eg make the colour spot larger). Thoughts?
from charts.
We will ask about hover and focus states on our call tomorrow!
from charts.
Awesome work so far!
from charts.
I've discovered a bunch of useful stuff on the new site here: https://www.ibm.com/design/language/experience/data-visualization/interaction/
things to work on for both:
- Hover states with complex data values shown. (eg Value + other relevant info)
- How the selected states fit on mobile sized graphs
👍
Also more suggested colour palettes here: https://www.ibm.com/design/language/resources/color-library/#data-viz-starter-palettes
from charts.
Related Issues (20)
- Upload Getting Started Contribution Video HOT 1
- Hover/Focus state
- Update Examples with IBM Design Language tabs
- Conduct Audit of IBM Product Portfolio Visualization Requirements HOT 2
- Scatterplot visual specs
- Radar visual specs HOT 1
- charts-colors HOT 2
- ibm-charts-radar v1.0.0
- charts-react-line HOT 4
- charts-sample-data
- Vanilla Radar interactions
- ibm-charts-bar v1.0.0 HOT 3
- Vanilla Radar: Square
- Vanilla Radar: Polygon HOT 1
- Add new member HOT 1
- ibm-charts-line v1.0.0 HOT 4
- Brushing: replace with D3 implementation
- C3 and Adoption Open Conversation HOT 3
- Animation settings should be more flexible
- Add prop-types package, so React.PropTypes is not used anymore
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 charts.