Commit a8de0fd1 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

skeleton for barplot

parent fae3bb1c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Barplot</title>
<script src="http://localhost:8080/ada-charts.js"></script>
</head>
<body>
<div id="barplot-controls">
<span>API examples:</span>
<button onclick="update()">update()</button>
</div>
<div id="barplot-container"></div>
</body>
</html>
<script>
/**
* Helper function. Do not copy
*/
/**
* API Documentation below this point
*/
const container = document.querySelector('#barplot-container');
const barplot = AdaCharts.chart({ chartType: 'barplot', container });
function update() {
barplot.update({
title: "Gender by Site ID",
categories: [ "Undefined", "Female", "Male" ],
series: [
{
"name": "CHEM",
"data": [
{ "name": "Undefined", "y": 0 },
{ "name": "Female", "y": 27, "key": "2" },
{ "name": "Male", "y": 40, "key": "1"}
],
"colorByPoint": false
},
{
"name": "CHL",
"data": [
{ "name": "Undefined", "y": 0 },
{ "name": "Female", "y": 437, "key": "2" },
{ "name": "Male", "y": 710, "key": "1" }
],
"colorByPoint": false
},
{
"name": "Flying Team",
"data": [
{ "name": "Undefined", "y": 0 },
{ "name": "Female", "y": 15, "key": "2" },
{ "name": "Male", "y": 26, "key": "1" }
],
"colorByPoint": false
},
{
"name": "La Tulipe",
"data": [
{ "name": "Undefined", "y": 0 },
{ "name": "Female", "y": 3, "key": "2" },
{ "name": "Male", "y": 30, "key": "1" }
],
"colorByPoint": false
},
{
"name": "CIEC (discontinued; use CHL instead)",
"data": [
{ "name": "Undefined", "y": 0 },
{ "name": "Female", "y": 435, "key": "2" },
{ "name": "Male", "y": 394, "key": "1" }
],
"colorByPoint": false
},
{
"name": "Undefined",
"data": [
{ "name": "Undefined", "y": 9 },
{ "name": "Female", "y": 3, "key": "2" },
{ "name": "Male", "y": 0, "key": "1" }
],
"colorByPoint": false
}
],
inverted: false,
xAxisCaption: null,
yAxisCaption: "Count",
showLabels: true,
showLegend: true
});
}
function toPNG() {
barplot.toPNG();
}
function toSVG() {
barplot.toSVG();
}
document.addEventListener('DOMContentLoaded', update, false);
</script>
<style>
body {
display: flex;
flex-direction: row;
}
#barplot-controls {
display: flex;
flex-direction: column;
}
#barplot-container {
width: 50vw;
}
</style>
import * as d3 from 'd3';
import Chart from '../Chart';
import '../../assets/css/barplot.css';
export default class extends Chart {
constructor({ container }) {
super({ container });
this.svg = d3.select(container)
.append('svg')
.attr('class', 'ac-box-svg ada-chart')
.append('g');
}
static get name() {
return 'barplot';
}
render({
title,
categories,
series
}) {
const margin = {
top: this.containerWidth / 15,
right: this.containerWidth / 15,
bottom: this.containerWidth / 15,
left: this.containerWidth / 15,
};
const width = this.containerWidth - margin.left - margin.right;
const height = this.containerWidth - margin.top - margin.bottom;
d3.select(this.container).select('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
const innerPadding = width / 20;
const outerPadding = innerPadding;
const x = d3.scaleBand()
.domain(categories)
.range([0, width])
.paddingInner(innerPadding)
.paddingOuter(outerPadding);
const ys = series
.reduce((prev, curr) => prev.concat(curr.data), [])
.map(d => d.y);
const y = d3.scaleLinear()
.domain(d3.extent(ys))
.range([height, 0]);
const barGroup = this.svg.selectAll('.bar-group')
.data(categories);
barGroup.enter()
.append('g')
.attr('class', 'bar-group')
.x(d => x(d));
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment