Assignment 4

Developer
Colin Brown
Size
4,904 Kb
Views
4,048
  1. Assignment 4 Previews
  2. Assignment 4 HTML Codes
  3. Assignment 4 CSS Codes
  4. Assignment 4 JS Codes

How do I make an assignment 4?

What is a assignment 4? How do you make a assignment 4? This script and codes were developed by Colin Brown on 05 January 2023, Thursday.

Assignment 4 Previews
IQ Test

Assignment 4 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Assignment 4</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta charset="utf-8">
<html lang="en">
<head> <title>Assignment #4</title> <style> body { font-family: sans-serif; font-size: 11pt; } .highlight { fill: #f00; stroke: #000; } path.state-boundary { stroke: #000; stroke-width: .5px; } rect { fill: #ddd; stroke: #000; stroke-width: .5px; } .bar rect.highlight { fill: #f00; stroke: #000; stroke-width: .5px; } .bar text { font-size: 9pt; } #brushed svg { padding: 10px; } .x.axis text { transform: translate(-12px,10px) rotate(-90deg); text-anchor: end; } </style>
</head>
<body> <h1>Info</h1> <h2>Colin Brown</h2> <h2>01692330</h2> <h2>Data Visualization (CIS 468)</h2> <h2>Assignment 4</h2> <p>This assignment is all my own work. I did not copy the code from any other source.</p> <select id="yearSelect" name="year" onChange="updateEverything($('#linechart select').val())"></select> <div id="bars"></div> <div id="brushed"></div> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.js'></script>
<script src='https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js'></script>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Assignment 4 - Script Codes CSS Codes

#bars .bar, .remove { fill:blue;
}

Assignment 4 - Script Codes JS Codes

