Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

belum, nanti sore dilanjutin kasi efek #11

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

belum, nanti sore dilanjutin kasi efek #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3f28bf
belum, nanti sore dilanjutin kasi efek
ppsari Jun 20, 2017
7e6c68e
topscore
ppsari Jun 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 15 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,28 @@
<html lang="en">
<head>
<meta charset="UTF-8">

<script src="https://d3js.org/d3.v4.js"></script>
<script src="d3.layout.cloud.js"></script>
<style>
.bar {
fill: steelblue;
}
</style>
<title>D3 Challenge</title>
</head>
<body>
<div id="container">

<h1>AFC Wimbledon Results</h1>
<div id="results"></div>
<div id="results" style="margin:auto"></div>
<hr />
<h2>AFC Wimbledon Top Scorer</h2>
<div id="top-score"></div>
<div id="topscore"></div>
<script src="script.js"></script>
<script src="topscore.js"></script>
</div>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="script.js"></script>
<script src="d3.layout.cloud.js"></script>
<script src="topscore.js"></script>

<!-- <script src="script2.js"></script> -->
</body>
</html>
70 changes: 61 additions & 9 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,78 @@
/* 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()
135 changes: 135 additions & 0 deletions script2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
40 changes: 37 additions & 3 deletions topscore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,51 @@
/* global d3 width height */
var width = 800, height = 300, marginLeft= 40, margin=20;

let fill = d3.scaleOrdinal(d3.schemeCategory20)
let leaderScale = d3.scaleLinear()
.range([5, 40])

const draw = (words) => {
// Draw your data here...
d3.select("#topscore").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "wordcloud")
.append("g")
// without the transform, words words would get cutoff to the left and top, they would
// appear outside of the SVG area
.attr("transform", "translate(320,200)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("fill", function(d, i) { return fill(i); })
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });

}


const load = () => {
// Load your data here...
let data = [];
d3.tsv('stats.tsv', rows => {
data = rows.map(row => {
return {"size": (row.G +1) , "text": row.Name}
})
data.sort( (a,b) => b.goal - a.goal );

fill
.domain(leaderScale)

d3.layout.cloud().size([800, 300])
.words(data)
.rotate(0)
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();

})

}

load()