Fix boxplot labels and incorrect questions order (Closes #147) #174
|
|
@ -47,16 +47,10 @@ export type StatsPlotProps = {
|
|||
strokeDashArray?: string;
|
||||
/** Number of ticks for the value (y-)axis */
|
||||
numTicksLeftAxis?: number;
|
||||
/** Distance between the boxplot and the top of the grid, in px. */
|
||||
plotTopOffset?: number;
|
||||
/** Distance between the left axis labels and the start of the lines of the graph, in px. */
|
||||
valueAxisLeftOffset?: number;
|
||||
/** Distance between the top and the first label of the y axis, in px. */
|
||||
valueAxisLabelTopOffset?: number;
|
||||
/** Distance between the left and the labels of the y axis, in px. */
|
||||
valueAxisLabelLeftOffset?: number;
|
||||
/** Distance between the left and the start of the first label of the x axis, in px. */
|
||||
categoryAxisLabelLeftOffset?: number;
|
||||
/** Left margin before the start of the graph for the left axis labels, in px. */
|
||||
valueAxisLeftMargin?: number;
|
||||
/** Distance between the left axis labels and the start of the graph */
|
||||
valueAxisLabelOffset?: number;
|
||||
/** Distance between the top and the column lines of the grid of the graph, in px. */
|
||||
gridColumnTopOffset?: number;
|
||||
/** Distance between the top of the point in the boxplot and the start of the tooltip box, in px. */
|
||||
|
|
@ -73,6 +67,8 @@ export type StatsPlotProps = {
|
|||
boxPlotWidthFactor?: number;
|
||||
/** Factor multiplied with the compressed width to determine the distance between boxes, in px. */
|
||||
boxPlotLeftOffset?: number;
|
||||
/** Boxplot padding */
|
||||
boxPlotPadding?: number;
|
||||
};
|
||||
|
||||
export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
|
||||
|
|
@ -90,18 +86,16 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
|
|||
strokeWidth = 2.5,
|
||||
strokeDashArray = "10,4",
|
||||
numTicksLeftAxis = 6,
|
||||
plotTopOffset = 10,
|
||||
valueAxisLeftOffset = 40,
|
||||
valueAxisLeftMargin = 40,
|
||||
gridColumnTopOffset = -20,
|
||||
valueAxisLabelTopOffset = 5,
|
||||
valueAxisLabelLeftOffset = 10,
|
||||
categoryAxisLabelLeftOffset = 30,
|
||||
valueAxisLabelOffset = -10,
|
||||
toolTipTopOffset = 0,
|
||||
toolTipLeftOffset = 0,
|
||||
categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
|
||||
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
|
||||
boxPlotWidthFactor = 0.4,
|
||||
boxPlotLeftOffset = 0.3,
|
||||
boxPlotPadding = 0.3,
|
||||
}: StatsPlotProps & WithTooltipProvidedProps<TooltipData>) => {
|
||||
// bounds
|
||||
const xMax = width;
|
||||
|
|
@ -128,23 +122,22 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
|
|||
|
||||
// scales
|
||||
const xScale = scaleBand<string>({
|
||||
range: [18, xMax - 80], // scaling is needed due to the left offset
|
||||
range: [margin.left, xMax - 2 * margin.left - valueAxisLeftMargin], // scaling is needed due to left margin
|
||||
round: true,
|
||||
domain: plotData.map(getX),
|
||||
padding: 0.3,
|
||||
padding: boxPlotPadding,
|
||||
});
|
||||
|
||||
const values = plotData.reduce((allValues, { boxPlot }) => {
|
||||
allValues.push(boxPlot.min, boxPlot.max);
|
||||
return allValues;
|
||||
}, [] as number[]);
|
||||
const minYValue = Math.min(...values);
|
||||
const maxYValue = Math.max(...values);
|
||||
|
||||
const yScale = scaleLinear<number>({
|
||||
range: [yMax, 0],
|
||||
range: [yMax - margin.top, 0],
|
||||
round: true,
|
||||
domain: [minYValue, maxYValue],
|
||||
domain: [0, maxYValue],
|
||||
});
|
||||
|
||||
const constrainedWidth = Math.min(200, xScale.bandwidth());
|
||||
|
|
@ -168,35 +161,65 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
|
|||
<div>
|
||||
<svg width={width} height={height}>
|
||||
<Group top={margin.top} left={margin.left}>
|
||||
<GridRows
|
||||
top={plotTopOffset}
|
||||
left={valueAxisLeftOffset}
|
||||
scale={yScale}
|
||||
width={xMax}
|
||||
numTicks={numTicksLeftAxis}
|
||||
stroke={Color.tertiaryBackground}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={strokeDashArray}
|
||||
/>
|
||||
<GridColumns
|
||||
scale={xScale}
|
||||
height={yMax + plotTopOffset - gridColumnTopOffset}
|
||||
top={gridColumnTopOffset}
|
||||
left={valueAxisLeftOffset}
|
||||
stroke={Color.tertiaryBackground}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={strokeDashArray}
|
||||
/>
|
||||
<Line
|
||||
fill={Color.tertiaryBackground}
|
||||
to={new Point({ x: valueAxisLeftOffset, y: gridColumnTopOffset })}
|
||||
from={
|
||||
new Point({ x: valueAxisLeftOffset, y: yMax + plotTopOffset })
|
||||
}
|
||||
stroke={Color.tertiaryBackground}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={strokeDashArray}
|
||||
/>
|
||||
<Group left={valueAxisLeftMargin}>
|
||||
<GridRows
|
||||
scale={yScale}
|
||||
width={xMax}
|
||||
numTicks={numTicksLeftAxis}
|
||||
stroke={Color.tertiaryBackground}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={strokeDashArray}
|
||||
/>
|
||||
<GridColumns
|
||||
scale={xScale}
|
||||
height={yMax - gridColumnTopOffset}
|
||||
top={gridColumnTopOffset}
|
||||
stroke={Color.tertiaryBackground}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={strokeDashArray}
|
||||
/>
|
||||
<AxisBottom
|
||||
top={yMax - gridColumnTopOffset}
|
||||
scale={xScale}
|
||||
hideAxisLine
|
||||
hideTicks
|
||||
labelProps={{
|
||||
fontSize: `${categoryAxisLabelSize / 16}rem`,
|
||||
}}
|
||||
tickLabelProps={() => {
|
||||
return {
|
||||
fill: Color.label,
|
||||
fontWeight: TICK_LABEL_FONT_WEIGHT,
|
||||
textAnchor: "middle",
|
||||
};
|
||||
}}
|
||||
/>
|
||||
<AxisLeft
|
||||
scale={yScale}
|
||||
left={valueAxisLabelOffset}
|
||||
numTicks={numTicksLeftAxis}
|
||||
hideAxisLine
|
||||
labelProps={{
|
||||
fontSize: `${valueAxisLabelSize / 16}rem`,
|
||||
}}
|
||||
tickLabelProps={() => {
|
||||
return {
|
||||
fill: Color.label,
|
||||
fontWeight: TICK_LABEL_FONT_WEIGHT,
|
||||
textAnchor: "end",
|
||||
verticalAnchor: "middle",
|
||||
};
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
fill={Color.tertiaryBackground}
|
||||
to={new Point({ x: 0, y: gridColumnTopOffset })}
|
||||
from={new Point({ x: 0, y: yMax })}
|
||||
stroke={Color.tertiaryBackground}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={strokeDashArray}
|
||||
/>
|
||||
</Group>
|
||||
<Line
|
||||
fill={Color.tertiaryBackground}
|
||||
to={
|
||||
|
|
@ -208,92 +231,58 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
|
|||
from={
|
||||
new Point({
|
||||
x: xMax - margin.left - strokeWidth,
|
||||
y: yMax + plotTopOffset,
|
||||
y: yMax,
|
||||
})
|
||||
}
|
||||
stroke={Color.tertiaryBackground}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={strokeDashArray}
|
||||
/>
|
||||
<AxisBottom
|
||||
top={yMax + plotTopOffset - gridColumnTopOffset}
|
||||
left={categoryAxisLabelLeftOffset}
|
||||
scale={xScale}
|
||||
hideAxisLine
|
||||
hideTicks
|
||||
labelProps={{
|
||||
fontSize: `${categoryAxisLabelSize / 16}rem`,
|
||||
}}
|
||||
tickLabelProps={() => {
|
||||
return {
|
||||
fill: Color.label,
|
||||
fontWeight: TICK_LABEL_FONT_WEIGHT,
|
||||
};
|
||||
}}
|
||||
/>
|
||||
<AxisLeft
|
||||
scale={yScale}
|
||||
top={plotTopOffset + valueAxisLabelTopOffset}
|
||||
left={valueAxisLabelLeftOffset}
|
||||
numTicks={numTicksLeftAxis}
|
||||
hideAxisLine
|
||||
labelProps={{
|
||||
fontSize: `${valueAxisLabelSize / 16}rem`,
|
||||
}}
|
||||
tickLabelProps={() => {
|
||||
return {
|
||||
fill: Color.label,
|
||||
fontWeight: TICK_LABEL_FONT_WEIGHT,
|
||||
};
|
||||
}}
|
||||
/>
|
||||
<Group top={plotTopOffset}>
|
||||
{plotData.map((d: Stats, i) => (
|
||||
<Group key={i}>
|
||||
<VisxBoxPlot
|
||||
className={styles.boxplot}
|
||||
min={getMin(d)}
|
||||
max={getMax(d)}
|
||||
left={
|
||||
xScale(getX(d))! +
|
||||
boxPlotLeftOffset * constrainedWidth +
|
||||
valueAxisLeftOffset
|
||||
}
|
||||
firstQuartile={getFirstQuartile(d)}
|
||||
thirdQuartile={getThirdQuartile(d)}
|
||||
median={getMedian(d)}
|
||||
boxWidth={constrainedWidth * boxPlotWidthFactor}
|
||||
rx={0}
|
||||
ry={0}
|
||||
stroke={Color.label}
|
||||
strokeWidth={strokeWidth}
|
||||
valueScale={yScale}
|
||||
minProps={{
|
||||
onMouseMove: mouseOverEventHandler(d),
|
||||
onMouseLeave: hideTooltip,
|
||||
}}
|
||||
maxProps={{
|
||||
onMouseMove: mouseOverEventHandler(d),
|
||||
onMouseLeave: hideTooltip,
|
||||
}}
|
||||
boxProps={{
|
||||
onMouseMove: mouseOverEventHandler(d),
|
||||
strokeWidth: 0,
|
||||
onMouseLeave: hideTooltip,
|
||||
}}
|
||||
medianProps={{
|
||||
style: {
|
||||
stroke: Color.label,
|
||||
},
|
||||
onMouseMove: mouseOverEventHandler(d),
|
||||
onMouseLeave: () => {
|
||||
hideTooltip();
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
))}
|
||||
</Group>
|
||||
{plotData.map((d: Stats, i) => (
|
||||
<Group key={i}>
|
||||
<VisxBoxPlot
|
||||
className={styles.boxplot}
|
||||
min={getMin(d)}
|
||||
max={getMax(d)}
|
||||
left={
|
||||
xScale(getX(d))! +
|
||||
boxPlotLeftOffset * constrainedWidth +
|
||||
valueAxisLeftMargin
|
||||
}
|
||||
firstQuartile={getFirstQuartile(d)}
|
||||
thirdQuartile={getThirdQuartile(d)}
|
||||
median={getMedian(d)}
|
||||
boxWidth={constrainedWidth * boxPlotWidthFactor}
|
||||
rx={0}
|
||||
ry={0}
|
||||
stroke={Color.label}
|
||||
strokeWidth={strokeWidth}
|
||||
valueScale={yScale}
|
||||
minProps={{
|
||||
onMouseMove: mouseOverEventHandler(d),
|
||||
onMouseLeave: hideTooltip,
|
||||
}}
|
||||
maxProps={{
|
||||
onMouseMove: mouseOverEventHandler(d),
|
||||
onMouseLeave: hideTooltip,
|
||||
}}
|
||||
boxProps={{
|
||||
onMouseMove: mouseOverEventHandler(d),
|
||||
strokeWidth: 0,
|
||||
onMouseLeave: hideTooltip,
|
||||
}}
|
||||
medianProps={{
|
||||
style: {
|
||||
stroke: Color.label,
|
||||
},
|
||||
onMouseMove: mouseOverEventHandler(d),
|
||||
onMouseLeave: () => {
|
||||
hideTooltip();
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
))}
|
||||
</Group>
|
||||
</svg>
|
||||
|
||||
|
|
|
|||
|
|
@ -285,26 +285,10 @@ export default function Academics() {
|
|||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Who is your favourite professor in all of UW?"
|
||||
bodyText="The class of 2022 would like to give a shout out to Alice Gao, Carmen Bruni, Lesley Istead, and Brad Lushman as some of the best professors at UW! Go read their ratings on UWFlow! We would also like to give an honourable mention to every professor who has poured their passion into teaching. This has helped the CS Class of 2022 grow and succeed! You guys are all amazing! ❤️"
|
||||
align="right"
|
||||
>
|
||||
<WordCloud
|
||||
data={A14}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={3}
|
||||
desktopMaxFontSize={75}
|
||||
mobileMaxFontSize={48}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading=" If you took any advanced or enriched courses, how much did you enjoy each course?"
|
||||
bodyText="Advanced/enriched CS courses are rated pretty high overall, and it looks like most respondents decide to take them in earlier terms. Trying out advanced courses early and seeing if they're right for you can be a good strategy to figure out what you're comfortable with before the workload starts ramping up."
|
||||
align="center"
|
||||
noBackground
|
||||
align="right"
|
||||
>
|
||||
<StackedBarGraphHorizontal
|
||||
width={isMobile ? pageWidth / 1.5 : 600}
|
||||
|
|
@ -320,6 +304,22 @@ export default function Academics() {
|
|||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Who is your favourite professor in all of UW?"
|
||||
bodyText="The class of 2022 would like to give a shout out to Alice Gao, Carmen Bruni, Lesley Istead, and Brad Lushman as some of the best professors at UW! Go read their ratings on UWFlow! We would also like to give an honourable mention to every professor who has poured their passion into teaching. This has helped the CS Class of 2022 grow and succeed! You guys are all amazing! ❤️"
|
||||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<WordCloud
|
||||
data={A14}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={3}
|
||||
desktopMaxFontSize={75}
|
||||
mobileMaxFontSize={48}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Which study term did you think was the hardest?"
|
||||
bodyText="Second year seems to be the hardest year for most respondents with a whooping 52% of respondents agreeing on this. 2B has the second highest vote which comparatively makes the later terms look almost relaxing…🤔"
|
||||
|
|
@ -412,6 +412,7 @@ export default function Academics() {
|
|||
<BarGraphVertical data={A19i} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<SectionWrapper title="Transfer" />
|
||||
<ComponentWrapper
|
||||
heading="Did you transfer into your current program?"
|
||||
bodyText="23% of respondants transferred into their current program which is a surprisingly high number. CS is a pretty flexible degree though, so transferring your credits shouldn't be too hard! ;)"
|
||||
|
|
@ -421,7 +422,6 @@ export default function Academics() {
|
|||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<SectionWrapper title="Transfer" />
|
||||
<ComponentWrapper
|
||||
heading="What program did you transfer from?"
|
||||
bodyText="Most transfers came from MATH and CFM. One can note that people who didn't get CS as their first choice most likely got deferred into MATH. CFM transfers may be due to students not ending up liking the financial aspect of their original program."
|
||||
|
|
|
|||
|
|
@ -212,7 +212,7 @@ export default function CoopPage() {
|
|||
width={isMobile ? pageWidth / 1.5 : 600}
|
||||
height={DefaultProp.graphHeight}
|
||||
data={C7iv}
|
||||
valueAxisLeftOffset={75}
|
||||
valueAxisLeftMargin={75}
|
||||
margin={{
|
||||
top: 20,
|
||||
left: 20,
|
||||
|
|
|
|||
Loading…
Reference in New Issue