Skip to content

Commit

Permalink
[xy-chart] @vx/stats => 0.0.148
Browse files Browse the repository at this point in the history
  • Loading branch information
@williaster
williaster committed Nov 29, 2017
1 parent 8f7654a commit 53c58fd
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 120 deletions.
151 changes: 56 additions & 95 deletions packages/demo/examples/01-xy-chart/StatsSeriesExample.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
YAxis,
BoxPlotSeries,
ViolinPlotSeries,
PatternCircles,
PatternLines,
LinearGradient,
theme,
Expand All @@ -28,7 +27,7 @@ function renderViolinPlotTooltip({ datum, color }) {
<strong style={{ color }}>{label}</strong>
</div>
<div>
<strong style={{ color }}>Bin count</strong>
<strong style={{ color }}>Bin count </strong>
{binData.length}
</div>
</div>
Expand Down Expand Up @@ -112,45 +111,50 @@ function MouseEventTargetStyles({ containerEvents, color = colors.categories[7]
);
}

export function SimpleBoxPlotSeriesExample() {
const verticalBoxPlotData = statsData.map(s => s.boxPlot);
const horizontalBoxPlotData = statsData.map((s) => {
const { boxPlot } = s;
const { x, ...rest } = boxPlot;
return {
y: x,
...rest,
};
});
const values = verticalBoxPlotData.reduce((r, e) => r.push(e.min, e.max, ...e.outliers) && r, []);
const minValue = Math.min(...values);
const maxValue = Math.max(...values);
const valueDomain = [
minValue - (0.1 * Math.abs(minValue)),
maxValue + (0.1 * Math.abs(minValue)),
];
const bandScaleConfig = {
type: 'band',
paddingInner: 0.15,
paddingOuter: 0.3,
};
const valueScaleConfig = {
type: 'linear',
domain: valueDomain,
// Boxplot example
const verticalBoxPlotData = statsData.map(s => s.boxPlot);
const horizontalBoxPlotData = statsData.map((s) => {
const { boxPlot } = s;
const { x, ...rest } = boxPlot;
return {
y: x,
...rest,
};
});
const boxPlotValues = verticalBoxPlotData.reduce((r, e) => (
r.push(e.min, e.max, ...e.outliers) && r
), []);
const minBoxPlotValue = Math.min(...boxPlotValues);
const maxBoxPlotValue = Math.max(...boxPlotValues);
const valueDomain = [
minBoxPlotValue - (0.1 * Math.abs(minBoxPlotValue)),
maxBoxPlotValue + (0.1 * Math.abs(maxBoxPlotValue)),
];
const boxPlotBandScaleConfig = {
type: 'band',
paddingInner: 0.15,
paddingOuter: 0.3,
};
const boxPlotValueScaleConfig = {
type: 'linear',
domain: valueDomain,
};

export function BoxPlotSeriesExample() {
return (
<WithToggle id="toggle_boxplot_horizontal" label="Horizontal" initialChecked>
{horizontal => (
<WithToggle id="toggle_boxplot_container_e" label="Container mouse events" initialChecked>
{containerEvents => (
<WithToggle id="toggle_boxplot_show_container" label="Show mouse targets">
{showTargets => ([
showTargets && <MouseEventTargetStyles containerEvents={containerEvents} />,
showTargets &&
<MouseEventTargetStyles key="mouse_styles" containerEvents={containerEvents} />,
<ResponsiveXYChart
key="boxplot_chart"
ariaLabel="Boxplot example"
xScale={horizontal ? valueScaleConfig : bandScaleConfig}
yScale={horizontal ? bandScaleConfig : valueScaleConfig}
xScale={horizontal ? boxPlotValueScaleConfig : boxPlotBandScaleConfig}
yScale={horizontal ? boxPlotBandScaleConfig : boxPlotValueScaleConfig}
renderTooltip={renderBoxPlotTooltip}
margin={{ right: 80, left: 16, top: 16 }}
showYGrid
Expand All @@ -165,7 +169,7 @@ export function SimpleBoxPlotSeriesExample() {
id="boxplot_lines"
height={4}
width={4}
stroke={colors.categories[4]}
stroke={colors.categories[5]}
strokeWidth={1}
orientation={['diagonal']}
/>
Expand All @@ -188,23 +192,24 @@ export function SimpleBoxPlotSeriesExample() {
);
}

export function HorizontalBoxPlotViolinPlotSeriesExample() {
const boxPlotData = statsData.map((s) => {
const { boxPlot } = s;
const { x, ...rest } = boxPlot;
return {
y: x,
...rest,
};
});
const violinData = statsData.map(s => ({ y: s.boxPlot.x, binData: s.binData }));
const values = boxPlotData.reduce((r, e) => r.push(e.min, e.max, ...e.outliers) && r, []);
const minXValue = Math.min(...values);
const maxXValue = Math.max(...values);
const xDomain = [
minXValue - (0.1 * Math.abs(minXValue)),
maxXValue + (0.1 * Math.abs(maxXValue)),
];
// Violin + boxplot
const boxPlotData = statsData.map((s) => {
const { boxPlot } = s;
const { x, ...rest } = boxPlot;
return {
y: x,
...rest,
};
});
const violinData = statsData.map(s => ({ y: s.boxPlot.x, binData: s.binData }));
const values = boxPlotData.reduce((r, e) => r.push(e.min, e.max, ...e.outliers) && r, []);
const minXValue = Math.min(...values);
const maxXValue = Math.max(...values);
const xDomain = [
minXValue - (0.1 * Math.abs(minXValue)),
maxXValue + (0.1 * Math.abs(maxXValue)),
];
export function BoxPlotViolinPlotSeriesExample() {
return (
<WithToggle id="boxplot_violin_box_toggle" label="Show boxplot" initialChecked>
{showBoxplot => (
Expand All @@ -221,8 +226,8 @@ export function HorizontalBoxPlotViolinPlotSeriesExample() {
type: 'linear',
domain: xDomain,
}}
margin={{ right: 70, left: 16 }}
renderTooltip={renderBoxPlotTooltip}
margin={{ right: 70, left: 16, top: 16 }}
renderTooltip={showBoxplot ? renderBoxPlotTooltip : renderViolinPlotTooltip}
showYGrid
>
<PatternLines
Expand All @@ -242,7 +247,7 @@ export function HorizontalBoxPlotViolinPlotSeriesExample() {
stroke="#22b8cf"
strokeWidth={1}
horizontal
disableMouseEvents
disableMouseEvents={showBoxplot}
/>}
{showBoxplot &&
<BoxPlotSeries
Expand All @@ -253,7 +258,6 @@ export function HorizontalBoxPlotViolinPlotSeriesExample() {
fillOpacity={0.2}
strokeWidth={1}
horizontal
containerEvents={false}
/>}
<XAxis />
</ResponsiveXYChart>
Expand All @@ -263,46 +267,3 @@ export function HorizontalBoxPlotViolinPlotSeriesExample() {
</WithToggle>
);
}

export function ViolinPlotSeriesExample() {
const boxPlotData = statsData.map(s => s.boxPlot);
const violinData = statsData.map(s => ({ x: s.boxPlot.x, binData: s.binData }));
const values = boxPlotData.reduce((r, e) => r.push(e.min, e.max, ...e.outliers) && r, []);
const minYValue = Math.min(...values);
const maxYValue = Math.max(...values);
const yDomain = [minYValue - (0.1 * Math.abs(minYValue)),
maxYValue + (0.1 * Math.abs(minYValue))];
return (
<ResponsiveXYChart
ariaLabel="Violin plot"
xScale={{
type: 'band',
paddingInner: 0.15,
paddingOuter: 0.3,
}}
yScale={{
type: 'linear',
domain: yDomain,
}}
renderTooltip={renderViolinPlotTooltip}
showYGrid
>
<PatternCircles
id="violin_plot_circles"
height={3}
width={3}
radius={2}
stroke={colors.categories[3]}
fill="#fff"
/>
<YAxis numTicks={4} />
<ViolinPlotSeries
data={violinData}
fill="url(#violin_plot_circles)"
stroke={colors.categories[3]}
strokeWidth={1}
/>
<XAxis />
</ResponsiveXYChart>
);
}
40 changes: 16 additions & 24 deletions packages/demo/examples/01-xy-chart/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,8 @@ import ResponsiveXYChart, { dateFormatter } from './ResponsiveXYChart';
import StackedAreaExample from './StackedAreaExample';
import ScatterWithHistogram from './ScatterWithHistograms';
import {
SimpleBoxPlotSeriesExample,
HorizontalBoxPlotViolinPlotSeriesExample,
ViolinPlotSeriesExample,
BoxPlotSeriesExample,
BoxPlotViolinPlotSeriesExample,
} from './StatsSeriesExample';

import {
Expand Down Expand Up @@ -467,6 +466,20 @@ export default {
components: [CirclePackSeries],
example: () => <CirclePackWithCallback />,
},
{
description: 'Box Plot Example',
components: [BoxPlotSeries],
example: () => (
<BoxPlotSeriesExample />
),
},
{
description: 'Horizontal BoxPlot With ViolinPlot Example',
components: [BoxPlotSeries, ViolinPlotSeries],
example: () => (
<BoxPlotViolinPlotSeriesExample />
),
},
{
description: 'Mixed series',
components: [BarSeries, LineSeries, XAxis, YAxis, CrossHair],
Expand Down Expand Up @@ -495,27 +508,6 @@ export default {
</ResponsiveXYChart>
),
},
{
description: 'Box Plot Example',
components: [BoxPlotSeries],
example: () => (
<SimpleBoxPlotSeriesExample />
),
},
{
description: 'Horizontal BoxPlot With ViolinPlot Example',
components: [BoxPlotSeries, ViolinPlotSeries],
example: () => (
<HorizontalBoxPlotViolinPlotSeriesExample />
),
},
{
description: 'ViolinPlot Example',
components: [ViolinPlotSeries],
example: () => (
<ViolinPlotSeriesExample />
),
},
{
description: 'XAxis, YAxis -- orientation',
components: [XAxis, YAxis],
Expand Down
2 changes: 1 addition & 1 deletion packages/xy-chart/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"@vx/responsive": "0.0.140",
"@vx/scale": "0.0.140",
"@vx/shape": "0.0.145",
"@vx/stats": "0.0.147",
"@vx/stats": "0.0.148",
"@vx/tooltip": "0.0.140",
"@vx/voronoi": "0.0.140",
"d3-array": "^1.2.0",
Expand Down

0 comments on commit 53c58fd

Please sign in to comment.