How to use the dc.pieChart function in dc
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.
h12345jack / bilibili-Visualization / src / components / visualize.js View on Github 
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;
//字数分割componentDidMount(){
console.log("here!!!");
var danmu_lineChart = dc.lineChart('#danmu-line-chart');
var danmu_barChart = dc.barChart('#danmu-volume-chart');
var danmu_Table = dc.dataTable('.dc-data-table');
var danmu_Count = dc.dataCount('.dc-data-count');
var colorChart = dc.pieChart('#color-chart');
var posChart = dc.pieChart('#pos-chart');
var charNumChart = dc.pieChart('#char-chart');
var danmu_up_barChart = dc.barChart('#danmu-up-chart');
let {csv_data,video_up_time, video_len} = this.props;
var data = [];
var time_cut = 100;
//图标宽度
var row_width = $("div.bootstrap-custom").width() * 10 /12;
console.log(row_width, 55);
row_width = row_width> 0 ? row_width: 400;
var up_time_cut = 100;
//字数分割
var char_num_cut = 5;
var video_length = parseFloat(csv_data[1].video_len);Template.attackers.rendered = function () {
//setup charts, dimensions and mongoCrossfilter
var ringChartAttackerCategory = dc.pieChart("#ringChart-category","attackers");
var ringChartLastSeen = dc.pieChart("#ringChart-lastseen","attackers");
var ringChartCountry = dc.pieChart("#ringChart-country","attackers");
var ringChartIP = dc.pieChart("#ringChart-ip","attackers");
var chartsInitialized =false;
var currentSearch=null;
//faux crossfilter to retrieve it's data from meteor/mongo:
var mongoCrossfilter = {}
function getSearchCriteria(){
//default selection criteria
//$and will be used by the charts
basecriteria={$and: [
{lastseentimestamp: {$exists: true}},
{'indicators.ipv4address': {$regex: Session.get("attackersearchIP")}}
]
}
return basecriteria;
}function makePie(elem, w, h, dimension, group) {
var chart = dc.pieChart(elem);
chart.width(w)
.height(h)
.radius(110)
.innerRadius(0)
.dimension(dimension)
.group(group);
chart.legend(dc.legend().legendText(function(d) {
return d.name + ' (' + d.data + ')';
}).x(0).y(20))
chart.on('renderlet', function(chart) {
chart.selectAll('text.pie-slice')
.attr('transform', function(d) {
var translate = d3.select(this).attr('transform');
var ang = ((d.startAngle + d.endAngle) / 2 * 180 / Math.PI) % 360;
if (ang < 180) ang -= 90;
else ang += 90;Template.mozdefhealth.rendered = function() {
var ringChartEPS = dc.pieChart( "#ringChart-EPS" );
var totalEPS = dc.numberDisplay( "#total-EPS" );
var ringChartLoadAverage = dc.pieChart( "#ringChart-LoadAverage" );
refreshChartData = function() {
var frontEndData = healthfrontend.find( {} ).fetch();
var ndx = crossfilter( frontEndData );
if ( frontEndData.length === 0 && ndx.size() > 0 ) {
debugLog( 'clearing ndx/dc.js' );
dc.filterAll();
ndx.remove();
dc.redrawAll();
} else {
ndx = crossfilter( frontEndData );
}
if ( ndx.size() > 0 ) {_renderPieChart() {
const graphDomNode = this.refs.graph;
this.pieChart = dc.pieChart(graphDomNode, this.dcGroupName);
this.pieChart
.dimension(this.dimension)
.group(this.group)
.renderLabel(false)
.renderTitle(false)
.slicesCap(this.NUMBER_OF_TOP_VALUES)
.ordering((d) => d.value)
.colors(D3Utils.glColourPalette());
this._resizeVisualization(this.props.width, this.props.height, this.props.config.show_data_table);
D3Utils.tooltipRenderlet(this.pieChart, 'g.pie-slice', this._formatGraphTooltip);
$(graphDomNode).tooltip({
'selector': '[rel="tooltip"]',
'container': 'body',_renderPieChart(props) {
const graphDomNode = this._graph;
this.pieChart = dc.pieChart(graphDomNode, this.dcGroupName);
this.pieChart
.dimension(this.dimensionByTerm)
.group(this.group)
.othersGrouper((topRows) => {
const chart = this.pieChart;
const allRows = chart.group().all();
const allKeys = allRows.map(chart.keyAccessor());
const topKeys = topRows.map(chart.keyAccessor());
const topSet = d3.set(topKeys);
const topRowsSum = d3.sum(topRows, dc.pluck('value'));
const otherCount = this.state.total - this.state.missing - topRowsSum;
return topRows.concat([{ others: allKeys.filter(d => !topSet.has(d)), key: 'Others', value: otherCount }]);
})
.renderLabel(false)
.renderTitle(false)Template.mozdefhealth.rendered = function() {
var ringChartEPS = dc.pieChart( "#ringChart-EPS" );
var totalEPS = dc.numberDisplay( "#total-EPS" );
var ringChartLoadAverage = dc.pieChart( "#ringChart-LoadAverage" );
refreshChartData = function() {
var frontEndData = healthfrontend.find( {} ).fetch();
var ndx = crossfilter( frontEndData );
if ( frontEndData.length === 0 && ndx.size() > 0 ) {
debugLog( 'clearing ndx/dc.js' );
dc.filterAll();
ndx.remove();
dc.redrawAll();
} else {
ndx = crossfilter( frontEndData );
}
if ( ndx.size() > 0 ) {
var hostDim = ndx.dimension( function( d ) { return d.hostname; } );
var hostEPS = hostDim.group().reduceSum( function( d ) { return d.details.total_deliver_eps.toFixed( 2 ); } );Template.attackers.rendered = function () {
//setup charts, dimensions and mongoCrossfilter
var ringChartAttackerCategory = dc.pieChart("#ringChart-category","attackers");
var ringChartLastSeen = dc.pieChart("#ringChart-lastseen","attackers");
var ringChartCountry = dc.pieChart("#ringChart-country","attackers");
var ringChartIP = dc.pieChart("#ringChart-ip","attackers");
var chartsInitialized =false;
var currentSearch=null;
//faux crossfilter to retrieve it's data from meteor/mongo:
var mongoCrossfilter = {}
function getSearchCriteria(){
//default selection criteria
//$and will be used by the charts
basecriteria={$and: [
{lastseentimestamp: {$exists: true}},
{'indicators.ipv4address': {$regex: Session.get("attackersearchIP")}}
]
}createChart(section, allData){
let data = allData[section];
let domianList = this.arraySwap(section, allData);
let colorList = this.createColorArray(section, allData);
let chart = dc.pieChart('#_' + section,'_' + section);
let ndx = crossfilter(data);
let Dimension = ndx.dimension(function(d) {return d.label;});
let dataGroup = Dimension.group().reduceSum(function(d) {return d.value;});
let colorScale = d3.scale.ordinal().domain(domianList).range(colorList);
chart
.width(200)
.height(200)
.innerRadius(0)
.dimension(Dimension)
.colors(function(d){
return colorScale(d)
})
.transitionDuration(1500)
.group(dataGroup);
chart.render('_' + section);dc
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
