javascript - Bell Curve / Normal Disribution Curve On A NVD3 Discrete Bar Chart -

-

i trying figure out way distribution curve / bell curve onto nvd3 chart. have searched net lot , found literally nothing work i've got. maybe isn't possible, thought worth asking , know else looks this.

this example of need graph (found on google images)

enter image description here

as can see example, line doesn't need second axis, there no need 'bar , line chart combo'. know can draw directly onto canvas d3 i'm little under experienced that.

and here code , jsfiddle if look

var json = [{ "values": [{"label":"450-456", "value":0, "color":"#d62728"},{"label":"456-462", "value":0, "color":"#d62728"},{"label":"462-468", "value":0, "color":"#d62728"},{"label":"468-474", "value":0, "color":"#d62728"},{"label":"474-480", "value":0, "color":"#d62728"},{"label":"480-486", "value":1, "color":"#d62728"},{"label":"486-492", "value":5, "color":"#d62728"},{"label":"492-498", "value":3, "color":"#d62728"},{"label":"498-504", "value":5, "color":"#d62728"},{"label":"504-510", "value":6, "color":"#d62728"},{"label":"510-516", "value":9, "color":"#d62728"},{"label":"516-522", "value":6, "color":"#d62728"},{"label":"522-528", "value":1, "color":"#d62728"},{"label":"528-534", "value":0, "color":"#d62728"},{"label":"534-540", "value":0, "color":"#d62728"},{"label":"540-546", "value":0, "color":"#d62728"},{"label":"546-552", "value":0, "color":"#d62728"},{"label":"552-558", "value":0, "color":"#d62728"},{"label":"558-564", "value":0, "color":"#d62728"},{"label":"564-570", "value":0, "color":"#d62728"}]}];                     nv.addgraph(function() {                 var chart = nv.models.discretebarchart()                 .x(function(d) {                 return d.label                 })                 .y(function(d) {                 return d.value                 })                   .staggerlabels(true)                  .tooltips(true)                 .showvalues(true)                 .transitionduration(250)                 ;                  chart.yaxis                 .tickformat(d3.format('.0f'))                 chart.valueformat(d3.format('d'));                // remove decimal places y axis                 chart.forcey([0,10]);                  d3.select('#chartdisribution svg')                 .datum(json)                 .call(chart);                  d3.select('#chartdisribution svg')                 .append("text")                 .attr("x", '50%')                              .attr("y", 10)                 .attr("text-anchor", "middle")                 .style("font-size", "14px")                  .style("text-decoration", "underline")                 .style("font-weight", "bold")                 .style("height", "20px")                      .text("disribution");                  nv.utils.windowresize(chart.update);                 return chart;                 });

original data before sorting disribution - 

[518, 514, 512, 514, 518, 498, 510, 516, 520, 508, 504, 504, 517, 494, 492, 491, 515, 507, 492, 527, 509, 500, 491, 506, 517, 516, 518, 505, 514, 486, 516, 504, 503, 490, 515, 498]

if more info needed please ask.

thank you

as @altocumulus stated, can use lineplusbarchart.

there lot of info out there on how explain how generate data normal distribution.

the following formula used create data: wikipedia source

enter image description here

so need standard deviation , average total data set , bins using histogram.

i wont go detail on how calculate average , standard deviation data set code included in fiddle below.

we first declare data set , bins: 

var values = [518, 514, 512, 514, 518, 498, 510, 516, 520, 508, 504, 504, 517, 494, 492, 491, 515, 507, 492, 527, 509, 500, 491, 506, 517, 516, 518, 505, 514, 486, 516, 504, 503, 490, 515, 498];  var bins=[450,456,462, 468,474,480,486,492,498,504,510,516,522,528,534,540,546,552,558,564]

the mean , std data set as follows:

var average = 507.1944444 var std = 10.43022927

with data can calculate first part of formula: 

var ni1 = 1/(std*math.sqrt(2*math.pi));

the second part of formula uses bins loop through each bin calculate values normal curve.

to scale normal values chart, need size between each bin , need total number of values.

(i have added variable called norm use output results screen)

var norm ="norm data" var length = bins.length; var bin_distance = 6; var num_records = 36;  for(var i=0;i<length;i++){  //this second part of formula  var ni2 = math.exp(-1*((bins[i]-average)*(bins[i]-average))/(2* (std*std)))   // final calculation norm values. rounded value thats if want, can remove unrounded values.        var normdata = math.round(ni1*ni2*bin_distance*num_records);      //append value norm output screen     norm = norm +"<p>"+ bins[i]+" - "+normdata+"</p>" }  //output results screen:  document.getelementbyid('chartdisribution').innerhtml = norm;

here working fiddle.

for chart, want push normdata value object have declared line.


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

android - Go back to previous fragment -

-
btw second fragment. appear once press button in first fragment. in fragment, if press button on phone, go previous fragment. need guys. in advance. public class listalldoctorfragment extends fragment { button close; @nullable @override public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) { view view = inflater.inflate(r.layout.listalldoctor, container,false); close = (button) view.findviewbyid(r.id.button); close.setonclicklistener(new view.onclicklistener() { @override public void onclick(view view) { android.app.fragmentmanager fm = getfragmentmanager(); fragmenttransaction ft = fm.begintransaction(); shit f2 = new shit(); ft.add(r.id.content_frame, f2); ft.addtobackstack(null); ft.commit(); } }); return view; } } assuming want g...
Read more