/**
 * Based on http://bl.ocks.org/mbostock/3048450
 */ export function histogram ( values , id ) { var formatCount = d3 . format ( ",.0f" ) ; var margin = { top : 20 , right : 30 , bottom : 20 , left : 30 } , width = 460 - margin . left - margin . right , height = 220 - margin . top - margin . bottom ; var x = d3 . scale . linear ( ) . domain ( [ 0 , d3 . max ( values , ( d ) => d ) ] ) . range ( [ 0 , width ] ) ; var data = d3 . layout . histogram ( ) . bins ( x . ticks ( 30 ) ) ( values ) ; var y = d3 . scale . linear ( ) . domain ( [ 0 , d3 . max ( data , ( d ) => d . y ) ] ) . range ( [ height , 0 ] ) ; var xAxis = d3 . svg . axis ( ) . scale ( x ) . orient ( "bottom" ) ; var svg = d3 . select ( id ) . append ( "svg" ) . attr ( "width" , width + margin . left + margin . right ) . attr ( "height" , height + margin . top + margin . bottom ) . append ( "g" ) . attr ( "transform" , "translate(" + margin . left + "," + margin . top + ")" ) ; var bar = svg . selectAll ( ".bar" ) . data ( data ) . enter ( ) . append ( "g" ) . attr ( "class" , "bar" ) . attr ( "transform" , ( d ) => "translate(" + x ( d . x ) + "," + y ( d . y ) + ")" ) ; bar . append ( "rect" ) . attr ( "x" , 1 ) . attr ( "width" , x ( data [ 0 ] . dx ) - 1 ) . attr ( "height" , ( d ) => height - y ( d . y ) ) ; bar . append ( "text" ) . attr ( "dy" , ".75em" ) . attr ( "y" , 6 ) . attr ( "x" , x ( data [ 0 ] . dx ) / 2 ) . attr ( "text-anchor" , "middle" ) . text ( ( d ) => formatCount ( d . y ) ) ; svg . append ( "g" ) . attr ( "class" , "x axis" ) . attr ( "transform" , "translate(0," + height + ")" ) . call ( xAxis ) ; }