Grouped Bar charts.

Simple tutorial for creation of d3 grouped bar charts.

by torresomar

HTML

<script src="https://d3js.org/d3-selection.v1.min.js"></script>
    <div id="grouped-bar" class="grouped-bar">
    </div>

JavaScript

// Define the SVG dimensions.
const margin = {
  top: 25,
  right: 25,
  bottom: 25,
  left: 25
}
const height = 310;
const width = 650;
// Use the select library to transform the DOM by selecting our node and appending a new SVG one with certain modifications
const svg = d3.select('#grouped-bar') // Using the id of the div in our html template
    .append('svg')
    .attr('class', 'grouped-bars-svg')
    .attr('height', height)
    .attr('width', width)
		.style('background', '#fff');
// Create an object with the color mappings rating_key => color
const colors = {
  all: '#CFDFA9',
  top: '#F2DA8E',
  audience: '#EA9485'
}
// Append a g element into our SVG
const main = svg.append('g')
  .attr('class', 'grouped-bars-main-group')
  .attr('transform', `translate(${margin.left},${margin.top})`);

main.append('rect')
  .attr('width', width - margin.left - margin.right)
  .attr('height', height - margin.top - margin.bottom)
  .attr('fill', 'none')
	.attr('stroke', '#222')
  .attr('stroke-dasharray', '2, 2');
	
// Make a request to obtain our dataset
fetch('https://s3-us-west-2.amazonaws.com/data.kryptophsky.com/01-grouped-bar-charts-d3/movies.json')
  .then(res => { return res.json() })
  .then(renderGraph)
  .catch(err => { console.log('Error...', err) });

function renderGraph(data) {
	// TODO
}