bradybod-usu/cs5890_data_visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finished

Browse Source
This commit is contained in:
bbod
2019-10-02 08:30:45 -06:00
parent a4d4fbe605
commit 8c213db798
5 changed files with 468 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
hw4/.idea/workspace.xml generated
View File

@@ -2,22 +2,170 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="906ccaea-ddf8-4975-a2c6-85ccd75313dc" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/js/barChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/barChart.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/js/infoPanel.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/infoPanel.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/js/map.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/map.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/js/script.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/script.js" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FUSProjectUsageTrigger">
<session id="-764738881">
<usages-collector id="statistics.file.extensions.edit">
<counts>
<entry key="js" value="3403" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.edit">
<counts>
<entry key="JavaScript" value="3403" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.extensions.open">
<counts>
<entry key="css" value="1" />
<entry key="js" value="1" />
<entry key="json" value="1" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.open">
<counts>
<entry key="CSS" value="1" />
<entry key="JSON" value="1" />
<entry key="JavaScript" value="1" />
</counts>
</usages-collector>
</session>
</component>
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/hw4.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="115">
<caret line="18" column="23" lean-forward="true" selection-start-line="18" selection-start-column="23" selection-end-line="18" selection-end-column="23" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/barChart.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="181">
<caret line="129" column="85" selection-start-line="129" selection-start-column="85" selection-end-line="129" selection-end-column="85" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/script.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="375">
<caret line="28" column="20" selection-start-line="28" selection-start-column="20" selection-end-line="28" selection-end-column="20" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/infoPanel.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="262">
<caret line="41" lean-forward="true" selection-start-line="41" selection-end-line="41" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/map.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="705">
<caret line="47" column="95" selection-start-line="47" selection-start-column="95" selection-end-line="47" selection-end-column="95" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/data/world.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-1363" />
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/styles.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="113">
<caret line="24" column="10" lean-forward="true" selection-start-line="24" selection-start-column="10" selection-end-line="24" selection-end-column="10" />
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>console</find>
<find>xaxis</find>
</findStrings>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/js/script.js" />
<option value="$PROJECT_DIR$/js/barChart.js" />
<option value="$PROJECT_DIR$/js/infoPanel.js" />
<option value="$PROJECT_DIR$/js/map.js" />
</list>
</option>
</component>
<component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsGulpfileManager">
<detection-done>true</detection-done>
<sorting>DEFINITION_ORDER</sorting>
</component>
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectView">
<navigator proportions="" version="1">
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="hw4" type="b2602c69:ProjectViewProjectNode" />
<item name="hw4" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="hw4" type="b2602c69:ProjectViewProjectNode" />
<item name="hw4" type="462c0819:PsiDirectoryNode" />
<item name="data" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="hw4" type="b2602c69:ProjectViewProjectNode" />
<item name="hw4" type="462c0819:PsiDirectoryNode" />
<item name="figs" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="hw4" type="b2602c69:ProjectViewProjectNode" />
<item name="hw4" type="462c0819:PsiDirectoryNode" />
<item name="js" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
<pane id="Scope" />
</panes>
</component>
<component name="PropertiesComponent">
<property name="last_opened_file_path" value="$PROJECT_DIR$/../hw3/script.js" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
@@ -50,4 +198,98 @@
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="16249000" />
</component>
<component name="ToolWindowManager">
<frame x="0" y="23" width="1280" height="731" extended-state="0" />
<editor active="true" />
<layout>
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.2494043" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" visible="true" weight="0.3286385" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
<window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
<window_info anchor="bottom" id="Terminal" order="9" weight="0.3286385" />
<window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
</layout>
<layout-to-restore>
<window_info content_ui="combo" id="Project" order="0" weight="0.2494043" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" visible="true" weight="0.3286385" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
<window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
<window_info anchor="bottom" id="Terminal" order="9" weight="0.3286385" />
<window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
</layout-to-restore>
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/js/barChart.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="181">
<caret line="129" column="85" selection-start-line="129" selection-start-column="85" selection-end-line="129" selection-end-column="85" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/script.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="375">
<caret line="28" column="20" selection-start-line="28" selection-start-column="20" selection-end-line="28" selection-end-column="20" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/styles.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="113">
<caret line="24" column="10" lean-forward="true" selection-start-line="24" selection-start-column="10" selection-end-line="24" selection-end-column="10" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/data/world.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-1363" />
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/infoPanel.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="262">
<caret line="41" lean-forward="true" selection-start-line="41" selection-end-line="41" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/map.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="705">
<caret line="47" column="95" selection-start-line="47" selection-start-column="95" selection-end-line="47" selection-end-column="95" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/hw4.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="115">
<caret line="18" column="23" lean-forward="true" selection-start-line="18" selection-start-column="23" selection-end-line="18" selection-end-column="23" />
</state>
</provider>
</entry>
</component>
</project>

260
hw4/js/barChart.js
View File

@@ -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;
}
}

22
hw4/js/infoPanel.js
View File

@@ -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
View File

@@ -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");
}
}

8
hw4/js/script.js
View File

@@ -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);
}