function extractJobsPct(jobData, year, occCode, number) { var res = jobData.filter(	function(d) { return ((year == null || d.year == year) && (occCode == null || d.occ_code == occCode)); }); res = res.sort(function(a,b) {	return d3.descending(+a.jobs_1000,+b.jobs_1000); }); if (number) {	return res.slice(0,number); } else {	return res; }
}
//I don't want to bother defining this twice
var jobs = [], jdata;
var barW = 500, barH = 300, barMargin = {top: 20, bottom: 120, left: 100, right: 20}, barX = d3.scaleBand().padding(0.1), barY = d3.scaleLinear(), barXAxis = null;
function createBars(divId, jobData, year, occCode) { var svg = d3.select(divId).append("svg")	.attr("width", barW+barMargin.left+barMargin.right)	.attr("height", barH+barMargin.top+barMargin.bottom)	.append("g")	.attr("class", "main")	.attr("transform", "translate(" + barMargin.left + "," + barMargin.top + ")") var csData = extractJobsPct(jobData, year, occCode, 18); barX.range([0,barW])	.domain(csData.map(function(d) { return d.area_title; })); barY.range([barH,0])	.domain([0,d3.max(extractJobsPct(jobData, null, occCode), function(d) { return +d.jobs_1000; })]); svg.selectAll("rect")	.data(csData)	.enter().append("rect")	.attr("class", "bar")	.attr("x", function(d) { return barX(d.area_title); })	.attr("y", function(d) { return barY(+d.jobs_1000); })	.attr("width", barX.bandwidth())	.attr("height", function(d) { return barH - barY(+d.jobs_1000); }) barXAxis = d3.axisBottom(barX); svg.append("g")	.attr("transform", "translate(0," + barH +")")	.attr("class", "x axis")	.call(barXAxis) var barYAxis = d3.axisLeft(barY); svg.append("g")	.attr("class", "y axis")	.call(barYAxis) svg.append("g")	.attr("transform", "translate(-30," + (barH/2) + ") rotate(-90)")	.append("text")	.style("text-anchor", "middle")	.text("Jobs Per 1000") svg.append("text")	.attr("x", barW/2)	.attr("y", barH + 115)	.text("State")
}
function updateBars(divId, jobData, year) { var fixedDelay = 2000; //Delay before doing anything var csData = extractJobsPct(jobData, year, "15-0000", 18); var svg = d3.select(divId +" svg"); var selection = svg.select("g.main").selectAll("rect").data(); var names = _.map(selection,"area_title"); //original data var orig = selection; var newnums = d3.nest().key(function(d) {return d.area_title}).rollup(function(d){return d[0].jobs_1000}).object(csData); orig.map(function(a){ a.jobs_1000 = newnums[a.area_title]}); selection = svg.selectAll("rect") .data(orig) selection.enter().merge(selection) .attr("class", function(d) {return (typeof d.jobs_1000 == "undefined") ? "remove" : "bar";}) .transition().duration(3000).delay(fixedDelay) .attr("y", function(d) { return barY(+d.jobs_1000); })	.attr("height", function(d) { return barH - barY(+d.jobs_1000); }); svg.selectAll("rect.remove").attr("opacity",1).transition().duration(2000).attr("opacity",0).remove() barX.range([0,barW])	.domain(csData.map(function(d) { return d.area_title; })); barXAxis = d3.axisBottom(barX); svg.select("g.x.axis") .transition().delay(fixedDelay+2600).duration(2000)	.call(barXAxis)
selection = svg.select("g.main").selectAll("rect").data(selection.data().filter(function(a){return a.jobs_1000 != 0})) selection .transition().delay(3000+fixedDelay).duration(1000) .attr("x", function(d) {return barX(d.area_title); }); selection = selection.data(); var x = (_(csData).keyBy('area_title').at(_.difference(_.map(csData,"area_title"),names)).value().filter(Boolean)) x.map(function(a){selection.push(a);}) console.log(selection.length) //Not a huge fan of setting the Timeout but I didn't know any other way to do this
setTimeout( function() { svg.select("g.main").selectAll("rect").data(selection).enter() .append("rect")	.attr("class", "bar") .attr("x", function(d) {return barX(d.area_title); }) .attr("y", function(d) {return barY(+d.jobs_1000); }) .attr("height", function(d) { return barH - barY(+d.jobs_1000); }) .attr("width", barX.bandwidth()) .attr("opacity", 0) .transition().delay(1000+fixedDelay).duration(1000) .attr("opacity",1)
},3100)
}
function getStateRankings(jobData, occCode) { //I'm just giving the ranking variable global scope doesn't seem worth it to redefine this everytime I want to change colors if(typeof jobs["Alabama"] == "undefined"){ jobs = d3.nest().key(function(d) {return d.area_title }).key(function(d){return d.occ_code;}).rollup(function(v) { return (parseInt(v.filter(function(a) { return a.year == "2016"})[0].tot_emp));}) .object(jobData); Object.keys(jobs).map(function(a){ (Object.keys(jobs[a]).sort(function(b,c) {return jobs[a][c]-jobs[a][b] })).map(function(d,e){jobs[a][d] = e})}); } var obj = {} Object.keys(jobs).map(function(a) {obj[a] = jobs[a][occCode]}) return obj
}
function createBrushedVis(divId, usMap, jobData, year) { var jobData = jobData.filter(	function(d) { return (+d.year == year); }); var width = 600,	height = 400; var svg = d3.select(divId).append("svg")	.attr("width", width)	.attr("height", height); var projection = d3.geoAlbersUsa()	.fitExtent([[0,0],[width,height]], usMap); var path = d3.geoPath()	.projection(projection); var rankings = getStateRankings(jobData, "15-0000"); var color = d3.scaleSequential(d3.interpolateViridis).domain([22,0]); svg.append("g")	.selectAll("path")	.data(usMap.features)	.enter().append("path")	.attr("d", path)	.attr("fill", function(d) { return color(rankings[d.properties.name]); })	.attr("class", "state-boundary")	.classed("highlight", false) var bWidth = 400,	bHeight = 400,	midX = 200; var allJobs = d3.nest()	.key(function(d) { return d["occ_code"]; })	.key(function(d) { return d["occ_title"]; })	.rollup(function(v) { return v.reduce(function(s,d) {	if (!+d.tot_emp) { return s; } return s + +d.tot_emp; },0); })	.entries(jobData)	.sort(function(a,b) { return d3.descending(+a.values[0].value, +b.values[0].value); }) var barSvg = d3.select(divId).append("svg") .attr("class","selection")	.attr("width", bWidth)	.attr("height", bHeight)	.style("vertical-align", "bottom") var y = d3.scaleBand().padding(0.1).range([0,bHeight]).domain(allJobs.map(function(d) { return d.values[0].key; })); var x = d3.scaleLinear().range([0,bWidth-midX]).domain([0,d3.max(allJobs, function(d) { return d.values[0].value; })]); var bars = barSvg.selectAll(".bar").data(allJobs)	.enter().append("g")	.attr("transform", function(d) { return "translate(0," + y(d.values[0].key) + ")";})	.attr("class", "bar") function jobMouseEnter() { var rankings = getStateRankings(jobData,d3.select(this).data()[0]["key"]); svg.selectAll("path").attr("fill", function(d) { return color(rankings[d.properties.name]); }) d3.select("svg.selection").selectAll("rect").attr("class",""); d3.select(this).attr("class","highlight"); } bars.append("rect")	.attr("x", midX)	.attr("y", 0)	.attr("width", function(d) { return x(d.values[0].value); })	.attr("height", y.bandwidth())	.classed("highlight", function(d) { return d.key == '15-0000'; })	.on("mouseover", jobMouseEnter) bars.append("text")	.attr("x", midX - 4)	.attr("y", 12)	.style("text-anchor", "end")	.text(function(d) { var label = d.values[0].key.slice(0,-12); if (label.length > 33) {	label = label.slice(0,30) + "..."; } return label; });
}
function globaljdata(jobsData)
{ jdata = jobsData;
}
function updateEverything(year)
{ updateBars("#bars", jdata, year);
}
function createSelector(jobsData)
{ years = d3.nest().key(function(d) {return d.area_title }).rollup(function(v) { return v.map(function(a){return a.year;})}) .object(jobsData); d3.select("#yearSelect") .selectAll("option").data(_.sortedUniq(years["Alabama"])) .enter().append("option") .attr("value", function(d) { return d; }) .text(function(d) { return d; }); $("#yearSelect").val("2016");
}
function processData(errors, usMap, jobsData) { console.log("Errors", errors) createBars("#bars", jobsData, 2012, "15-0000"); updateBars("#bars", jobsData, 2016); createSelector(jobsData); globaljdata(jobsData); createBrushedVis("#brushed", usMap, jobsData, 2016);
}
d3.queue() // use these two files //.defer(d3.json, "http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a4/us-states.json") //.defer(d3.csv, "http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a4/occupations.csv") // or these HTTPS versions .defer(d3.json, "https://cdn.rawgit.com/dakoop/69d42ee809c9e7985a2ff7ac77720656/raw/6707c376cfcd68a71f59f60c3f4569277f20b7cf/us-states.json") .defer(d3.csv, "https://cdn.rawgit.com/dakoop/69d42ee809c9e7985a2ff7ac77720656/raw/6707c376cfcd68a71f59f60c3f4569277f20b7cf/occupations.csv") .await(processData);
Assignment 4 - Script Codes
Assignment 4 - Script Codes
Home Page Home
Developer Colin Brown
Username kefkai
Uploaded January 05, 2023
Rating 3
Size 4,904 Kb
Views 4,048
Do you need developer help for Assignment 4?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Colin Brown (kefkai) Script Codes
Name
Assignment 1
Assignment 2
A Pen by Colin Brown
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!