PROJECTS
Victory
There are plenty of sites already using Victory to display their
data. Here are a few to check out and see what’s possible.History of Sumo
https://projects.fivethirtyeight.com/sumo/
FiveThirtyEight is a site specialising in analysing data around
sports, politics and economics. To accompany an article detailing
the final of the Haru Basho sumo wrestling tournament, Matthew
Conlen created an interactive history of wrestlers since 1761. Key
figures are highlighted in an interactive guided tour, detailing their
significance in the history of the sport.CIVIC
http://civicplatform.org/
The CIVIC platform is an open-source collection of both data and
reusable component libraries that help present public issues in an
accessible manner. Many of its charting components use Victory
to share information in a common visual style. Each one is built to
simplify the visualisation process for developers by abstracting
away chart set up.Is Parcel 2 Ready Yet?
https://isparcel2readyyet.com/
In order to help field questions on how the next major release
of the web application bundler Parcel is coming along, its team
created a simple website that tracks files with missing tests.
As progress is made the chart automatically updates. Along the
bottom there is a representation of what files have or do not have
full test coverage.FURTHER VICTORY
INSPIRATION
RESOURCEScolour of the different segments, we add styles to
the data object.
These will also take functions and apply the result
of that function to each value. The function is passed
information about each data point, with the datum
object containing everything we supplied about that
particular point.
We can then construct a function that calculates
the style for each segment. If uptime dips below 98
per cent, colour the uptime part red, else leave it
green. Don’t apply colour to the downtime segment.style={{ data: {
fill: ({ datum }) => {
const color =
datum.y > 0.98? “var(--success-color)” : “var(--
warning-color)”;
return datum.x === “uptime”? color : “transparent”;
}
} }}Each chart component creates its own SVG container
by default. However, if we want to combine
chart features we need to make our own. The
VictoryContainer component handles a lot of the setup
for us. We need to only supply the height and width
for it to draw into.
Wrap the VictoryPie component in a VictoryContainer.
We also need to mark the pie chart as standalone.<VictoryContainer height={400} width={400}>
<VictoryPie [...] standalone={false} />
</VictoryContainer>We can now add the percentage to the chart by
including it inside the container. To include text, the
VictoryLabel component takes a text prop and a set of
other props that describe its appearance.<VictoryLabel
st yle={...}
text={`${Math.round(percentage * 100)}%`}
textAnchor=”middle”
verticalAnchor=”middle”
x={200}
y={200}
/>With the uptime chart complete, we can move on to
the line chart. The ResponseTime component tracks
how each endpoint is performing minute by minute.
Open it up from ‘src/ResponseTime/index.js’ and
add a VictoryChart component. By default, this will
draw horizontal and vertical axes. The domain prop
tells the chart to go from 0 to 5 in the vertical axis,