Visualizing Data in React: An Intro to Victory

[
{
video: "Blue Is Pretty Special: \nHow Nature Gets the Blues",
views: 235678
},
{
video: "The Insect Nothing Messes With: \nMeet the Velvet Ant",
views: 502738
},
{
video: "Bacteria Could Someday \nPower Our Cell Phones",
views: 140846
},
{
video: "5 Ways Orcas Have Earned \nthe Nickname 'Killer Whale'",
views: 192457
},
]
Baby’s first Victory chart!
import { VictoryChart, VictoryAxis, VictoryBar } from 'victory';
<VictoryChart>
<VictoryAxis />
<VictoryAxis
// this tells Victory this component is for the y axis
dependentAxis
/>
<VictoryBar data={videoData} x="video" y="views" />
</VictoryChart>
<VictoryChart>
<VictoryAxis />
<VictoryAxis
dependentAxis
tickFormat = { x => (`${x / 1000}k views`) }
/>

<VictoryBar data={videoData} x=”video” y=”views” />
</VictoryChart>
<VictoryChart domainPadding={20} theme={VictoryTheme.material}>
<VictoryAxis
style={{ tickLabels: { fontSize: 5 } }}
/>
<VictoryAxis
dependentAxis
style={{ tickLabels: { fontSize: 5 } }}
tickFormat={y => (`${y / 1000}k views`)}
/>
<VictoryBar data={videoData} x="video" y="views" />
</VictoryChart>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store