finished
This commit is contained in:
@@ -1,147 +1,167 @@
|
||||
/** Class implementing the bar chart view. */
|
||||
class BarChart {
|
||||
|
||||
/**
|
||||
* Create a bar chart instance and pass the other views in.
|
||||
* @param worldMap
|
||||
* @param infoPanel
|
||||
* @param allData
|
||||
*/
|
||||
constructor(worldMap, infoPanel, allData) {
|
||||
this.worldMap = worldMap;
|
||||
this.infoPanel = infoPanel;
|
||||
this.allData = allData;
|
||||
}
|
||||
/**
|
||||
* Create a bar chart instance and pass the other views in.
|
||||
* @param worldMap
|
||||
* @param infoPanel
|
||||
* @param allData
|
||||
*/
|
||||
constructor(worldMap, infoPanel, allData) {
|
||||
this.worldMap = worldMap;
|
||||
this.infoPanel = infoPanel;
|
||||
this.allData = allData;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render and update the bar chart based on the selection of the data type in the drop-down box
|
||||
*/
|
||||
updateBarChart(selectedDimension) {
|
||||
// ******* TODO: PART I *******
|
||||
/**
|
||||
* Render and update the bar chart based on the selection of the data type in the drop-down box
|
||||
*/
|
||||
updateBarChart(selectedDimension) {
|
||||
// ******* TODO: PART I *******
|
||||
|
||||
// Create the x and y scales; make
|
||||
// sure to leave room for the axes
|
||||
// Create the x and y scales; make
|
||||
// sure to leave room for the axes
|
||||
|
||||
let data = this.chooseData(selectedDimension);
|
||||
let data = this.chooseData(selectedDimension);
|
||||
let allData = this.allData;
|
||||
let infoPanel = this.infoPanel;
|
||||
let worldMap = this.worldMap;
|
||||
let svgHeight = d3.select("#barChart").style("height").replace("px", "");
|
||||
let svgWidth = d3.select("#barChart").style("width").replace("px", "");
|
||||
|
||||
let svgHeight = d3.select("#barChart").style("height").replace("px", "");
|
||||
let svgWidth = d3.select("#barChart").style("width").replace("px", "");
|
||||
let xaxisHeight = 60;
|
||||
let yaxisWidth = 60;
|
||||
d3.select("#barChart")
|
||||
.attr("transform", "scale(1,-1)");
|
||||
data.sort(function (a, b) {
|
||||
return a[1] > b[1] ? 1 : -1;
|
||||
});
|
||||
|
||||
let xaxisHeight = 60;
|
||||
let yaxisWidth = 60;
|
||||
d3.select("#barChart")
|
||||
.attr("transform", "scale(1,-1)");
|
||||
data.sort(function(a, b) {
|
||||
return a[1] > b[1] ? 1 : -1;
|
||||
});
|
||||
let dataNum = [];
|
||||
data.forEach(x => dataNum.push(x.data));
|
||||
let datadate = [];
|
||||
data.forEach(x => datadate.push(x.date));
|
||||
var blues = d3.scaleOrdinal(d3.schemeBlues[datadate.length]);
|
||||
|
||||
let yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataNum)])
|
||||
.range([svgHeight - (xaxisHeight), 0]);
|
||||
|
||||
let xScale = d3.scaleBand()
|
||||
.domain(datadate)
|
||||
.range([xaxisHeight, svgWidth - yaxisWidth])
|
||||
.padding(.25);
|
||||
|
||||
let y_axis = d3.axisLeft(yScale);
|
||||
|
||||
let x_axis = d3.axisBottom(xScale)
|
||||
.tickFormat((d, i) => datadate[i]);
|
||||
//.scale(xScale);
|
||||
|
||||
|
||||
let dataNum = [];
|
||||
data.forEach(x => dataNum.push(x.data));
|
||||
let datadate = [];
|
||||
data.forEach(x => datadate.push(x.date));
|
||||
var blues = d3.scaleOrdinal(d3.schemeBlues[datadate.length]);
|
||||
d3.select("#xAxis")
|
||||
.style("height", xaxisHeight)
|
||||
.attr("transform", `translate(0, ${yaxisWidth}) scale(1,-1)`)
|
||||
.call(x_axis)
|
||||
.selectAll("text")
|
||||
.attr('transform', 'translate(15, 30) rotate(90)');
|
||||
|
||||
let yScale = d3.scaleLinear()
|
||||
.domain([0 , d3.max(dataNum)])
|
||||
.range([svgHeight-(xaxisHeight), 0]);
|
||||
let height = svgHeight;
|
||||
d3.select("#yAxis")
|
||||
//.style("width", yaxisWidth)
|
||||
.attr("transform", `translate(${xaxisHeight}, ${svgHeight}) scale(1,-1)`)
|
||||
.call(y_axis);
|
||||
// Create colorScale
|
||||
let color = d3.scaleLinear().domain([1, svgHeight - yScale(d3.max(dataNum)) - xaxisHeight])
|
||||
.interpolate(d3.interpolateHcl)
|
||||
.range([d3.rgb("#00f9ff"), d3.rgb('#0051ff')]);
|
||||
// Create the axes (hint: use #xAxis and #yAxis)
|
||||
let barChart = d3.select("#bars")
|
||||
.selectAll('rect')
|
||||
.data(data);
|
||||
|
||||
let xScale = d3.scaleBand()
|
||||
.domain(datadate)
|
||||
.range([xaxisHeight, svgWidth-yaxisWidth])
|
||||
.padding(.25);
|
||||
barChart.exit()
|
||||
.attr('height', 0)
|
||||
.remove();
|
||||
|
||||
let y_axis = d3.axisLeft(yScale);
|
||||
|
||||
let x_axis = d3.axisBottom(xScale)
|
||||
.tickFormat((d,i) => datadate[i]);
|
||||
//.scale(xScale);
|
||||
barChart.attr('height', (d, i) => svgHeight - yScale(d['data']) - xaxisHeight)
|
||||
.attr('x', (d, i) => xScale(d['date']))
|
||||
.attr('y', (d, i) => yScale(d['data']))
|
||||
.attr('fill', (d, i) => color(svgHeight - yScale(d['data']) - xaxisHeight));
|
||||
|
||||
|
||||
d3.select("#xAxis")
|
||||
.style("height", xaxisHeight)
|
||||
.attr("transform", `translate(0, ${yaxisWidth}) scale(1,-1)`)
|
||||
.call(x_axis)
|
||||
.selectAll("text")
|
||||
.attr('transform', 'translate(15, 30) rotate(90)');
|
||||
barChart
|
||||
.enter()
|
||||
.append('rect')
|
||||
.attr("transform", `translate(0, ${height}) scale(1,-1)`)
|
||||
.attr('id', (d, i) => `${d['date']}`)
|
||||
.attr('x', (d, i) => xScale(d['date']))
|
||||
.attr('y', (d, i) => yScale(d['data']))
|
||||
.attr('width', xScale.bandwidth())
|
||||
.attr('height', (d, i) => svgHeight - yScale(d['data']) - xaxisHeight)
|
||||
.attr('class', 'bar')
|
||||
.attr('fill', (d, i) => color(svgHeight - yScale(d['data']) - xaxisHeight));
|
||||
|
||||
let height = svgHeight;
|
||||
d3.select("#yAxis")
|
||||
//.style("width", yaxisWidth)
|
||||
.attr("transform", `translate(${xaxisHeight}, ${svgHeight}) scale(1,-1)`)
|
||||
.call(y_axis);
|
||||
// Create colorScale
|
||||
|
||||
// Create the axes (hint: use #xAxis and #yAxis)
|
||||
//
|
||||
// d3.select("#bars")
|
||||
// .selectAll('#rect')
|
||||
//
|
||||
|
||||
//Create the bars (hint: use #bars)
|
||||
let barChart = d3.select("#bars")
|
||||
.selectAll('rect')
|
||||
.data(datadate)
|
||||
.enter()
|
||||
.append('rect')
|
||||
.attr("transform", `translate(0, ${height}) scale(1,-1)`)
|
||||
.attr('x', (d,i) => xScale(d))
|
||||
.attr('y', (d,i) => yScale(dataNum[i]))
|
||||
.attr('width', xScale.bandwidth())
|
||||
.attr('height', (d,i) => svgHeight - yScale(dataNum[i])-xaxisHeight)
|
||||
.attr('class', 'bar');
|
||||
console.log(blues);
|
||||
// ******* TODO: PART II *******
|
||||
|
||||
d3.select("#bars")
|
||||
.selectAll('rect')
|
||||
.attr('fill', (d, i) => blues[i]);
|
||||
//
|
||||
// Implement how the bars respond to click events
|
||||
// Color the selected bar to indicate is has been selected.
|
||||
// Make sure only the selected bar has this new color.
|
||||
|
||||
// barChart.exit().remove();
|
||||
d3.select("#bars")
|
||||
.selectAll('rect')
|
||||
.on('click', function (d, i) {
|
||||
d3.select(".selected").classed("selected", false);
|
||||
// Select current item
|
||||
d3.select(this).classed("selected", true);
|
||||
infoPanel.updateInfo(allData[d['index']]);
|
||||
console.log(allData[d['index']]);
|
||||
worldMap.updateMap(allData[d['index']]);
|
||||
|
||||
// barChart.enter()
|
||||
// .append("rect")
|
||||
// .attr("data", function (d, i) {
|
||||
// console.log(d);
|
||||
// console.log(i);
|
||||
// return i;
|
||||
// })
|
||||
// .attr("height", d => yScale(d))
|
||||
// .attr("y", 0)
|
||||
// .attr("width", (svgWidth-100)/(dataNum.length +1))
|
||||
// .attr("transform", "translate(60, 310) scale(1,-1)")
|
||||
// .style("fill", "steelblue");
|
||||
});
|
||||
|
||||
// ******* TODO: PART II *******
|
||||
// Call the necessary update functions for when a user clicks on a bar.
|
||||
// Note: think about what you want to update when a different bar is selected.
|
||||
|
||||
// Implement how the bars respond to click events
|
||||
// Color the selected bar to indicate is has been selected.
|
||||
// Make sure only the selected bar has this new color.
|
||||
}
|
||||
|
||||
// Call the necessary update functions for when a user clicks on a bar.
|
||||
// Note: think about what you want to update when a different bar is selected.
|
||||
|
||||
}
|
||||
/**
|
||||
* Check the drop-down box for the currently selected data type and update the bar chart accordingly.
|
||||
*
|
||||
* There are 4 attributes that can be selected:
|
||||
* goals, matches, attendance and teams.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Check the drop-down box for the currently selected data type and update the bar chart accordingly.
|
||||
*
|
||||
* There are 4 attributes that can be selected:
|
||||
* goals, matches, attendance and teams.
|
||||
*/
|
||||
chooseData() {
|
||||
// ******* TODO: PART I *******
|
||||
//Changed the selected data when a user selects a different
|
||||
// menu item from the drop down.
|
||||
let currentDataType = d3.select('#dataset')
|
||||
.node().value;
|
||||
//.property("value");
|
||||
let selectedData = [];
|
||||
this.allData.forEach(x => {
|
||||
var item = [];
|
||||
item.date = x["year"];
|
||||
item.data = x[currentDataType];
|
||||
selectedData.push(item);
|
||||
});
|
||||
chooseData() {
|
||||
// ******* TODO: PART I *******
|
||||
//Changed the selected data when a user selects a different
|
||||
// menu item from the drop down.
|
||||
let currentDataType = d3.select('#dataset')
|
||||
.node().value;
|
||||
//.property("value");
|
||||
let selectedData = [];
|
||||
for(let i = 0; i < this.allData.length; i++) {
|
||||
var item = [];
|
||||
item.date = this.allData[i]["year"];
|
||||
item.data = this.allData[i][currentDataType];
|
||||
item.index = i;
|
||||
selectedData.push(item);
|
||||
|
||||
console.log(this.allData);
|
||||
console.log(selectedData);
|
||||
return selectedData;
|
||||
}
|
||||
}
|
||||
}
|
||||
// this.allData.forEach(x => {
|
||||
// var item = [];
|
||||
// item.date = x["year"];
|
||||
// item.data = x[currentDataType];
|
||||
// item.index = x;
|
||||
// selectedData.push(item);
|
||||
// });
|
||||
return selectedData;
|
||||
}
|
||||
}
|
||||
@@ -16,11 +16,27 @@ class InfoPanel {
|
||||
|
||||
// Update the text elements in the infoBox to reflect:
|
||||
// World Cup Title, host, winner, runner_up, and all participating teams that year
|
||||
let host = d3.select('#details').select('#host');
|
||||
let title = d3.select('#details').select('#edition');
|
||||
let winner = d3.select('#details').select('#winner');
|
||||
let runner_up = d3.select('#details').select('#silver');
|
||||
let teams = d3.select('#details').select('#teams');
|
||||
|
||||
// Hint: For the list of teams, you can create an list element for each team.
|
||||
// Hint: Select the appropriate ids to update the text content.
|
||||
host.text(oneWorldCup['host']);
|
||||
title.text(oneWorldCup['EDITION']);
|
||||
winner.text(oneWorldCup['winner']);
|
||||
runner_up.text(oneWorldCup['runner_up']);
|
||||
let list = d3.select("#teams").selectAll('li').data(oneWorldCup.teams_names);
|
||||
|
||||
let newList = list.enter()
|
||||
.append('li')
|
||||
.text((d,i) => d);
|
||||
list.exit().remove();
|
||||
list = newList.merge(list);
|
||||
list.transition()
|
||||
.duration(2000)
|
||||
.text((d,i) => d);
|
||||
|
||||
//Set Labels
|
||||
|
||||
}
|
||||
|
||||
|
||||
120
hw4/js/map.js
120
hw4/js/map.js
@@ -1,78 +1,88 @@
|
||||
/** Class implementing the map view. */
|
||||
class Map {
|
||||
/**
|
||||
* Creates a Map Object
|
||||
*/
|
||||
constructor() {
|
||||
this.projection = d3.geoConicConformal().scale(150).translate([400, 350]);
|
||||
/**
|
||||
* Creates a Map Object
|
||||
*/
|
||||
constructor() {
|
||||
this.projection = d3.geoConicConformal().scale(150).translate([400, 350]);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Function that clears the map
|
||||
*/
|
||||
clearMap() {
|
||||
/**
|
||||
* Function that clears the map
|
||||
*/
|
||||
clearMap() {
|
||||
|
||||
// ******* TODO: PART V*******
|
||||
// Clear the map of any colors/markers; You can do this with inline styling or by
|
||||
// defining a class style in styles.css
|
||||
d3.select("#points")
|
||||
.selectAll("circle")
|
||||
.remove();
|
||||
d3.select("#map")
|
||||
.selectAll("path")
|
||||
.classed("gold", false)
|
||||
.classed("host", false)
|
||||
.classed("team", false)
|
||||
.classed("silver", false);
|
||||
|
||||
// Hint: If you followed our suggestion of using classes to style
|
||||
// the colors and markers for hosts/teams/winners, you can use
|
||||
// d3 selection and .classed to set these classes on and off here.
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* Update Map with info for a specific FIFA World Cup
|
||||
* @param wordcupData the data for one specific world cup
|
||||
*/
|
||||
updateMap(worldcupData) {
|
||||
|
||||
/**
|
||||
* Update Map with info for a specific FIFA World Cup
|
||||
* @param wordcupData the data for one specific world cup
|
||||
*/
|
||||
updateMap(worldcupData) {
|
||||
//Clear any previous selections;
|
||||
this.clearMap();
|
||||
|
||||
//Clear any previous selections;
|
||||
this.clearMap();
|
||||
d3.select("#" + worldcupData.host_country_code)
|
||||
.classed("host", true);
|
||||
// Iterate through all participating teams and change their color as well.
|
||||
for (let i = 0; i < worldcupData.teams_names.length; i++) {
|
||||
d3.select("#" + worldcupData.teams_iso[i])
|
||||
.classed("team", true);
|
||||
}
|
||||
|
||||
// ******* TODO: PART V *******
|
||||
|
||||
// Add a marker for the winner and runner up to the map.
|
||||
|
||||
// Hint: remember we have a conveniently labeled class called .winner
|
||||
// as well as a .silver. These have styling attributes for the two
|
||||
// markers.
|
||||
let projection = this.projection;
|
||||
let points = d3.select("#points");
|
||||
points.append("circle")
|
||||
.classed("gold", "true")
|
||||
.attr("r", 15)
|
||||
.attr("transform", (d, i) => "translate(" + projection(worldcupData.win_pos) + ")");
|
||||
|
||||
|
||||
// Select the host country and change it's color accordingly.
|
||||
|
||||
// Iterate through all participating teams and change their color as well.
|
||||
|
||||
// We strongly suggest using CSS classes to style the selected countries.
|
||||
points.append("circle")
|
||||
.classed("silver", "true")
|
||||
.attr("r", 15)
|
||||
.attr("transform", (d, i) => "translate(" + projection(worldcupData.ru_pos) + ")")
|
||||
|
||||
|
||||
// Add a marker for gold/silver medalists
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the actual map
|
||||
* @param the json data with the shape of all countries
|
||||
*/
|
||||
drawMap(world) {
|
||||
/**
|
||||
* Renders the actual map
|
||||
* @param the json data with the shape of all countries
|
||||
*/
|
||||
drawMap(world) {
|
||||
|
||||
//(note that projection is a class member
|
||||
// updateMap() will need it to add the winner/runner_up markers.)
|
||||
|
||||
// ******* TODO: PART IV *******
|
||||
let path = d3.geoPath().projection(this.projection);
|
||||
d3.select("#map")
|
||||
.selectAll("path")
|
||||
.data(topojson.feature(world, world.objects.countries).features)
|
||||
.enter()
|
||||
.append('path')
|
||||
.attr("id", d => d.id)
|
||||
.attr("d", path)
|
||||
.classed("countries", true);
|
||||
|
||||
// Draw the background (country outlines; hint: use #map).
|
||||
// You will need to convert the topoJSON file to geoJSON.
|
||||
// Make sure and add gridlines to the map.
|
||||
|
||||
// Hint: assign an id to each country path to make it easier to select afterwards
|
||||
// we suggest you use the variable in the data element's .id field to set the id
|
||||
var geograt = d3.geoGraticule();
|
||||
d3.select("#map").append("path")
|
||||
.datum(geograt)
|
||||
.attr("d", path)
|
||||
|
||||
// Make sure and give your paths the appropriate class (see the .css selectors at
|
||||
// the top of the provided html file)
|
||||
|
||||
}
|
||||
.attr("class", "grat");
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -46,11 +46,7 @@ function chooseData() {
|
||||
// ******* TODO: PART I *******
|
||||
// Changed the selected data when a user selects a different
|
||||
// menu item from the drop down.
|
||||
let currentDataType = d3.select('#dataset')
|
||||
let tmp = d3.select('#dataset')
|
||||
.node().value;
|
||||
//.property("value");
|
||||
let selectedData = [];
|
||||
this.allData.forEach(x => selectedData.push(x[currentDataType]));
|
||||
return selectedData;
|
||||
|
||||
barChart.updateBarChart(tmp);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user