Count , max*10, nest and sorting csv

[Karam Tayeb]

hello everyone,

any one willing to give me clear path for this function especially getting the 10 max value from csv file by using d3 in order to display the result into bar chart.

best regards

[Max Goldstein]

For loading the CSV, see these methods.

Once you have your data loaded as an array, see these methods. There isn't an easy way to get the n largest values, so I would sort them (supplying a comparator) and slice to ten items.

[Karam Tayeb]

i already have my bar chart loaded from csv file but i should check these methods since i dont really understand .

any one could help is appreciated it in advance. I need this so bad.

[Karam Tayeb]

here is my full code where should i apply slice (0,15).

//main data driven function

d3.csv('data/top15.csv', function(data) {

    var bardata = [];

    for (key in data) {

      // singal column bardata.push(data[key].pofchange)

      bardata.push(

        { pofchange: +data[key].pofchange, name: data[key].Name }

        )

     bardata.sort( function compareNumbers(a,b) { return b.pofchange - a.pofchange } )

    }

//constants

var margin = {top: 40, right:30 , bottom:40 , left:50}

var height = 310 - margin.top - margin.bottom,

  width = 535 - margin.left - margin.right,

  barWidth = 50,

  barOffset = 5;

//scales

var colors = d3.scale.linear()

      .domain([0, bardata.length])

      .range(['#c61c6f','#9e1658'])

var yScale = d3.scale.linear()

          .domain([0,d3.max(maxData(bardata))])

          .range([height,0])

var xScale = d3.scale.ordinal()

      .domain(d3.range(1, bardata.length + 1)) //THis added the count from 1-14

      .rangeBands([0, bardata.length + width], .1)

var tooltip = d3.select('body').append('div')

        .style('position','absolute')

        .style('padding','0 10px')

        .style('opacity',0)

        .attr('class','tooltipbar')

//yAxis d3 

var vGuideScale = d3.scale.linear()// first three line for orgnization the value

  .domain([0, d3.max(maxData(bardata))])

  .range([height, 0])

var vAxis = d3.svg.axis()

    .scale(vGuideScale)

    .orient('left')

    .ticks(10)//number of ticks

var vGuide = d3.select('svg').append('g')

  vAxis(vGuide)

  vGuide.attr('transform','translate('+ margin.left +','+ margin.top +')')//change the position of vaxis

  vGuide.selectAll('path')

    .style({fill:'none',stroke:"#000"})

  vGuide.selectAll('line')

    .style({stroke:"#000"})

//xAxis d3 

var hAxis = d3.svg.axis()

    .scale(xScale)

    .orient('bottom')

var hGuide = d3.select('svg').append('g')

  hAxis(hGuide)

  hGuide.attr('transform','translate('+ margin.left +','+ (height + margin.top) +')')//change the position of haxis

  hGuide.selectAll('path')

    .style({fill:'none',stroke:"#000"})

  hGuide.selectAll('line')

    .style({stroke:"#000"})

// mapping the data index

function maxData(data){

var obj = data

var maxDataSet = []

 for(var i in obj) {

  maxDataSet.push( +obj[i].pofchange );

  maxDataSet.sort( function compareNumbers(a,b) { return a - b } )

  }

  //console.log(maxDataSet)

  return maxDataSet

}

//svg and bars

var con1svg = d3.select('#con1svg')

  .attr('width',width + margin.left + margin.right)

  .attr('height',height + margin.top + margin.bottom)

  .append('g')//grouping rect

  .attr('transform','translate('+ margin.left +', '+margin.top +')')

    .selectAll('rect').data(bardata)

   //ENTER

    .enter().append('rect')

    .style('fill', function(d,i) {return colors(i);})

    .attr('width', xScale.rangeBand())

    //below...if xScale(i) then #14 will be empty...must be xScale(i + 1)

    .attr('x', function(d,i) {return xScale(i + 1);})//xScale(i + 1)

    .attr("height", 0)

    .attr('y', height)// zero for trans purpose

    //bar events

    .on('mouseover', function(d) {

    

     tooltip.transition()

       .style('opacity', .9)

     tooltip.html( d.name + ": " +"%"+d.pofchange )

        .style('left',(d3.event.pageX - 35) + 'px')

        .style('top', (d3.event.pageY - 30) + 'px')

      d3.select(this)

        .style('opacity',.7)

    })

    .on('mouseout', function(d) {

      tooltip.transition()

        .style('opacity', 0)

      d3.select(this)

        .transition()

        .style('opacity',1)

    })

con1svg.transition()

    .attr('height', function(d) {

          return height - yScale(d.pofchange);

    })

    .attr('y', function(d) {

          return yScale(d.pofchange);

    })

    .delay( function(d,i) {

      return i * 20;

    })

    .duration(2000)

    .ease('elastic')

});//d3.csv

[Joe Keohan]

Karam,

The below for loop is doing the sorting so put the following line of code just below that: bardata = bardata.slice(0,15)

I tested this in the previous code example I put together and it works fine..

   var bardata = [];

    for (key in data) {

      // singal column bardata.push(data[key].pofchange)

      bardata.push(

        { pofchange: +data[key].pofchange, name: data[key].Name }

        )

     bardata.sort( function compareNumbers(a,b) { return b.pofchange - a.pofchange } )

    }

   bardata = bardata.slice(0,15)

Joe