Skip to content

Instantly share code, notes, and snippets.

@caspg
Last active December 10, 2016 18:58
Show Gist options
  • Save caspg/ef9b9834d15a2138c102cee186e35b6a to your computer and use it in GitHub Desktop.
Save caspg/ef9b9834d15a2138c102cee186e35b6a to your computer and use it in GitHub Desktop.
// src/Chart/Chart.jsx
import React, { Component } from 'react'
import { scaleBand, scaleLinear } from 'd3-scale'
import data from '../../data'
export default class Chart extends Component {
constructor() {
super()
this.xScale = scaleBand()
this.yScale = scaleLinear()
}
render() {
const margins = { top: 50, right: 20, bottom: 100, left: 60 },
const svgDimensions = { width: 800, height: 500 }
const maxValue = Math.max(...data.map(d => d.value))
// scaleBand type
const xScale = this.xScale
.padding(0.5)
// scaleBand domain should be an array of specific values
// in our case, we want to use movie titles
.domain(data.map(d => d.title))
.range([margins.left, svgDimensions.width - margins.right])
// scaleLinear type
const yScale = this.yScale
// scaleLinear domain required at least two values, min and max
.domain([0, maxValue])
.range([svgDimensions.height - margins.bottom, margins.top])
return (
<svg width={svgDimensions.width} height={svgDimensions.height}>
// Bars and Axis comes here
</svg>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment