I created a barchart and used patterns to fill it. For each pattern, I set x=0 and y=0, but I don’t know where this (0,0) point is, so I don’t know my pattern start tiling from where . I want to set the top left corner of bar as the origin point of pattern for each bar. How can I
Tag: data-visualization
Change text color or display it on top of the path so the path won’t cover it
I am new to D3js and I have some sort of bug here. When the percentage of data is very low, the path will appear shorter too, logically. But that also “hides” my text which displays the data percentage. Is there any way possible to make my text white or at least make it appear on top of it’s…
How to create tooltips for multiple values in a choropleth in D3 v5?
I am creating a choropleth for Australian food waste in D3 v5, and I am intending to create tooltip that is displayed when users hover in each state, and multiple values could be seen such as waste used for energy recovery, recycling and disposal, taken from this CSV file: Here is my code I used to create suc…
d3 getting data binding for selection works but when I iterate the selection, it doesn’t work
I tried to remove the circles having the values of top twenty percents & bottom twenty percents. So I got the data bound to each element by d3.selectAll().data(). However, once I iterate through the elements, it returns an error message saying selection.data() is not a function why it doesn’t work w…
How to create a pie chart visualization in d3.js, typing the input manually and with smooth transitions
I am trying to use D3.js to create a pie chart with 3 pie slices. I would like to input the values with the keyboard and the transition when updating the values (when clicking the button) should be smooth, that’s why I use merge() and transition(). In oder words, what I am trying to do is to adapt the c…
D3 Stacked Bar Chart: Bars Overlap
I’m building an interactive bar chart with D3 (version 4). Users may choose a single category (this works fine as coded below) or they can view all categories, in which case the color-coded bars should be stacked. The issue is that I’m not sure how to manipulate the y-coordinates so that each bar …
Create a scale for bands with different width in D3.js
We have projects, which are assigned to different teams. Now I have to create project timelines. For the purposes of this question I have created a dummy in jsfiddle.net. https://jsfiddle.net/cezar77/6u1waqso/2 The “dummy” data look like this: The time is displayed on the x axis and there is a hor…
Visualize a nested JSON structure
Consider this JSON object : Obviously this is a nested data structure, and there are many records, in this example in the deepest level we have about 2000 records. what is the best way to visualize this in a responsive and interactive manner. I have already used the table, and it doesn’t look that inter…