d3.js

/**

 * Created by ll0u on 1/12/2015.

 */

 //曲線圖

//var width = 500,

//    height = 250,

//    margin = {top: 30, right: 30, bottom: 30, left: 30},

//    g_width = width - margin.left - margin.right,

//    g_height = height - margin.top - margin.bottom;

//var data = [1,2,8,4,5,2,4,6];

//var scale_x = d3.scale.linear()

//    .domain([0, data.length-1])

//    .range([0, g_width]);

//var scale_y = d3.scale.linear()

//    .domain([0, d3.max(data)])

//    .range([g_height, 0]);

//var line = d3.svg.line()

//    .x(function(d,i){return scale_x(i)})

//    .y(function(d,i){return scale_y(d)})

//    .interpolate('cardinal');

//var area = d3.svg.area()

//    .x(function(d,i){return scale_x(i)})

//    .y0(g_height)

//    .y1(function(d,i){return scale_y(d)})

//    .interpolate('cardinal');

//var axis_x = d3.svg.axis().scale(scale_x);

//var axis_y = d3.svg.axis().scale(scale_y)

//    .orient('left');

//

//var svg = d3.select('#container').append('svg')

//    .style({

//        width: 500,

//        height: 250,

//        'background-color': 'gray'

//    });

//

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

//    .attr('transform', 'translate('+margin.left+','+margin.right+')');

//g.append('path')

//    .attr('d', area(data))

//    .style('fill', 'green');

//g.append('g').call(axis_x)

//    .attr('transform', 'translate(0,'+g_height+')');

//g.append('g').call(axis_y)

//    .append('text')

//    .text('Price($)')

//    .attr('transform', 'rotate(-90)')

//    .attr('text-anchor', 'end')

//    .attr('dy', '1em');

//水平柱狀圖

//var data = [1,2,3,4,5,6,7,8,9,10];

//var bar_height = 40,

//    bar_padding = 10,

//    svg_heigh = (bar_height + bar_padding) * data.length,

//    svg_width = 500;

//var scale = d3.scale.linear()

//    .domain([0, d3.max(data)])

//    .range([0, svg_width]);

//var svg = d3.select('#container').append('svg')

//    .attr({

//        width: svg_width,

//        height: svg_heigh

//    })

//

//var g = svg.selectAll('g')

//    .data(data)

//    .enter()

//    .append('g')

//    .attr({

//        'transform': function(d,i){return 'translate(0,'+i*(bar_height+bar_padding)+')'}

//    })

//

//g.append('rect')

//    .attr({

//        'width': function(d,i){return scale(d)},

//        'height': bar_height

//    })

//    .style('fill', 'blue')

//g.append('text')

//    .text(function(d){return d})

//    .attr({

//        'x': function(d){return(scale(d))},

//        'y': bar_height/2 + bar_padding/2,

//        'text-anchor': 'end'

//    });

//豎直柱狀圖

//var data = [1,2,3,4,5,6,7,8,9,10];

//var bar_width = 40,

//    bar_padding = 10,

//    svg_width = (bar_width + bar_padding) * data.length,

//    svg_height = 500;

//var scale = d3.scale.linear()

//    .domain([0, d3.max(data)])

//    .range([svg_height, 0])

//var svg = d3.select('#container')

//    .append('svg')

//    .attr({

//        width: svg_width,

//        height: svg_height

//    })

//var g = svg.selectAll('g')

//    .data(data)

//    .enter()

//    .append('g')

//    .attr('transform', function(d, i){return 'translate('+(bar_width + bar_padding)*i+',0)'})

//g.append('rect')

//    .attr({

//        width: bar_width,

//        height: function(d, i){return 500-scale(d)},

//        y: function(d, i){return scale(d)}

//    })

//    .style('fill', 'green')

//g.append('text')

//    .text(function(d){return d})

//    .attr({

//        y: function(d, i){return scale(d)},

//        x: bar_width/2,

//        dy: 15,

//        'text-anchor': 'middle'

//    })

var data = [10,35,20,60,25,14];

var year = [2000,2005,2006,2008,2010,2014];

var width = 1000,

    height = 500,

    margin = {top: 30, right: 30, bottom: 30, left: 30},

    svg_width = width + margin.left + margin.right,

    svg_height = height + margin.top + margin.bottom;

var scale_y = d3.scale.linear()

    .domain([0,d3.max(data)])

    .range([height,0])

var scale_x = d3.scale.ordinal()

    .domain(year)

    .rangeBands([0, width], 0.1)

var axis_y = d3.svg.axis().scale(scale_y).orient('left'),

    axis_x = d3.svg.axis().scale(scale_x);

d3.select('#container')

    .style({

        width: svg_width+'px',

        height: svg_height+'px'

    })

var svg = d3.select('#container')

    .append('svg')

    .attr({

        width: svg_width,

        height: svg_height

    })

var chart = svg.append('g')

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

chart.append('g')

    .call(axis_x)

    .attr('transform', 'translate(0,'+height+')')

    .append('text')

    .text('(年份)')

    .attr({

        'text-anchor': 'end',

        x: width,

        dy: '1.2em'

    });

chart.append('g')

    .call(axis_y)

    .append('text')

    .text('(億元)')

    .attr({

        'transform': 'rotate(-90)',

        'text-anchor': 'end',

        dy: '1.2em'

    });

var g = chart.selectAll('.bar')

    .data(data)

    .enter()

    .append('g')

    .attr('class', 'bar')

    .attr('transform', function(d,i){return 'translate('+scale_x(year[i])+',0)'});

g.append('rect')

    .attr({

        width: scale_x.rangeBand(),

        height: function(d){return height - scale_y(d)},

        y: function(d){return scale_y(d)}

    })

    .style('fill', 'green')

g.append('text')

    .text(function(d,i){return d})

    .attr({

        y: function(d){return scale_y(d)},

        x: scale_x.rangeBand()/2,

        'text-anchor': 'middle',

        dy: 15

    })

/**

 * Created by ll0u on 1/12/2015.

 */

var data = {

    education: ['小學','初中','中專','大專','本科','碩士'],

    population: [82546, 52134, 42514, 32152, 21425, 12045],

    color: ['green', 'pink', 'blue', 'gold', '#eee', '#ccc']

}

var svg_width = 600,

    svg_height = 600;

var arc_generator = d3.svg.arc()

    .innerRadius(100)

    .outerRadius(200)

var angle_generator = d3.layout.pie()

    .value(function(d){return d})

console.log(angle_generator(data.population))

var svg = d3.select('#container')

    .append('svg')

    .attr({

        width: svg_width,

        height: svg_height

    })

var g = svg.append('g')

    .attr('transform', 'translate('+svg_width/2+','+svg_height/2+')');

g.selectAll('path')

    .data(angle_generator(data.population))

    .enter()

    .append('path')

    .attr('d', arc_generator)

    .style('fill', function(d,i){return data.color[i]})

g.selectAll('text')

    .data(angle_generator(data.population))

    .enter()

    .append('text')

    .text(function(d, i){return data.education[i]})

    .attr('transform', function(d,i){return 'translate('+arc_generator.centroid(d)+')'})

    .attr('text-anchor', 'middle')