Comments (4)
To address the readability issue of tooltips in your Country Map visualization, consider implementing these targeted improvements:
-
Customize Tooltip Styles: Adjust the tooltip's CSS to enhance contrast and readability. Use a light background (
#fff
), dark text (#000
), and ensure the font size is clear (14px
). Style the tooltip to be slightly transparent (opacity: 0.9
) and follow the cursor without blocking it (pointer-events: none
). -
Dynamic Tooltip Positioning: Make sure the tooltip dynamically adjusts its position based on the mouse coordinates. This prevents it from obscuring important parts of the map or UI elements.
-
Enhance Tooltip Content and Formatting: Dynamically generate tooltips with concise, well-formatted content. Include the country name and metric value, ensuring the text contrasts well with the background for better readability.
-
Interactive Tooltips for Enhanced Readability: For complex data, consider making tooltips interactive, allowing users to click or hover over the tooltip itself for more interaction.
-
Accessibility Considerations: Ensure tooltips are accessible by adding
aria
attributes and enabling keyboard navigation. -
Leverage D3.js Features: Use D3.js to dynamically update tooltip content and style based on the data of the hovered map region.
-
Adopt Theme Consistency: Align the tooltip's styling with the map's overall theme for a cohesive look and feel.
By focusing on these enhancements, you can significantly improve the user experience and readability of tooltips in your choropleth country map visualizations.
Details
Sources
- superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
- superset-frontend/plugins/legacy-plugin-chart-country-map/src/CountryMap.js
- superset-frontend/plugins/legacy-plugin-chart-country-map/src/ReactCountryMap.jsx
- superset-frontend/plugins/legacy-preset-chart-nvd3/src/utils.js
- superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts
- superset-frontend/plugins/legacy-plugin-chart-country-map/src/CountryMap.css
- superset-frontend/plugins/legacy-plugin-chart-country-map/src/controlPanel.ts
- superset/viz.py
About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.
Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.
To continue the conversation, mention @dosu.
from superset.
Yes, I was just noticing this a couple days ago... I'm not sure when it regressed, but I believe the name should be located at the centroid of the region you're hovering on. I'm not sure how far back this happened, but a git bisect
would likely turn up the problem, if anyone doesn't see it immediately in the code.
The position and the legibility are somewhat separate issues... I'm more worried about the position, but both are valid. Should we split these into two issues? Do you have interest in tackling either?
@michael-s-molina just merged a new tooltip renderer that we'd like to start standardizing on... perhaps this is a good chance to spiff things up a little bit while we're at it?
from superset.
Thank you for your feedback, I personally see no point in splitting the subject into 2 because for me it forms a whole.
I understand that corrections can be effective on one subject or another.
If you would like me to troubleshoot to make this easier to fix, I can do that.
Sincerely
from superset.
If you would like me to troubleshoot to make this easier to fix, I can do that.
That would be amazing! Many of us are stretched for time, so any help we can get goes a long, long way. A PR would be the dream, but more diagnostics sure help!
from superset.
Related Issues (20)
- UUID columns show up as NULL HOT 1
- 0.12.11 fails for helm install HOT 2
- sql query is different from chart results HOT 4
- Inconsistent spacing between viz gallery charts HOT 1
- [design:suggest] Lack of space in "Create Chart" GUI HOT 2
- Bug in query re-writing in Pinot with Virtual Datasets HOT 1
- Error: "Failed to execute 'removeChild' on 'Node'" after adding column to simple table chart HOT 1
- Superset Application being enbedded instead of a single dashboard HOT 5
- Time-series Line Chart Display unnecessary total HOT 7
- Version 4.0.1 - endless loading - manual refresh is needed to show dashboard HOT 8
- Calendar Heatmap day offset HOT 2
- On Mac OS X Safari - Using Download As Image option on a chart returns empty image HOT 2
- ARM (linux/arm64) dev images include x86 Firefox/geckodriver libraries HOT 3
- How I can add custom layout or install analytics tool in Superset? HOT 1
- It's impossible to attach more than one alert/report to a single chart/dashboard HOT 1
- superset error when testing HOT 1
- Helm Template: `extraConfigs` does not mount files to `/app/pythonpath` as mentioned HOT 1
- Getting 404 error when trying to upload csv
- Cropping the screen to the left edge HOT 1
- "Error 403 Forbidden" displayed on an embedded chart when using a particular aggregation function in the chart metric HOT 5
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 superset.