I think your problem here is that your data is in the wrong format to what you appear to be aiming for... rather than having one entry per category you've got one category with everything as an entry within it...
If you put this line after your query data definition:
query = d3.transpose(query);
You should get one bar per person and no massive tooltips
(I also adjusted the axis label rotation to make the labels readable)
- how can I see the current element that represents a bar to which the hovering is applied
- How can I set the background color of a svg element which contains a D3 heat map?
- D3 - How can I show/hide a text element when hovering a circle element created from different attributes of the same data entry?
- How to access the DOM element that correlates to a D3 SVG object?
- How can I get this D3.js HTML element in my AngularJS so that I can manipulate it?
- How can I use an Angularjs filter within the html element of a d3 tooltip?
- How can I get access to the current selection inside a D3 callback?
- How come that D3.js can select an element that jQuery can't?
- How to show the value of each element when hovering
- How to get a value from a stylesheet into the code so that it can be used programmatically?
- How can I make the animation of a circle continous with hovering like this gif in d3.js?
- How can I get the dom svg element from d3 node data?
- d3 - Bar Chart overlapping my text, how can I reduce the domain so it doesn't?
- How do I know which bar the mouse is in for D3 stacked bar?
- How can I animate the top of my svg element like in this gif using d3.js?
- How can I make the legend's similar to the stacked bar chart (and change the legend's label) in D3 v6?
- How can I get the d3.js bar chart start from 0 instead of from the top
- How i can move the gridline behind the bar chart ( D3)
- How can I hide lines from the axes of my bar chart?
- How can I center my maps on the container and adjust the size so that it occupies the entire container?
- How can I scale an SVG so that the content drawn in it to fit the container size?
- D3.js how to write pop-out box that appears when the user clicks on an element
- How I can hide the root element in a dendogram d3
- How can i set the tick text of x-axis between bar in a bar chart in c3.js or d3.js?
- How can I create a basic bar chart with unique counts on the y axis and a category on the x axis?
- How can you change the element drawing order depending on the datapoint index?
- How can I retrieve the data-index of a class that contains a certain text?
- Using d3, how can I create a histogram or bar plot where the last bar is the count of all values greater than some number?
- In D3, how can I receive current X,Y coordinates of an element while a transition is running?
More Query from same tag
- Need help coloring in countries from an array, leave rest default color
- Draw rhombus inscribed in a group with circle SVG
- How does the following code get away with not defining initial x and y coordinates for nodes?
- D3 force layout with some nodes collapsed
- Custom scale in d3
- Map custom value field to x value when using a stacked layout
- tickValues in d3 not working as expected
- Issue labeling d3 sunburst
- Manipulating Opacity and Text in D3.js
- How do I position tooltips to follow a data point to which it is attached in D3?
- aframe vive controller Uncaught TypeError: hand.getAttribute is not a function
- Failing to alter radius of an arc
- Add mouse pan on left mouse button on 2D graph created with D3.js fork 3D Force-Directed Graph
- D3 - tree nodes not built from external JSON file
- Importing local files for d3 in Angular2 projects generated using the cli
- D3.js v4 - how to add zoom button with the default wheelmouse zoom behavior
- Removing line elements in D3
- How do I display dates on the x-axis for nvd3 / d3.js?
- How to update the Y domain with a transition in D3.JS?
- Removing unwanted axes on small multiples in D3
- ReferenceError: d3 is not defined using web-maker
- Identify given array is a d3 selection
- Simultaneous cursors
- How to remove white line in d3.js legnd
- SVG - make inner part of rectangle completely transparent
- TypeError: Cannot read property 'childNodes' of undefined angular
- d3.svg.line() error: Uncaught TypeError: Cannot read property 'line' of undefined
- D3 Charts - JS - Adding Hours To Time
- D3.js Hierarchical Edge Bundling with straight edges
- d3.js limit panning in force layout