mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-01 12:42:58 +08:00
This commit is contained in:
VWINDHA
198
dcjs/dc.d.ts
vendored
Normal file
198
dcjs/dc.d.ts
vendored
Normal file
@@ -0,0 +1,198 @@
|
||||
// Type definitions for DCJS
|
||||
// Project: https://github.com/dc-js
|
||||
// Definitions by: hans windhoff
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
// this makes only sense together with d3 and crossfilter so you need the d3.d.ts and crossfilter.d.ts files
|
||||
|
||||
///<reference path="../d3/d3.d.ts" />
|
||||
///<reference path="../crossfilter/crossfilter.d.ts" />
|
||||
|
||||
|
||||
|
||||
declare module dc {
|
||||
|
||||
// helper for get/set situation
|
||||
interface IGetSet<T, V> {
|
||||
(): T;
|
||||
(T): V;
|
||||
}
|
||||
|
||||
export interface IBaseChart<T> {
|
||||
width: IGetSet<number, T>;
|
||||
height: IGetSet<number, T>;
|
||||
minWidth: IGetSet<number, T>;
|
||||
minHeight: IGetSet<number, T>;
|
||||
dimension: IGetSet<number, T>;
|
||||
group: IGetSet<string, T>; // not sure here
|
||||
transitionDuration: IGetSet<number, T>;
|
||||
colors: IGetSet<string[], T>;
|
||||
keyAccessor: IGetSet<(d) => number, T>;
|
||||
valueAccessor: IGetSet<(d) => number, T>;
|
||||
label: IGetSet<(any) => string, T>;
|
||||
renderLabel: IGetSet<boolean, T>;
|
||||
renderlet: (fnctn: (T) => void) => T;
|
||||
title: IGetSet<(any) => string, T>;
|
||||
filter: IGetSet<any, T>;
|
||||
filterAll: () => void;
|
||||
expireCache: () => void;
|
||||
legend: (ILegendwidget) => T;
|
||||
chartID: () => number;
|
||||
options: (Object)=>void ;
|
||||
select: (selector: D3.Selection) => D3.Selection;
|
||||
selectAll: (selector: D3.Selection) => D3.Selection;
|
||||
}
|
||||
|
||||
export interface IEvents {
|
||||
trigger(fnctn: () => void, delay?: number);
|
||||
}
|
||||
|
||||
export var events: IEvents;
|
||||
|
||||
export interface IListener<T> {
|
||||
on: (eventName: string, fnctn: (IChart) => void) => T;
|
||||
}
|
||||
|
||||
export interface ImarginObj {
|
||||
top: number;
|
||||
right: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
|
||||
}
|
||||
|
||||
export interface IMarginable<T> {
|
||||
margins: IGetSet<ImarginObj, T>;
|
||||
}
|
||||
|
||||
// abstract interfaces
|
||||
export interface IAbstractColorChart<T> {
|
||||
colorDomain: IGetSet<number[], T>;
|
||||
}
|
||||
export interface IAbstractStackableChart<T> {
|
||||
stack: (group, name?, retriever?) => T;
|
||||
}
|
||||
|
||||
export interface IAbstractCoordinateGridChart<T> {
|
||||
x: IGetSet<any, T>;
|
||||
y: IGetSet<any, T>;
|
||||
elasticY: IGetSet<boolean, T>;
|
||||
xAxis: IGetSet<D3.Svg.Axis, T>;
|
||||
yAxis: IGetSet<D3.Svg.Axis, T>;
|
||||
yAxisPadding: IGetSet<number, T>;
|
||||
xAxisPadding: IGetSet<number, T>;
|
||||
renderHorizontalGridLines: IGetSet<boolean, T>;
|
||||
|
||||
}
|
||||
|
||||
export interface IAbstractBubblechart<T> {
|
||||
r: IGetSet<number, T>;
|
||||
radiusValueAccessor: IGetSet<(d) => number, T>;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// function interfaces
|
||||
export interface columnFunction {
|
||||
(any): any;
|
||||
}
|
||||
export interface sortbyFunction {
|
||||
(any): any;
|
||||
}
|
||||
export interface orderFunction {
|
||||
<T>(a: T, b: T): number;
|
||||
}
|
||||
|
||||
|
||||
// chart interfaces
|
||||
export interface ILegendwidget {
|
||||
x: IGetSet<number, number>;
|
||||
y: IGetSet<number, number>;
|
||||
gap: IGetSet<number, number>;
|
||||
itemHeight: IGetSet<number, number>;
|
||||
horizontal: IGetSet<boolean, boolean>;
|
||||
legendWidth: IGetSet<number, number>;
|
||||
itemWidth: IGetSet<number, number>;
|
||||
}
|
||||
|
||||
export interface IBubblechart extends
|
||||
IBaseChart<IBubblechart>,
|
||||
IAbstractColorChart<IBubblechart>,
|
||||
IAbstractBubblechart<IBubblechart>,
|
||||
IAbstractCoordinateGridChart<IBubblechart>,
|
||||
IMarginable<IBubblechart>,
|
||||
IListener<IBubblechart> {
|
||||
}
|
||||
|
||||
export interface IPiechart extends
|
||||
IBaseChart<IPiechart>,
|
||||
IAbstractColorChart<IPiechart>,
|
||||
IAbstractBubblechart<IPiechart>,
|
||||
IAbstractCoordinateGridChart<IPiechart>,
|
||||
IMarginable<IPiechart>,
|
||||
IListener<IPiechart> {
|
||||
radius: IGetSet<number, IPiechart>;
|
||||
minAngleForLabel: IGetSet<number, IPiechart>;
|
||||
|
||||
}
|
||||
|
||||
export interface IBarchart extends
|
||||
IBaseChart<IBarchart>,
|
||||
IAbstractStackableChart<IBarchart>,
|
||||
IAbstractCoordinateGridChart<IBarchart>,
|
||||
IMarginable<IBarchart>,
|
||||
IListener<IBarchart> {
|
||||
centerBar: (boolean) => IBarchart;
|
||||
gap: (gapBetweenBars: number) => IBarchart;
|
||||
}
|
||||
|
||||
export interface ILinechart extends
|
||||
IBaseChart<ILinechart>,
|
||||
IAbstractStackableChart<ILinechart>,
|
||||
IAbstractCoordinateGridChart<ILinechart>,
|
||||
IMarginable<ILinechart>,
|
||||
IListener<ILinechart> {
|
||||
}
|
||||
|
||||
|
||||
export interface IDatachart extends
|
||||
IBaseChart<IDatachart>,
|
||||
IAbstractStackableChart<IDatachart>,
|
||||
IAbstractCoordinateGridChart<IDatachart>,
|
||||
IMarginable<IDatachart>,
|
||||
IListener<IDatachart> {
|
||||
size: IGetSet<number, IDatachart>;
|
||||
columns: IGetSet<columnFunction[], IDatachart>;
|
||||
sortBy: IGetSet<sortbyFunction[], IDatachart>;
|
||||
order: IGetSet<orderFunction[], IDatachart>;
|
||||
}
|
||||
|
||||
|
||||
export interface IRowchart extends
|
||||
IBaseChart<IRowchart>,
|
||||
IAbstractColorChart<IRowchart>,
|
||||
IAbstractStackableChart<IRowchart>,
|
||||
IAbstractCoordinateGridChart<IRowchart>,
|
||||
IMarginable<IRowchart>,
|
||||
IListener<IRowchart> {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// utilities
|
||||
export interface IChartGroup { }
|
||||
|
||||
export function filterAll(chartGroup?: IChartGroup): void;
|
||||
export function renderAll(chartGroup?: IChartGroup);
|
||||
export function redrawAll(chartGroup?: IChartGroup);
|
||||
|
||||
|
||||
export function bubbleChart(cssSel: string): IBubblechart;
|
||||
export function pieChart(cssSel: string): IPiechart;
|
||||
export function barChart(cssSel: string): IBarchart;
|
||||
export function lineChart(cssSel: string): ILinechart;
|
||||
export function dataTable(cssSel: string): IDatachart;
|
||||
export function rowChart(cssSel: string): IRowchart;
|
||||
|
||||
|
||||
}
|
||||
244
dcjs/dc.test.ts
Normal file
244
dcjs/dc.test.ts
Normal file
@@ -0,0 +1,244 @@
|
||||
///<reference path="../d3/d3.d.ts" />
|
||||
///<reference path="../crossfilter/crossfilter.d.ts" />
|
||||
///<reference path="dc.d.ts" />
|
||||
|
||||
|
||||
interface IYelpData {
|
||||
city: string;
|
||||
review_count: number;
|
||||
name: string;
|
||||
neighborhoods: string[];
|
||||
type: string;
|
||||
business_id: string;
|
||||
full_address: string;
|
||||
state: string;
|
||||
longitude: number;
|
||||
stars: number;
|
||||
latitude: number;
|
||||
open: boolean;
|
||||
categories: string[]
|
||||
}
|
||||
|
||||
|
||||
interface IYelpDataExtended {
|
||||
count: number;
|
||||
review_sum: number;
|
||||
star_sum: number;
|
||||
review_avg: number;
|
||||
star_avg: number;
|
||||
}
|
||||
|
||||
|
||||
/********************************************************
|
||||
* *
|
||||
* dj.js example using Yelp Kaggle Test Dataset *
|
||||
* Eamonn O'Loughlin 9th May 2013 *
|
||||
* *
|
||||
********************************************************/
|
||||
|
||||
/********************************************************
|
||||
* *
|
||||
* Step0: Load data from json file *
|
||||
* *
|
||||
********************************************************/
|
||||
d3.json("data/yelp_test_set_business.json", function (yelp_data:IYelpData[]) {
|
||||
|
||||
/********************************************************
|
||||
* *
|
||||
* Step1: Create the dc.js chart objects & ling to div *
|
||||
* *
|
||||
********************************************************/
|
||||
var bubbleChart = dc.bubbleChart("#dc-bubble-graph");
|
||||
var pieChart = dc.pieChart("#dc-pie-graph");
|
||||
var volumeChart = dc.barChart("#dc-volume-chart");
|
||||
var lineChart = dc.lineChart("#dc-line-chart");
|
||||
var dataTable = dc.dataTable("#dc-table-graph");
|
||||
var rowChart = dc.rowChart("#dc-row-graph");
|
||||
|
||||
/********************************************************
|
||||
* *
|
||||
* Step2: Run data through crossfilter *
|
||||
* *
|
||||
********************************************************/
|
||||
var ndx = crossfilter(yelp_data);
|
||||
|
||||
/********************************************************
|
||||
* *
|
||||
* Step3: Create Dimension that we'll need *
|
||||
* *
|
||||
********************************************************/
|
||||
|
||||
// for volumechart
|
||||
var cityDimension = ndx.dimension(function (d) { return d.city; });
|
||||
var cityGroup = cityDimension.group();
|
||||
var cityDimensionGroup = cityDimension.group().reduce(
|
||||
//add
|
||||
function(p: IYelpDataExtended,v:IYelpData){
|
||||
++p.count;
|
||||
p.review_sum += v.review_count;
|
||||
p.star_sum += v.stars;
|
||||
p.review_avg = p.review_sum / p.count;
|
||||
p.star_avg = p.star_sum / p.count;
|
||||
return p;
|
||||
},
|
||||
//remove
|
||||
function(p: IYelpDataExtended,v:IYelpData){
|
||||
--p.count;
|
||||
p.review_sum -= v.review_count;
|
||||
p.star_sum -= v.stars;
|
||||
p.review_avg = p.review_sum / p.count;
|
||||
p.star_avg = p.star_sum / p.count;
|
||||
return p;
|
||||
},
|
||||
//init
|
||||
function(){
|
||||
return {count:0, review_sum: 0, star_sum: 0, review_avg: 0, star_avg: 0};
|
||||
}
|
||||
);
|
||||
|
||||
// for pieChart
|
||||
var startValue = ndx.dimension(function (d) {
|
||||
return d.stars*1.0;
|
||||
});
|
||||
var startValueGroup = startValue.group();
|
||||
|
||||
// For datatable
|
||||
var businessDimension = ndx.dimension(function (d) { return d.business_id; });
|
||||
/********************************************************
|
||||
* *
|
||||
* Step4: Create the Visualisations *
|
||||
* *
|
||||
********************************************************/
|
||||
|
||||
bubbleChart.width(650)
|
||||
.height(300)
|
||||
.dimension(cityDimension)
|
||||
.group(cityDimensionGroup)
|
||||
.transitionDuration(1500)
|
||||
.colors(["#a60000","#ff0000", "#ff4040","#ff7373","#67e667","#39e639","#00cc00"])
|
||||
.colorDomain([-12000, 12000])
|
||||
|
||||
.x(d3.scale.linear().domain([0, 5.5]))
|
||||
.y(d3.scale.linear().domain([0, 5.5]))
|
||||
.r(d3.scale.linear().domain([0, 2500]))
|
||||
.keyAccessor(function (p) {
|
||||
return p.value.star_avg;
|
||||
})
|
||||
.valueAccessor(function (p) {
|
||||
return p.value.review_avg;
|
||||
})
|
||||
.radiusValueAccessor(function (p) {
|
||||
return p.value.count;
|
||||
})
|
||||
.transitionDuration(1500)
|
||||
.elasticY(true)
|
||||
.yAxisPadding(1)
|
||||
.xAxisPadding(1)
|
||||
.label(function (p) {
|
||||
return p.key;
|
||||
})
|
||||
.renderLabel(true)
|
||||
.renderlet(function (chart) {
|
||||
rowChart.filter(chart.filter());
|
||||
})
|
||||
.on("postRedraw", function (chart) {
|
||||
dc.events.trigger(function () {
|
||||
rowChart.filter(chart.filter());
|
||||
});
|
||||
});
|
||||
;
|
||||
|
||||
|
||||
pieChart.width(200)
|
||||
.height(200)
|
||||
.transitionDuration(1500)
|
||||
.dimension(startValue)
|
||||
.group(startValueGroup)
|
||||
.radius(90)
|
||||
.minAngleForLabel(0)
|
||||
.label(function(d) { return d.data.key; })
|
||||
.on("filtered", function (chart) {
|
||||
dc.events.trigger(function () {
|
||||
if(chart.filter()) {
|
||||
console.log(chart.filter());
|
||||
volumeChart.filter([chart.filter()-.25,chart.filter()-(-0.25)]);
|
||||
}
|
||||
else volumeChart.filterAll();
|
||||
});
|
||||
});
|
||||
|
||||
volumeChart.width(230)
|
||||
.height(200)
|
||||
.dimension(startValue)
|
||||
.group(startValueGroup)
|
||||
.transitionDuration(1500)
|
||||
.centerBar(true)
|
||||
.gap(17)
|
||||
.x(d3.scale.linear().domain([0.5, 5.5]))
|
||||
.elasticY(true)
|
||||
.on("filtered", function (chart) {
|
||||
dc.events.trigger(function () {
|
||||
if(chart.filter()) {
|
||||
console.log(chart.filter());
|
||||
lineChart.filter(chart.filter());
|
||||
}
|
||||
else
|
||||
{lineChart.filterAll()}
|
||||
});
|
||||
})
|
||||
.xAxis().tickFormat(function(v) {return v;});
|
||||
|
||||
console.log(startValueGroup.top(1)[0].value);
|
||||
|
||||
lineChart.width(230)
|
||||
.height(200)
|
||||
.dimension(startValue)
|
||||
.group(startValueGroup)
|
||||
.x(d3.scale.linear().domain([0.5, 5.5]))
|
||||
.valueAccessor(function(d) {
|
||||
return d.value;
|
||||
})
|
||||
.renderHorizontalGridLines(true)
|
||||
.elasticY(true)
|
||||
.xAxis().tickFormat(function(v) {return v;}); ;
|
||||
|
||||
rowChart.width(340)
|
||||
.height(850)
|
||||
.dimension(cityDimension)
|
||||
.group(cityGroup)
|
||||
.renderLabel(true)
|
||||
.colors(["#a60000","#ff0000", "#ff4040","#ff7373","#67e667","#39e639","#00cc00"])
|
||||
.colorDomain([0, 0])
|
||||
.renderlet(function (chart) {
|
||||
bubbleChart.filter(chart.filter());
|
||||
})
|
||||
.on("filtered", function (chart) {
|
||||
dc.events.trigger(function () {
|
||||
bubbleChart.filter(chart.filter());
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
dataTable.width(800).height(800)
|
||||
.dimension(businessDimension)
|
||||
.group(function(d) { return "List of all Selected Businesses"
|
||||
})
|
||||
.size(100)
|
||||
.columns([
|
||||
function(d) { return d.name; },
|
||||
function(d) { return d.city; },
|
||||
function(d) { return d.stars; },
|
||||
function(d) { return d.review_count; },
|
||||
function(d) { return '<a href=\"http://maps.google.com/maps?z=12&t=m&q=loc:' + d.latitude + '+' + d.longitude +"\" target=\"_blank\">Map</a>"}
|
||||
])
|
||||
.sortBy(function(d){ return d.stars; })
|
||||
// (optional) sort order, :default ascending
|
||||
.order(d3.ascending);
|
||||
/********************************************************
|
||||
* *
|
||||
* Step6: Render the Charts *
|
||||
* *
|
||||
********************************************************/
|
||||
|
||||
dc.renderAll();
|
||||
});
|
||||
Reference in New Issue
Block a user