d3:bar-chart

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

CSS

.chart-container {
  background: oldlace;
}

JavaScript

const width = 500;
const height = 400;

const margin = {
  top: 30,
  right: 20,
  bottom: 40,
  left: 30,
};

const data = [{
    category: 'football',
    value: 9
  },
  {
    category: 'tennis',
    value: 7
  },
  {
    category: 'athletics',
    value: 5
  },
  {
    category: 'gymnastics',
    value: 3
  },
  {
    category: 'chess',
    value: 2
  },
];

const categoriesScale = d3.scaleBand()
  .domain(data.map(d => d.category))
  .range([margin.left, width - margin.right])
  .paddingInner(0.5)
  .paddingOuter(0.2)

const minValue = 0;
const maxValue = d3.max(data.map(d => d.value));

const valuesScale = d3.scaleLinear()
  .domain([minValue, maxValue])
  .range([height - margin.bottom, margin.top])

const svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .attr('class', 'chart-container')

const xAxis = d3.axisBottom(categoriesScale)
const yAxis = d3.axisLeft(valuesScale)

const colorScale = d3.scaleOrdinal()
	.domain(data.map(d => d.category))
  .range(d3.schemeCategory10)
  
svg.append('g')
  .selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', d => categoriesScale(d.category))
  .attr('width', categoriesScale.bandwidth)
  .attr('height', d => height - margin.bottom - valuesScale(d.value))
  .attr('y', d => valuesScale(d.value))
  .attr('fill', d => colorScale(d => d.category))

svg.append('g')
  .attr('transform', `translate(0, ${height - margin.bottom})`)
  .call(xAxis);

svg.append('g')
  .attr('transform', `translate(${margin.left}, 0)`)
  .call(yAxis)