How to use dc - 10 common examples
To help you get started, we’ve selected a few dc examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / types / dc / dc-tests.ts View on Github 
(d: IYelpData) => d.name,
(d: IYelpData) => d.city,
(d: IYelpData) => d.stars,
(d: IYelpData) => d.review_count,
(d: IYelpData) => '<a href="\"http://maps.google.com/maps?z=12&t=m&q=loc:'">Map</a>"
])
.sortBy((d: IYelpData) => d.stars)
// (optional) sort order, :default ascending
.order(d3.ascending);
/********************************************************
* *
* Step6: Render the Charts *
* *
********************************************************/
dc.renderAll();
});d3.json("data/yelp_test_set_business.json", (yelp_data:IYelpData[]) => {
/********************************************************
* *
* Step1: Create the dc.js chart objects & ling to div *
* *
********************************************************/
var bubbleChart: dc.BubbleChart = dc.bubbleChart("#dc-bubble-graph");
var pieChart: dc.PieChart = dc.pieChart("#dc-pie-graph");
var volumeChart: dc.BarChart = dc.barChart("#dc-volume-chart");
var lineChart: dc.LineChart = dc.lineChart("#dc-line-chart");
var dataTable: dc.DataTableWidget = dc.dataTable("#dc-table-graph");
var rowChart: dc.RowChart = dc.rowChart("#dc-row-graph");
/********************************************************
* *
* Step2: Run data through crossfilter *
* *
********************************************************/
var ndx: CrossFilter.CrossFilter = crossfilter(yelp_data);
/********************************************************
* *
* Step3: Create Dimension that we'll need *
* *
********************************************************/
// for volumechartd3.json("data/yelp_test_set_business.json", (yelp_data:IYelpData[]) => {
/********************************************************
* *
* Step1: Create the dc.js chart objects & ling to div *
* *
********************************************************/
var bubbleChart: dc.BubbleChart = dc.bubbleChart("#dc-bubble-graph");
var pieChart: dc.PieChart = dc.pieChart("#dc-pie-graph");
var volumeChart: dc.BarChart = dc.barChart("#dc-volume-chart");
var lineChart: dc.LineChart = dc.lineChart("#dc-line-chart");
var dataTable: dc.DataTableWidget = dc.dataTable("#dc-table-graph");
var rowChart: dc.RowChart = dc.rowChart("#dc-row-graph");
/********************************************************
* *
* Step2: Run data through crossfilter *
* *
********************************************************/
var ndx: CrossFilter.CrossFilter = crossfilter(yelp_data);
/********************************************************
* *
* Step3: Create Dimension that we'll need *
* *
********************************************************/
// for volumechart
var cityDimension: CrossFilter.Dimension = ndx.dimension((d: IYelpData) => d.city);renderLineChart(dimension, group, onDataFiltered) {
var lineChartDomNode = $("#dc-sources-line-chart")[0];
var width = $(lineChartDomNode).width();
$(document).on('mouseup', "#dc-sources-line-chart svg", (event) => {
$(".timerange-selector-container").effect("bounce", {
complete: () => {
// Submit search directly if alt key is pressed.
if (event.altKey) {
UniversalSearch.submit();
}
}
});
});
this._lineChart = dc.lineChart(lineChartDomNode);
this._lineChart
.height(200)
.margins({left: 35, right: 20, top: 20, bottom: 20})
.dimension(dimension)
.group(group)
.x(d3.time.scale())
.renderHorizontalGridLines(true)
// FIXME: causes those nasty exceptions when rendering data (one per x axis tick)
.elasticX(true)
.elasticY(true)
.transitionDuration(30)
.colors(D3Utils.glColourPalette())
.on("filtered", (chart) => {
dc.events.trigger(() => {
var filter = chart.filter();
onDataFiltered(filter);var toDateTime = momentHelper.toUserTimeZone(filter[1]);
SearchStore.changeTimeRange('absolute', {
from: fromDateTime.format(momentHelper.DATE_FORMAT_TZ),
to: toDateTime.format(momentHelper.DATE_FORMAT_TZ)
});
} else {
this.syncRangeWithQuery();
}
};
this.refs.sourceDataTable.renderDataTable(this.messageCountDimension, this.nameMessageGroup, onDataTableFiltered);
this.refs.sourcePieChart.renderPieChart(this.nameDimension, this.nameMessageGroup, onPieChartFiltered);
this.refs.sourceLineChart.renderLineChart(this.valueDimension, this.valueGroup, onLineChartFiltered);
this.applyRangeParameter();
dc.renderAll();
$(window).on('resize', this._resizeCallback);
$(window).on('hashchange', this._applyRangeFromHash);
// register them live as we do not know if those buttons are currently in the DOM
$(document).on("click", ".sidebar-hide", this._updateWidth);
$(document).on("click", ".sidebar-show", this._updateWidth);
UniversalSearch.init();
},
componentWillUnmount() {// // Use `d.volume`
// ])
danmu_Count /* dc.dataCount('.dc-data-count', 'chartGroup'); */
.dimension(ndx)
.group(all)
.html({
some: '<strong>%total-count</strong>条弹幕中的<strong>%filter-count</strong>条弹幕被选中',
all: '当前视频所有的弹幕(共%total-count条)被选择，可以进行筛选'
});
this.setState({
all_data: datas,
selected_data: datas
})
dc.renderAll();
console.log("render done!")
}}
else {
console.log( "barchart: Reduction not supported for facet", this.model.secondary.reduction, this.model.secondary);
}
chart
.hidableStacks(false) // FIXME: unexplained crashed when true, and a category is selected from the legend
.dimension(this.model._crossfilter.dimension)
.group(this.model._crossfilter.group, domain[0])
.valueAccessor(stackFn(0));
for(var i=1; i < domain.length; i++) {
chart.stack(this.model._crossfilter.group, domain[i], stackFn(i));
}
chart.legend(dc.legend().x(100).y(0).itemHeight(13).gap(5));
}
// Regular barchart, if secondary is falsy
// Else, group by facetA, take value of facetB
else {
chart
.dimension(this.model._crossfilter.dimension)
.group(this.model._crossfilter.group)
.valueAccessor(this.model._crossfilter.valueAccessor);
}
// Center for continuous, don't for ordinal plots
chart.centerBar(! chart.isOrdinal());
// custom filter handler
chart.filterHandler(function (dimension, filters) {export function visualize (csv_data) {
let danmu_lineChart = dc.lineChart('#danmu-line-chart');
let danmu_barChart = dc.barChart('#danmu-volume-chart');
let colorChart = dc.pieChart('#color-chart');
let posChart = dc.pieChart('#pos-chart');
let charNumChart = dc.pieChart('#char-chart');
let danmu_up_barChart = dc.barChart('#danmu-up-chart');
let data = [];
/* 修改开始出*/
//图表宽度
let row_width = 500;
//弹幕时间 分割
let time_cut = 100;
//上传时间的分割
let up_time_cut = 100;
//字数分割var y = parseInt(x);
// dont do anything without a facet defined
if(! this.model.primary) {
return;
}
if(! this.model._crossfilter) {
this.model.initFilter();
}
// tear down existing stuff
delete this._chart;
// Options:
// mouseZoomable : does not work well in comibination when using a trackpad
var chart = dc.barChart(this.queryByHook('barchart'));
var that = this; // used in callback
chart
.outerPadding(1.0)
.brushOn(true)
.mouseZoomable(false)
.elasticX(false)
.elasticY(true)
.xUnits(this.model.primary.xUnits)
.x(this.model.primary.x)
.transitionDuration(app.me.anim_speed);
// Stacked barchart
if(this.model.secondary && this.model.secondary.displayCategorial) {export function visualize (csv_data) {
let danmu_lineChart = dc.lineChart('#danmu-line-chart');
let danmu_barChart = dc.barChart('#danmu-volume-chart');
let colorChart = dc.pieChart('#color-chart');
let posChart = dc.pieChart('#pos-chart');
let charNumChart = dc.pieChart('#char-chart');
let danmu_up_barChart = dc.barChart('#danmu-up-chart');
let data = [];
/* 修改开始出*/
//图表宽度
let row_width = 500;
//弹幕时间 分割
let time_cut = 100;
//上传时间的分割
let up_time_cut = 100;
//字数分割
let char_num_cut = 5;
let video_length = parseFloat(csv_data[1].video_len);
let video_up_time = new Date($("time").attr("datetime"));dc
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
