Home
Creating a scatterplot, and scatterplot using a custom point with XYFrame and hover behavior and styling.
This page uses box office data from Box Office Mojo.
Scatterplot
The XYFrame takes points as an array of objects. Each object represents a point.
In this example, we pass a xExtent={[0]} and yExtent={[0]} to set the lower bound of the xAxis and yAxis to zero, otherwise it would create an exent based on the minimum and maximum values on your xAccessor and yAccessor. Your accessors can be a string key to access the property or a function.
import { XYFrame } from "semiotic"
const frameProps = {
/* --- Data --- */
points: [{ theaterCount: 4, rank: 18, grossWeekly: 327616, title: "Ex Machina" },
{ theaterCount: 39, rank: 15, grossWeekly: 1150814, title: "Ex Machina" }, ... ],
/* --- Size --- */
size: [700,400],
margin: { left: 60, bottom: 90, right: 10, top: 40 },
/* --- Process --- */
xAccessor: "theaterCount",
yAccessor: "rank",
yExtent: [0],
xExtent: [0],
/* --- Customize --- */
pointStyle: d => {
return {
r: 5,
fill:
d.title === "Ex Machina"
? "#ac58e5"
: d.title === "Far from the Madding Crowd"
? "#E0488B"
: "#9fd0cb"
}
},
title: (
<text textAnchor="middle">
Theaters showing <tspan fill={"#ac58e5"}>Ex Machina</tspan> vs{" "}
<tspan fill={"#E0488B"}>Far from the Madding Crowd</tspan>
</text>
),
axes: [{ orient: "left", label: "Rank" },
{ orient: "bottom", label: { name: "Theaters", locationDistance: 55 } }]
}
export default () => {
return <XYFrame {...frameProps} />
} Scatterplot with Custom Points
XYFrame takes a customPointMark which allows you to render the points with custom logic.
customPointMark={({ d }) => { return ( <g> <circle r={rScale(d.grossWeekly)} stroke="white" /> <text>{d.week}</text> </g> ) }}
Scatterplot with Hover
Enabeling the hoverAnnotation={true} prop gives you default tooltips based on the xAccessor and yAccessor values. You can override this default by passing a tooltipContent function, to learn more, see the tooltips guide.
Scatterplot with ResponsiveWidth
To make your chart responsive, instead of using XYFrame use ResponsiveXYFrame and set the responsiveWidth={true}.