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.
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. 😅
5 minute design lol, hover effects can be same as bar graph
bottom labels should probably be strings even though semantically they represent numbers
5 minute design lol, hover effects can be same as bar graph
bottom labels should probably be strings even though semantically they represent numbers
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.
barPadding- setting that to approx. 0 should emulate the look that we want for the histogram.)My suggestion for approaching this would be:
BarGraphVerticalcomponent as a starting pointHistogramDataor 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. 😅
5 minute design lol, hover effects can be same as bar graph
bottom labels should probably be strings even though semantically they represent numbers