427b7b9c91
- new dataset-by-station-selector.component with angular/material/dialog - zoom.componentn: disable button at lasst zoom level
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import * as d3 from 'd3';
|
|
|
|
@Component({
|
|
selector: 'app-bar',
|
|
templateUrl: './bar.component.html',
|
|
styleUrls: ['./bar.component.css']
|
|
})
|
|
export class BarComponent implements OnInit {
|
|
|
|
private data = [
|
|
{ "Framework": "Vue", "Stars": "166443", "Released": "2014" },
|
|
{ "Framework": "React", "Stars": "150793", "Released": "2013" },
|
|
{ "Framework": "Angular", "Stars": "62342", "Released": "2016" },
|
|
{ "Framework": "Backbone", "Stars": "27647", "Released": "2010" },
|
|
{ "Framework": "Ember", "Stars": "21471", "Released": "2011" },
|
|
];
|
|
private svg: any;
|
|
private margin = 50;
|
|
private width = 750 - (this.margin * 2);
|
|
private height = 400 - (this.margin * 2);
|
|
|
|
constructor() { }
|
|
|
|
ngOnInit(): void {
|
|
this.createSvg();
|
|
this.drawBars(this.data);
|
|
}
|
|
|
|
private createSvg(): void {
|
|
this.svg = d3.select("figure#bar")
|
|
.append("svg")
|
|
.attr("width", this.width + (this.margin * 2))
|
|
.attr("height", this.height + (this.margin * 2))
|
|
.append("g")
|
|
.attr("transform", "translate(" + this.margin + "," + this.margin + ")");
|
|
}
|
|
|
|
private drawBars(data: any[]): void {
|
|
// Create the X-axis band scale
|
|
const x = d3.scaleBand()
|
|
.range([0, this.width])
|
|
.domain(data.map(d => d.Framework))
|
|
.padding(0.2);
|
|
|
|
// Draw the X-axis on the DOM
|
|
this.svg.append("g")
|
|
.attr("transform", "translate(0," + this.height + ")")
|
|
.call(d3.axisBottom(x))
|
|
.selectAll("text")
|
|
.attr("transform", "translate(-10,0)rotate(-45)")
|
|
.style("text-anchor", "end");
|
|
|
|
// Create the Y-axis band scale
|
|
const y = d3.scaleLinear()
|
|
.domain([0, 200000])
|
|
.range([this.height, 0]);
|
|
|
|
// Draw the Y-axis on the DOM
|
|
this.svg.append("g")
|
|
.call(d3.axisLeft(y));
|
|
|
|
// Create and fill the bars
|
|
this.svg.selectAll("bars")
|
|
.data(data)
|
|
.enter()
|
|
.append("rect")
|
|
.attr("x", (d: any) => x(d.Framework))
|
|
.attr("y", (d: any) => y(d.Stars))
|
|
.attr("width", x.bandwidth())
|
|
.attr("height",(d: any) => this.height - y(d.Stars))
|
|
.attr("fill", "#d04a35");
|
|
}
|
|
|
|
}
|