Back to Gallery

Polar Cardioid

const colors = [ "#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"];

class App extends React.Component {
  render() {
    return (
      <VictoryChart polar
        theme={VictoryTheme.material}
        domain={{ y: [0, 10] }}
      >
        <VictoryPolarAxis dependentAxis
          style={{ axis: { stroke: "none" } }}
          tickFormat={() => ""}
        />
        <VictoryPolarAxis
          tickValues={[0, Math.PI / 2, Math.PI, (3 * Math.PI) / 2]}
          tickFormat={["2π", "π/2", "π", "3π/2"]}
          labelPlacement="vertical"
        />
        { [5, 4, 3, 2, 1].map((val, i) => {
          return (
            <VictoryLine
              key={i}
              samples={100}
              style={{ data: { stroke: colors[i] } }}
              y={(d) => val * (1 - Math.cos(d.x))}
            />
          );
        })}
      </VictoryChart>
    );
  }
}

render(<App/>);