From c3f28bf065c4eaf68ff198dadac1259a23f323d0 Mon Sep 17 00:00:00 2001 From: ppsari Date: Tue, 20 Jun 2017 10:56:49 +0700 Subject: [PATCH 1/2] belum, nanti sore dilanjutin kasi efek --- index.html | 20 +++++--- script.js | 69 +++++++++++++++++++++++---- script2.js | 135 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 209 insertions(+), 15 deletions(-) create mode 100644 script2.js diff --git a/index.html b/index.html index 6f2cd48..f20a825 100644 --- a/index.html +++ b/index.html @@ -2,20 +2,28 @@ + + + + + D3 Challenge
- +

AFC Wimbledon Results

-
+

AFC Wimbledon Top Scorer

+
- - - - + + diff --git a/script.js b/script.js index c3937e8..7eab963 100644 --- a/script.js +++ b/script.js @@ -1,26 +1,77 @@ -/* global d3 */ +var width = 800, height = 300, marginLeft= 40, margin=20; +var transition = d3.transition(); -// Our canvas -const width = 750, - height = 300, - margin = 20 -marginLeft = 40 +let barw = 0; -// Drawing area let svg = d3.select('#results') .append('svg') - .attr('width', width) - .attr('height', height) + .attr('width', width ) + .attr('height', height ) // Data reloading let reload = () => { + let data = []; + d3.tsv('afcw-results.tsv', rows => { + data = rows.map(row => { + return row.GoalsScored + // console.log(row.GoalsScored); + }) + // console.log('reload'); + console.log(data.length); + + redraw(data); + }) + // Your data parsing here... } // redraw function let redraw = (data) => { + + // console.log('redraw'); + // console.log(data); // Your data to graph here + let maks = d3.max(data); + let min = d3.min(data); + barw = width/ data.length ; + + + let colorScale = d3.scaleLinear() + .domain([0,maks]) + .range(['green','lime']) + + // var yScale = d3.scaleLinear().range([height - marginz.top, marginz.bottom]).domain([d3.min(data),d3.max(data)+20*300]); + let yScale = d3.scaleLinear() + .domain([min,maks]) + .range([height-margin, 0]); + + svg + .selectAll('rect') + .data(data) + .enter() + .append('rect') + .attr('x', (d,i)=> i * barw + marginLeft) + .attr('y', d => height - yScale(d) - margin)// height - yScale(d) - margin ) + .attr('width', barw -3 ) + .attr('height', d=> yScale(d) ) + .attr('fill', colorScale) + + var yAxis = d3.axisLeft().scale(yScale); + var xScale = d3.scaleLinear().domain([0, data.length]).range([0,width]); + var xAxis = d3.axisBottom().scale(xScale).ticks(data.length); + + svg.append("g") + .attr("class", "axis") + .attr("transform", `translate(${marginLeft-5} , ${height-margin} )`) + .call(xAxis); + + svg.append("g") + .attr("class", "axis") + .attr("transform", `translate(${marginLeft -5 } )`) + .call(yAxis); + svg.selectAll('rect') + .transition().style("fill","red").duration(10000);; } reload() diff --git a/script2.js b/script2.js new file mode 100644 index 0000000..ad0819b --- /dev/null +++ b/script2.js @@ -0,0 +1,135 @@ +var width = 800, height = 300, marginLeft= 40, margin=20; +var transition = d3.transition(); + +let barw = 0; + +let svg = d3.select('#results') + .append('svg') + .attr('width', width + margin ) + .attr('height', height + margin) + + +var xScale = d3.scaleBand().range([0,width]).padding(0.1), + yScale = d3.scaleLinear().range([height,0]); + +var g = svg.append("g") + .attr("transform", "translate(" + 100 + "," + 100 + ")"); + +// Data reloading +let reload = () => { + let data = []; + let datalen = []; + d3.tsv('afcw-results.tsv', rows => { + + data = rows.map( (row,i) => { + // datalen.push(i); + return {goal : row.GoalsScored, len : i} ; + }) + console.log(data.length) + // console.log('reload'); + // console.log(data.length); + + redraw(data); + }) + + // Your data parsing here... +} + +// redraw function +let redraw = (data) => { + xScale.domain(data.map(dt=> dt.goal)); + yScale.domain(data.map(dt=> dt.len)); + + g.append("g") + .attr("transform", "translate(0," + height + ")") + .call(d3.axisBottom(xScale)); + + + g.append("g") + .call(d3.axisLeft(yScale).tickFormat(function(d){ + return "$" + d; + }).ticks(10)) + .append("text") + .attr("y", 6) + .attr("dy", "0.71em") + .attr("text-anchor", "end") + .text("value"); + + + g.selectAll(".bar") + .data(data) + .enter().append("rect") + .attr("class", "bar") + .attr("x", function(d) { return xScale(d.len); }) + .attr("y", function(d) { return yScale(d.goal); }) + .attr("width", xScale.bandwidth()) + .attr("height", function(d) + { return height - yScale(d.len); } + ) + svg.append("text") + .attr("transform", "translate(100,0)") + .attr("x", 50) + .attr("y", 50) + .attr("font-size", "24px") + .text("Score") + + g.append("g") + .attr("transform", "translate(0," + height + ")") + .call(d3.axisBottom(xScale)) + .append("text") + .attr("y", height - 250) + .attr("x", width - 100) + .attr("text-anchor", "end") + .attr("stroke", "black") + .text("Number"); + + +//http://www.tutorialsteacher.com/d3js/create-bar-chart-using-d3js + // + // // console.log('redraw'); + // // console.log(data); + // // Your data to graph here + // let maks = d3.max(data); + // let min = d3.min(data); + // barw = width/ data.length ; + // + // + // let colorScale = d3.scaleLinear() + // .domain([0,maks]) + // .range(['green','lime']) + // + // // var yScale = d3.scaleLinear().range([height - marginz.top, marginz.bottom]).domain([d3.min(data),d3.max(data)+20*300]); + // let yScale = d3.scaleLinear() + // .domain([min,maks]) + // .range([height-margin, 0]); + // + // svg + // .selectAll('rect') + // .data(data) + // .enter() + // .append('rect') + // .attr('x', (d,i)=> i * barw + marginLeft) + // .attr('y', d => height - yScale(d) - margin)// height - yScale(d) - margin ) + // .attr('width', barw -3 ) + // .attr('height', d=> yScale(d) ) + // .attr('fill', colorScale) + // + // var yAxis = d3.axisLeft().scale(yScale); + // var xScale = d3.scaleLinear().domain([0, data.length]).range([0,width]); + // var xAxis = d3.axisBottom().scale(xScale).ticks(data.length); + // + // svg.append("g") + // .attr("class", "axis") + // .attr("transform", `translate(${marginLeft-5} , ${height-margin} )`) + // .call(xAxis); + // + // svg.append("g") + // .attr("class", "axis") + // .attr("transform", `translate(${marginLeft -5 } )`) + // .call(yAxis); + // + // svg.selectAll('rect') + // .transition().style("fill","red").duration(10000);; +} + +reload() From 7e6c68e54555fe769411af152866f1a872184c74 Mon Sep 17 00:00:00 2001 From: ppsari Date: Wed, 21 Jun 2017 20:15:58 +0700 Subject: [PATCH 2/2] topscore --- index.html | 4 +- script.js | 3 +- script2.js | 270 ++++++++++++++++++++++++++-------------------------- topscore.js | 40 +++++++- 4 files changed, 176 insertions(+), 141 deletions(-) diff --git a/index.html b/index.html index f20a825..0dc3f96 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ -