Histogram Component #38

New Issue

a258wang · 2022-08-30T17:16:26-04:00

a258wang commented

2022-08-30 17:16:26 -04:00

This has not been requested by anyone other than @a258wang, but I think it would be nice to have for some of the questions. The design can be similar to the various bar graphs we have.

It also seems like visx doesn't have a built-in histogram, but it shouldn't be too difficult to construct one using rectangles, similar to the bar graph.

This has not been requested by anyone other than @a258wang, but I think it would be nice to have for some of the questions. The design can be similar to the various bar graphs we have. It also seems like visx doesn't have a built-in histogram, but it shouldn't be too difficult to construct one using rectangles, similar to the bar graph.

a258wang self-assigned this 2022-08-30 17:16:32 -04:00

j285he added the

Component

label 2022-08-31 21:22:29 -04:00

e26chiu was assigned by a258wang

2022-09-07 21:23:03 -04:00

a258wang removed their assignment 2022-09-07 21:23:10 -04:00

a258wang commented

2022-09-09 13:21:11 -04:00

Similar to bar graph, but the bars should be full width. (ie. in BarGraph.tsx there's a variable called barPadding - setting that to approx. 0 should emulate the look that we want for the histogram.)
The background grid lines for the histogram can be in the same style as the line graph or the boxplot. (The bar graph background lines are a bit different.)
Vertical bars only is good for this component.
Can probably keep the same hover effects as the bar graph.

My suggestion for approaching this would be:

Start by copying BarGraph.tsx and use the BarGraphVertical component as a starting point
Make the stylistic changes outlined above to turn it into a histogram-like graph
Figure out a good interface for HistogramData or whatever, and make sure the x-axis labels are in the right place (centered on the lines instead of centered on the bars)

Apparently D3.js (visx is built on top of D3.js) has some kind of histogram thingie, but visx doesn't have components for it, so we're just going to have to make a homebrew version using bargraph-like methods. 😅

- Similar to bar graph, but the bars should be full width. (ie. in BarGraph.tsx there's a variable called `barPadding` - setting that to approx. 0 should emulate the look that we want for the histogram.) - The background grid lines for the histogram can be in the same style as the line graph or the boxplot. (The bar graph background lines are a bit different.) - Vertical bars only is good for this component. - Can probably keep the same hover effects as the bar graph. My suggestion for approaching this would be: 1. Start by copying BarGraph.tsx and use the `BarGraphVertical` component as a starting point 2. Make the stylistic changes outlined above to turn it into a histogram-like graph 3. Figure out a good interface for `HistogramData` or whatever, and make sure the x-axis labels are in the right place (centered on the lines instead of centered on the bars) Apparently D3.js (visx is built on top of D3.js) has some kind of histogram thingie, but visx doesn't have components for it, so we're just going to have to make a homebrew version using bargraph-like methods. 😅

a258wang commented

2022-09-09 13:28:37 -04:00

5 minute design lol, hover effects can be same as bar graph

bottom labels should probably be strings even though semantically they represent numbers

![histogram-lol](/attachments/9b844173-3569-49f3-a7b1-294d3d94db6f) 5 minute design lol, hover effects can be same as bar graph bottom labels should probably be strings even though semantically they represent numbers

histogram-lol.png

11 KiB

Sign in to join this conversation.