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 …

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 …

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 is placed above another when the user has chosen All Categories. Right now they overlap because they all start from y:0. Here’s what it looks like (each stack would add up to +/- 200 to ~280 if not overlapped): And here’s my function for displaying the chart:

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 horizontal bar for every project stretching from the start_date to the end_date. On the left side, on the y axis, I’d like to display the teams (see the labels on the left side in the jsfiddle) and create a gridline for each team, separating the groups of projects. Because each team has

Visualize a nested JSON structure

Consider this JSON object : { department_1 : [{ id : 1, name = Joe Smith, email : jsmith@usf.edu}, …., { id : 500, name = Bun Sam, email : bsam@usf.edu}]} { department_2 : [{ id : 1, name = Joe …