function addViolin(svg, results, height, width, domain, imposeMax, violinColor) {
var data = d3.layout.histogram().bins(resolution).frequency(0)(results.results);
var y = d3.scale.linear().range([width / 2, 0]).domain([0, Math.max(imposeMax, d3.max(data, function (d) {
return d.y;
}))]);
var x = d3.scale.linear().range([height, 0]).domain(domain).nice();
var area = d3.svg.area().interpolate(interpolation).x(function (d) {
if (interpolation == "step-before") return x(d.x + d.dx / 2);
return x(d.x);
}).y0(width / 2).y1(function (d) {
return y(d.y);
});
var line = d3.svg.line().interpolate(interpolation).x(function (d) {
if (interpolation == "step-before") return x(d.x + d.dx / 2);
return x(d.x);
}).y(function (d) {
return y(d.y);
});
var gPlus = svg.append("g");
var gMinus = svg.append("g");
gPlus.append("path").datum(data).attr("class", "area").attr("d", area).style("fill", violinColor);
gPlus.append("path").datum(data).attr("class", "violin").attr("d", line).style("stroke", violinColor);
gMinus.append("path").datum(data).attr("class", "area").attr("d", area).style("fill", violinColor);
gMinus.append("path").datum(data).attr("class", "violin").attr("d", line).style("stroke", violinColor);
var x = width;
gPlus.attr("transform", "rotate(90,0,0) translate(0,-" + width + ")"); //translate(0,-200)");
gMinus.attr("transform", "rotate(90,0,0) scale(1,-1)");
}
data.forEach((d) => {
let b = d3.layout.histogram().bins(numBins)(d.values);
const color = getColorFromScheme(d.key, slice.formData.color_scheme);
const w = d3.max([(x(b[0].dx) - x(0)) - 1, 0]);
const key = d.key;
// normalize if necessary
if (normalized) {
const total = d.values.length;
b = b.map(v => ({ ...v, y: v.y / total }));
}
bins = bins.concat(b.map(v => ({ ...v, color, width: w, key, opacity })));
});
define_scale_and_bins() {
this._scale_x = d3.scale.linear()
.domain([
0,
(d3.max([this.query.length,d3.max(this._data)]) * 1.05)
])
.range([0, this._width]);
this._bins = d3.layout.histogram()
.range(this._scale_x.domain())
.bins(this._scale_x.ticks(50))
(this._data);
this._scale_y = d3.scale.linear()
.domain([0, d3.max(this._bins, function(d) { return d.length })])
.range([this._height, 0]);
}
Plots.prototype.getHistogramElements = function () {
var noSamples = 5000;
var noBins = 200;
var controlData = this.controlBeta.getRvs(noSamples);
var testData = this.testBeta.getRvs(noSamples);
var differenceData = [];
for (var i=0; i < controlData.length; i++) {
differenceData.push(testData[i] - controlData[i]);
};
var margin = {top: 20, right: 20, bottom: 30, left: 50};
var width = 690 - margin.left - margin.right;
var height = 350 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([-1, 1])
.range([0, width]);
var histogram = d3.layout.histogram()
.bins(x.ticks(noBins))(differenceData);
var y = d3.scale.linear()
.domain([0, d3.max(histogram, function(d) { return d.y; })])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
return {
"margin": margin,
"width": width,
"height": height,
"xAxis": xAxis,
"yAxis": yAxis,
"x": x,
"y": y,
"differenceData": differenceData,
"histogram": histogram
};
};
History.prototype.getBlockPropagation = function()
{
var propagation = [];
var avgPropagation = 0;
_.forEach(this._items, function (n, key)
{
_.forEach(n.propagTimes, function (p, i)
{
var prop = Math.min(MAX_PROPAGATION_RANGE, _.result(p, 'propagation', -1));
if(prop >= 0)
propagation.push(prop);
});
});
if(propagation.length > 0)
{
var avgPropagation = Math.round( _.sum(propagation) / propagation.length );
}
var data = d3.layout.histogram()
.frequency( false )
.range([ MIN_PROPAGATION_RANGE, MAX_PROPAGATION_RANGE ])
.bins( MAX_BINS )
( propagation );
var freqCum = 0;
var histogram = data.map(function (val) {
freqCum += val.length;
var cumPercent = ( freqCum / Math.max(1, propagation.length) );
return {
x: val.x,
dx: val.dx,
y: val.y,
frequency: val.length,
cumulative: freqCum,
cumpercent: cumPercent
};
});
return {
histogram: histogram,
avg: avgPropagation
};
}
function drawHistorgram (svg, pos, size, values) {
var xAxis, bar;
// A formatter for counts.
var formatCount = d3.format(",.0f");
var x = d3.scale.linear()
.domain([0, 2500])
.range([0, size.x]);
// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
.bins(x.ticks(25))
(values);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([size.y, 0]);
xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
bar = svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
bar.append("rect")
.attr("x", 1)
.attr("width", x(data[0].dx) - 1)
.attr("height", function(d) { return size.y - y(d.y); });
bar.append("text")
.attr("dy", ".75em")
.attr("y", 6)
.attr("x", x(data[0].dx) / 2)
.attr("text-anchor", "middle")
.text(function(d) { return formatCount(d.y); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + size.y + ")")
.call(xAxis);
}
update_data: function() {
var x_data = this.get_typed_field("sample");
var scales = this.get("scales");
var x_scale = scales.sample;
// TODO: This potentially triggers domain_changed and therefore a
// Draw, while update_data is generally followed by a Draw.
if(!this.get("preserve_domain").sample) {
x_scale.compute_and_set_domain(x_data, this.id + "_sample");
} else {
x_scale.del_domain([], this.id + "_sample");
}
this.min_x = x_scale.domain[0];
this.max_x = x_scale.domain[1];
var that = this;
x_data = x_data.filter(function(d) {
return (d <= that.max_x && d >= that.min_x);
});
var x_data_ind = x_data.map(function (d,i) {
return {index: i, value: d};
});
this.num_bins = this.get("bins");
this.x_bins = this.create_uniform_bins(this.min_x, this.max_x, this.num_bins);
this.x_mid = this.x_bins.map(function(d, i) {
return 0.5 * (d + that.x_bins[i - 1]);
}).slice(1);
this.mark_data = d3.layout.histogram().bins(this.x_bins).value(function(d) {
return d.value;
})(x_data_ind);
//adding index attribute to mark_data of the model
this.mark_data.forEach(function(data, index) { data.index = index; });
this.normalize_data(false);
this.set("midpoints", this.x_mid);
this.set_typed_field("count", this.count);
this.update_domains();
this.save_changes();
this.trigger("data_updated");
},
import React from 'react'
import ReactDOM from 'react-dom'
import d3 from 'd3'
import animateMark from './components/mark'
import Rect from './components/rect'
import Axis from './components/axis'
import {easingTypes} from 'react-tween-state'
var element = document.getElementById("react-transition")
var margin = {top: 10, right: 30, bottom: 30, left: 30}
var width = element.offsetWidth - margin.left - margin.right
var height = 550 - margin.top - margin.bottom
var values = d3.range(1000).map(d3.random.bates(10))
var formatCount = d3.format(",.0f")
var xscale = d3.scale.linear().domain([0, 1]).range([0, width])
var data = d3.layout.histogram().bins(xscale.ticks(20))(values)
var yscale = d3.scale.linear().domain([0, d3.max(data, (d) => d.y)]).range([height, 0])
let TransitionRect = animateMark(Rect, [
{prop: 'width', duration: 300, easing: easingTypes.easeInOutQuad},
{prop: 'height', duration: 600, easing: easingTypes.linear}
])
class RectGroup extends React.Component {
render() {
return <g {...this.props} transform={`translate(${this.props.x}, ${this.props.y})`}></g>
}
}
let TransitionGroup = animateMark(RectGroup, [
{ prop: 'y', duration: 900, easing: easingTypes.linear, start: height }
])
const _draw = function(data, numBins) {
// Set Margins
const margin = {
top: 50,
right: 10,
bottom: 20,
left: 50,
};
const navBarHeight = 36;
const navBarTitleSize = 12;
const navBarBuffer = 10;
const width = slice.width() - margin.left - margin.right;
const height = slice.height() - margin.top - margin.bottom - navBarHeight - navBarBuffer;
// Set Histogram objects
const formatNumber = d3.format(',.0f');
const formatTicks = d3.format(',.00f');
const x = d3.scale.ordinal();
const y = d3.scale.linear();
const xAxis = d3.svg.axis().scale(x).orient('bottom').ticks(numBins).tickFormat(formatTicks);
const yAxis = d3.svg.axis().scale(y).orient('left').ticks(numBins*3);
// Calculate bins for the data
const bins = d3.layout.histogram().bins(numBins)(data);
// Set the x-values
x.domain(bins.map(function(d) { return d.x;}))
.rangeRoundBands([0, width], .1);
// Set the y-values
y.domain([0, d3.max(bins, function(d) { return d.y;})])
.range([height, 0]);
// Create the svg value with the bins
const svg = div.selectAll('svg').data([bins]).enter().append('svg');
// Make a rectangular background fill
svg.append('rect')
.attr('width', '100%')
.attr('height', '100%')
.attr('fill', '#f6f6f6');
// Transform the svg to make space for the margins
const gEnter = svg
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Add the bars and the x axis
gEnter.append('g').attr('class', 'bars');
gEnter.append('g').attr('class', 'x axis');
// Add width and height to the svg
svg.attr('width', slice.width())
.attr('height', slice.height());
// Create the bars in the svg
const bar = svg.select('.bars').selectAll('.bar').data(bins);
bar.enter().append('rect');
bar.exit().remove();
// Set the Height and Width for each bar
bar .attr('width', x.rangeBand())
.attr('x', function(d) { return x(d.x); })
.attr('y', function(d) { return y(d.y); })
.attr('height', function(d) {
return y.range()[0] - y(d.y);
})
.attr('fill', function(d) { return px.color.category21(d.length); })
.order();
// Find maximum length to position the ticks on top of the bar correctly
const maxLength = d3.max(bins, function(d) { return d.length;});
function textAboveBar(d) {
return d.length/maxLength < 0.1;
}
// Add a bar text to each bar in the histogram
svg.selectAll('.bartext')
.data(bins)
.enter()
.append('text')
.attr('dy', '.75em')
.attr('y', function(d) {
let padding = 0.0
if (textAboveBar(d)) {
padding = 12.0
} else {
padding = -8.0
}
return y(d.y) - padding;
})
.attr('x', function(d) { return x(d.x) + (x.rangeBand()/2);})
.attr('text-anchor', 'middle')
.attr('font-weight', 'bold')
.attr('font-size', '15px')
.text(function(d) { return formatNumber(d.y); })
.attr('fill', function(d) {
if(textAboveBar(d)) { return 'black'; } else { return 'white'; }
})
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Update the x-axis
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(' + margin.left + ',' + (height + margin.top) + ')')
.text('values')
.call(xAxis);
// Update the Y Axis and add minor lines
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.text('count')
.call(yAxis)
.selectAll('g')
.filter(function(d) { return d; })
.classed('minor', true);
};
// accessor for X & Y coordinates
getValue: PropTypes.object,
axisType: PropTypes.object,
scale: PropTypes.object
},
getDefaultProps() {
return {}
},
getInitialState() {
return {
histogramData: null
}
},
componentWillMount() {
const histogramData = d3.layout.histogram().bins(30)(this.props.data);
//console.log('histogram', this.props.data, histogramData);
this.setState({histogramData});
},
statics: {
getOptions(props) {
const {data, getValue} = props;
return {
// todo: real x domain
domain: {
x: d3.extent(data, accessor(getValue.x)),
// todo: real y domain
y: [0,200]
}
}