jsgao0/README.md

## README.md

      
    Raw
  

              README.md
            
          
    I transposed the coordinate axis of the chart because the item amount is dynamic.

  
## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Dsnap - Charts</title>
        <style>
            #wrapper {
                max-height: 500px;
                overflow-y: scroll;
            }
            #xaxis .domain {
                fill:none;
                stroke:#000;
            }
            #xaxis text, #yaxis text {
                font-size: 12px;
            }
            #xaxis_chartOne .domain{
                display:none;
            }
        </style>
    </head>
    <body>
        <div id='wrapper'></div>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
            (function linearGraph()
            {
                var wondata = [78, 65, 88, 78, 67,88,78,67,88,78,68,88,67];
                var lostdata = [22, 35, 12, 22, 33,12,22,33,12,22,32,12,33];
                var width = 880;
                var height = 700;
                var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep','Oct','Nov','Dec','Jan'];
                var colors = ['#0000b4','#BFEF61'];
                return chart(lostdata,wondata,width,height,categories,colors);
            })();

            function chart(lostdata,wondata,width,height,categories,colors) {
                var grid = d3.range(11).map(function(i) {
                    return {'x1':0,'y1':0,'x2':0,'y2':height};
                });

                var xscale = d3.scale.linear()
                    .domain([0, 100])
                    .range([0, width]);

                var yscale = d3.scale.linear()
                    .domain([0, 12])
                    .range([0, height]);

                var colorScale = d3.scale.quantize()
                    .domain([0, categories.length])
                    .range(colors);

                var canvas = d3.select('#wrapper')
                    .append('svg')
                    .attr({'width':width + 80, 'height': height + 80});

                var grids = canvas.append('g')
                    .attr('id','grid_chartOne')
                    .attr('transform','translate(40,80)')
                    .selectAll('line')
                    .data(grid)
                    .enter()
                    .append('line')
                    .attr({
                        'x1':function(d, i){ return xscale(i*10); },
                        'y1':function(d){ return d.y1; },
                        'x2':function(d, i){ return xscale(i*10); },
                        'y2':function(d){ return d.y2; },
                    })
                    .style({'stroke':'#adadad','stroke-width':'1px'});

                var	xAxis = d3.svg.axis();
                xAxis
                    .orient('bottom')
                    .scale(xscale)
                    .tickFormat(function(d,i){ console.log(d); return d +"%"; })
                    .tickValues([0,10,20,30,40,50,60,70,80,90,100]);

                var	yAxis = d3.svg.axis();
                yAxis
                    .orient('left')
                    .scale(yscale)
                    .tickSize(0)
                    .tickFormat(function(d,i){ return categories[i]; })
                    .tickValues(d3.range(12));

                var y_xis = canvas.append('g')
                    .attr("transform", "translate(40, 105)")
                    .attr('id','yaxis_chartOne')
                    .call(yAxis);

                var x_xis = canvas.append('g')
                    .attr("transform", "translate(40, 55)")
                    .attr('id','xaxis_chartOne')
                    .call(xAxis);

                var wonchart = canvas.append('g')
                    .attr("transform", "translate(40, 90)")
                    .attr('id','wonbars')
                    .selectAll('rect')
                    .data(wondata)
                    .enter()
                    .append('rect')
                    .attr('height',function(d){ return 30; })
                    .attr({'x':function(d){ return 0; },
                    'y':function(d, i){ return yscale(i); } })
                    .style('fill',function(d,i){ return colors[1]; })
                    .attr('width',function(d){ return 0; });

                var wonpercent = canvas.append('g')
                	.attr("transform", "translate(40, 90)")
                	.attr('id','wonperc')
                	.selectAll('text')
                	.data(wondata)
                	.enter()
                	.append('text')
                	.text(function(d) { return d + "%"; })
                	.attr('x',function(d,i) { return xscale(d) - 35; })
                	.attr('y',function(d,i) { return yscale(i) + 20; });

                var losschart = canvas.append('g')
                	.attr("transform", "translate(40,90)")
                	.attr('id','lossbars')
                	.selectAll('rect')
                	.data(lostdata)
                	.enter()
                	.append('rect')
                	.attr("height", function(d) {return 30; })
                	.attr({
                        'x':function(d) { return width - xscale(d); },
                		'y':function(d, i) { return yscale(i); }
                    })
                	.style('fill',function(d,i) { return colors[0]; })
                	.attr('width',function(d) { return 0; });


                var losspercent = canvas.append('g')
                	.attr("transform", "translate(40, 90)")
                	.attr('id','lossperc')
                	.selectAll('text')
                	.data(lostdata)
                	.enter()
                	.append('text')
                	.text(function(d){return d+"%";})
                	.attr('x',function(d,i) { return width - xscale(d) + 10; })
                	.attr('y',function(d,i) { return yscale(i) + 20; })
                    .attr('fill', '#fff');

                var bars = canvas.append('g')
                	.attr('transform','translate(40,10)')
                	.selectAll('rect')
                	.data(['Win','Loss'])
                	.enter()
                	.append('rect')
                	.attr({'width':50,'height':15,'x':function(d,i) { return i * 60; },'y':0})
                	.style('fill',function(d,i) { return colors[colors.length - 1 - i]; });

                var barstext = canvas.append('g')
                	.attr('transform','translate(50,10)')
                	.selectAll('text')
                	.data(['Win','Loss'])
                	.enter()
                	.append('text')
                	.text(function(d){ return d; })
                	.attr({'x':function(d,i) { return i*60; },'y':32});

                d3.select("svg").selectAll("#wonbars rect")
                    .data(wondata)
                    .transition()
                    .duration(1000)
                    .attr("width", function(d) {return xscale(d); });

                d3.select("svg").selectAll("#lossbars rect")
                    .data(lostdata)
                    .transition()
                    .duration(1000)
                    .attr("width", function(d) {return xscale(d); });

            }
        </script>
    </body>
</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dsnap - Charts</title>
	<style>
	#wrapper {
	max-height: 500px;
	overflow-y: scroll;
	}
	#xaxis .domain {
	fill:none;
	stroke:#000;
	}
	#xaxis text, #yaxis text {
	font-size: 12px;
	}
	#xaxis_chartOne .domain{
	display:none;
	}
	</style>
	</head>
	<body>
	<div id='wrapper'></div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	(function linearGraph()
	{
	var wondata = [78, 65, 88, 78, 67,88,78,67,88,78,68,88,67];
	var lostdata = [22, 35, 12, 22, 33,12,22,33,12,22,32,12,33];
	var width = 880;
	var height = 700;
	var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep','Oct','Nov','Dec','Jan'];
	var colors = ['#0000b4','#BFEF61'];
	return chart(lostdata,wondata,width,height,categories,colors);
	})();

	function chart(lostdata,wondata,width,height,categories,colors) {
	var grid = d3.range(11).map(function(i) {
	return {'x1':0,'y1':0,'x2':0,'y2':height};
	});

	var xscale = d3.scale.linear()
	.domain([0, 100])
	.range([0, width]);

	var yscale = d3.scale.linear()
	.domain([0, 12])
	.range([0, height]);

	var colorScale = d3.scale.quantize()
	.domain([0, categories.length])
	.range(colors);

	var canvas = d3.select('#wrapper')
	.append('svg')
	.attr({'width':width + 80, 'height': height + 80});

	var grids = canvas.append('g')
	.attr('id','grid_chartOne')
	.attr('transform','translate(40,80)')
	.selectAll('line')
	.data(grid)
	.enter()
	.append('line')
	.attr({
	'x1':function(d, i){ return xscale(i*10); },
	'y1':function(d){ return d.y1; },
	'x2':function(d, i){ return xscale(i*10); },
	'y2':function(d){ return d.y2; },
	})
	.style({'stroke':'#adadad','stroke-width':'1px'});

	var xAxis = d3.svg.axis();
	xAxis
	.orient('bottom')
	.scale(xscale)
	.tickFormat(function(d,i){ console.log(d); return d +"%"; })
	.tickValues([0,10,20,30,40,50,60,70,80,90,100]);

	var yAxis = d3.svg.axis();
	yAxis
	.orient('left')
	.scale(yscale)
	.tickSize(0)
	.tickFormat(function(d,i){ return categories[i]; })
	.tickValues(d3.range(12));

	var y_xis = canvas.append('g')
	.attr("transform", "translate(40, 105)")
	.attr('id','yaxis_chartOne')
	.call(yAxis);

	var x_xis = canvas.append('g')
	.attr("transform", "translate(40, 55)")
	.attr('id','xaxis_chartOne')
	.call(xAxis);

	var wonchart = canvas.append('g')
	.attr("transform", "translate(40, 90)")
	.attr('id','wonbars')
	.selectAll('rect')
	.data(wondata)
	.enter()
	.append('rect')
	.attr('height',function(d){ return 30; })
	.attr({'x':function(d){ return 0; },
	'y':function(d, i){ return yscale(i); } })
	.style('fill',function(d,i){ return colors[1]; })
	.attr('width',function(d){ return 0; });

	var wonpercent = canvas.append('g')
	.attr("transform", "translate(40, 90)")
	.attr('id','wonperc')
	.selectAll('text')
	.data(wondata)
	.enter()
	.append('text')
	.text(function(d) { return d + "%"; })
	.attr('x',function(d,i) { return xscale(d) - 35; })
	.attr('y',function(d,i) { return yscale(i) + 20; });

	var losschart = canvas.append('g')
	.attr("transform", "translate(40,90)")
	.attr('id','lossbars')
	.selectAll('rect')
	.data(lostdata)
	.enter()
	.append('rect')
	.attr("height", function(d) {return 30; })
	.attr({
	'x':function(d) { return width - xscale(d); },
	'y':function(d, i) { return yscale(i); }
	})
	.style('fill',function(d,i) { return colors[0]; })
	.attr('width',function(d) { return 0; });


	var losspercent = canvas.append('g')
	.attr("transform", "translate(40, 90)")
	.attr('id','lossperc')
	.selectAll('text')
	.data(lostdata)
	.enter()
	.append('text')
	.text(function(d){return d+"%";})
	.attr('x',function(d,i) { return width - xscale(d) + 10; })
	.attr('y',function(d,i) { return yscale(i) + 20; })
	.attr('fill', '#fff');

	var bars = canvas.append('g')
	.attr('transform','translate(40,10)')
	.selectAll('rect')
	.data(['Win','Loss'])
	.enter()
	.append('rect')
	.attr({'width':50,'height':15,'x':function(d,i) { return i * 60; },'y':0})
	.style('fill',function(d,i) { return colors[colors.length - 1 - i]; });

	var barstext = canvas.append('g')
	.attr('transform','translate(50,10)')
	.selectAll('text')
	.data(['Win','Loss'])
	.enter()
	.append('text')
	.text(function(d){ return d; })
	.attr({'x':function(d,i) { return i*60; },'y':32});

	d3.select("svg").selectAll("#wonbars rect")
	.data(wondata)
	.transition()
	.duration(1000)
	.attr("width", function(d) {return xscale(d); });

	d3.select("svg").selectAll("#lossbars rect")
	.data(lostdata)
	.transition()
	.duration(1000)
	.attr("width", function(d) {return xscale(d); });

	}
	</script>
	</body>
	</html>