LH
Uploaded byLacey Harris-Coble
151 views

Data Visualization Project Code

Embed presentation

Download to read offline
<!DOCTYPE html> <meta charset="utf-8"> <head> <style type = "text/css"> .header { height:100px; background:#FFF; width:1250px; margin:0px auto; text-align: center; padding-top: 50px; font-size:50px; font-family: sans-serif; font-weight: bold; } .decoration { height: 30px; background: #02818a; opacity: .9; width: 1250px; } #button1 { display: inline-block; } #button2 { display: inline-block; } #button3 { display: inline-block; } .space2 { height: 20px; } .space3 { height: 20px; background-color: gray; } .countries { fill: none; } .country { fill: none; stroke: #989898; stroke-linejoin: round; }
.q0-5 { fill:rgb(252,187,161); } .q1-5 { fill:rgb(252,146,114); } .q2-5 { fill:rgb(251,106,74); } .q3-5 { fill:rgb(222,45,38); } .q4-5 { fill:rgb(165,15,21); } .q0-5:hover { opacity: 0.3; } .q1-5:hover { opacity: 0.3; } .q2-5:hover { opacity: 0.3; } .q3-5:hover { opacity: 0.3; } .q4-5:hover { opacity: 0.3; } .p0-8 { fill:rgb(253,224,221); } .p1-8 { fill:rgb(252,197,192); } .p2-8 { fill:rgb(250,159,181); } .p3-8 { fill:rgb(247,104,161); } .p4-8 { fill:rgb(221,52,151); } .p5-8 { fill:rgb(174,1,126); } .p6-8 { fill:rgb(122,1,119); } .p7-8 { fill:rgb(73,0,106); } .p0-8:hover { opacity: 0.3; } .p1-8:hover { opacity: 0.3; } .p2-8:hover { opacity: 0.3; } .p3-8:hover { opacity: 0.3; } .p4-8:hover { opacity: 0.3;
} .p5-8:hover { opacity: 0.3; } .p6-8:hover { opacity: 0.3; } .p7-8:hover { opacity: 0.3; } .r0-8 { fill:rgb(237,248,177); } .r1-8 { fill:rgb(199,233,180); } .r2-8 { fill:rgb(127,205,187); } .r3-8 { fill:rgb(65,182,196); } .r4-8 { fill:rgb(29,145,192); } .r5-8 { fill:rgb(34,94,168); } .r6-8 { fill:rgb(37,52,148); } .r7-8 { fill:rgb(8,29,88); } .r0-8:hover { opacity: 0.3; } .r1-8:hover { opacity: 0.3; } .r2-8:hover { opacity: 0.3; } .r3-8:hover { opacity: 0.3; } .r4-8:hover { opacity: 0.3; } .r5-8:hover { opacity: 0.3; } .r6-8:hover { opacity: 0.3; } .r7-8:hover { opacity: 0.3; }
.s0-5 { fill:rgb(208,209,230); } .s1-5 { fill:rgb(166,189,219); } .s2-5 { fill:rgb(103,169,207); } .s3-5 { fill:rgb(28,144,153); } .s4-5 { fill:rgb(1,108,89); } .s0-5:hover { opacity: 0.3; } .s1-5:hover { opacity: 0.3; } .s2-5:hover { opacity: 0.3; } .s3-5:hover { opacity: 0.3; } .s4-5:hover { opacity: 0.3; } .t0-5 { fill:rgb(217,240,163); } .t1-5 { fill:rgb(173,221,142); } .t2-5 { fill:rgb(120,198,121); } .t3-5 { fill:rgb(49,163,84); } .t4-5 { fill:rgb(0,104,55); } .t0-5:hover { opacity: 0.3; } .t1-5:hover { opacity: 0.3; } .t2-5:hover { opacity: 0.3; } .t3-5:hover { opacity: 0.3; } .t4-5:hover { opacity: 0.3; } .u0-5 { fill:rgb(198,219,239); }
.u1-5 { fill:rgb(158,202,225); } .u2-5 { fill:rgb(107,174,214); } .u3-5 { fill:rgb(49,130,189); } .u4-5 { fill:rgb(8,81,156); } .u0-5:hover { opacity: 0.3; } .u1-5:hover { opacity: 0.3; } .u2-5:hover { opacity: 0.3; } .u3-5:hover { opacity: 0.3; } .u4-5:hover { opacity: 0.3; } #tooltip { position: absolute; width: 200px; height: auto; padding: 10px; background-color: white; border-radius: 10px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); pointer-events: none; } #tooltip.hidden { display: none; } #tooltip p { margin: 0; font-family: sans-serif; font-size: 16px; line-height: 20px; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }
.bar:hover { fill: brown; } .axis { font: 9px sans-serif; } </style> </head> <body> <div class="header">Visual Analytics Project: Gender Equality</div> <div class="space1"></div> <div class="decoration"></div> <div class="space2"></div> <div style="text-align:center;"> <div id="button1"> <input name="updateButton" type="button" value="Gender Inequality Index" onclick="updateDataGII(); updateBarChartGII();" /> </div> <div id="button2"> <input name="updateButton" type="button" value="Maternal Mortality" onclick="updateDataMMR(); updateBarChartMMR();" /> </div> <div id="button3"> <input name="updateButton" type="button" value="Adolescent Birth Rate" onclick="updateDataABR(); updateBarChartABR();" /> </div> <div id="button4"> <input name="updateButton" type="button" value="Female Labor Participation Rate" onclick="updateDataFLP(); updateBarChartFLP();" /> </div> <div id="button5"> <input name="updateButton" type="button" value="Secondary Education" onclick="updateDataFSE(); updateBarChartFSE();" /> </div> <div id="button6"> <input name="updateButton"
type="button" value="Parlimentary Representation" onclick="updateDataFPR(); updateBarChartFPR();" /> </div> </div> <div class="space2"></div> <div id="tooltip" class="hidden"></div> <div class="space3"></div> <script src="d3.js"></script> <script src="queue.js"></script> <script src="topojson.js"></script> <script src="jquery-1.11.3.min.js"></script> <script> var width = 1250, height = 600; var rateById = d3.map(); var quantizeGII = d3.scale.quantize() .domain([0, 1]) .range(d3.range(5).map(function(i) { return "q" + i + "-5"; })); var quantizeMMR = d3.scale.quantize() .domain([0, 1000]) .range(d3.range(8).map(function(i) { return "p" + i + "-8"; })); var quantizeABR = d3.scale.quantize() .domain([0, 205]) .range(d3.range(8).map(function(i) { return "r" + i + "-8"; })); var quantizeFLP = d3.scale.quantize() .domain([0, 1]) .range(d3.range(5).map(function(i) { return "s" + i + "-5"; })); var quantizeFSE = d3.scale.quantize() .domain([0, 1]) .range(d3.range(5).map(function(i) { return "t" + i + "-5"; })); var quantizeFPR = d3.scale.quantize() .domain([0, 0.55]) .range(d3.range(5).map(function(i) { return "u" + i + "-5"; })); var projection = d3.geo.mercator() .scale(200) .translate([width / 2, height / 2]); var path = d3.geo.path()
.projection(projection); var map = d3.select("body").append("svg") .attr("width", width) .attr("height", height); queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "genderinequality2013.csv", function(d) { rateById.set(d["Country Code"], +d["Gender Inequality 2013"]); }) .await(ready); function ready(error, countries, genderinequality2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeGII(rateById.get(d.id)); }) .attr("id", function(d) {return d.id; }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } function updateDataGII() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "genderinequality2013.csv", function(d) { rateById.set(d["Country Code"], +d["Gender Inequality 2013"]); }) .await(ready); function ready(error, countries, genderinequality2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeGII(rateById.get(d.id)); }) .attr("d", path);
map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; function updateDataMMR() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "maternalmortality2013.csv", function(d) { rateById.set(d["Country Code"], +d.maternalMortality); }) .await(ready); function ready(error, countries, maternalmortality2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeMMR(rateById.get(d.id)); }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; function updateDataABR() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "adolescentbirthrate2013.csv", function(d) { rateById.set(d["Country Code"], +d.adolescentBirths); }) .await(ready); function ready(error, countries, adolescentbirthrate2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features)
.enter().append("path") .attr("class", function(d) { return quantizeABR(rateById.get(d.id)); }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; function updateDataFLP() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "femalelaborparticipation2013.csv", function(d) { rateById.set(d["Country Code"], +d.femaleLaborPar); }) .await(ready); function ready(error, countries, femalelaborparticipation2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeFLP(rateById.get(d.id)); }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; function updateDataFSE() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "femalese2013.csv", function(d) { rateById.set(d["Country Code"], +d.femaleSE); }) .await(ready); function ready(error, countries, femalese2013) { if (error) throw error; map.append("g")
.attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeFSE(rateById.get(d.id)); }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; function updateDataFPR() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "femalepr2013.csv", function(d) { rateById.set(d["Country Code"], +d.femalePR); }) .await(ready); function ready(error, countries, femalepr2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeFPR(rateById.get(d.id)); }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; var margin = {top: 50, right: 40, bottom: 40, left: 60}, width = 1250 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var colorGII = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072",
"#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var colorMMR = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var colorABR = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var colorFLP = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var colorFSE = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var colorFPR = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var legendColor = d3.scale.ordinal() .range(["#8dd3c7", "#fdb462", "#bebada", "#fb8072", "#80b1d3"]); var x = d3.scale.ordinal() .rangeRoundBands([0, width], .25); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y)
.orient("left") .ticks(10); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv("barchartgii.csv", function(error, data) { if (error) throw error; d3.csv("barchartlegend.csv", function(error, datalegend) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, d3.max(data, function(d) { return d.gii; })]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end"); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.gii); }) .attr("height", function(d) { return height - y(d.gii); }) .style("fill", function(d) { return colorGII(d.region); }); var legend = svg.selectAll(".legend") .data(datalegend) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", function(d) {return legendColor(d.name)});
legend.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function (d) { return d.name}); }) }); function updateBarChartGII () { d3.csv("barchartgii.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, d3.max(data, function(d) { return d.gii; })]); svg.selectAll(".bar").remove(); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.gii); }) .attr("height", function(d) { return height - y(d.gii); }) .style("fill", function(d) { return colorGII(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); //Update Y axis svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); } function updateBarChartMMR () { d3.csv("barchartmmr2.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; }));
y.domain([0, 750]); svg.selectAll(".bar").remove(); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.mmr); }) .attr("height", function(d) { return height - y(d.mmr); }) .style("fill", function(d) { return colorMMR(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); } function updateBarChartABR () { d3.csv("barchartabr.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, 150]); svg.selectAll(".bar").remove(); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); })
.attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.abr); }) .attr("height", function(d) { return height - y(d.abr); }) .style("fill", function(d) { return colorABR(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); } function updateBarChartFLP () { d3.csv("barchartlaborpar.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, 1]); svg.selectAll(".bar").remove(); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.laborpar); }) .attr("height", function(d) { return height - y(d.laborpar); }) .style("fill", function(d) { return colorFLP(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); //Update Y axis svg.select(".y.axis") .transition() .duration(1000) .call(yAxis);
}); } function updateBarChartFSE () { d3.csv("barchartse.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, d3.max(data, function(d) { return d.sefemale; })]); svg.selectAll(".bar").remove(); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.sefemale); }) .attr("height", function(d) { return height - y(d.sefemale); }) .style("fill", function(d) { return colorFLP(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); //Update Y axis svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); } function updateBarChartFPR () { d3.csv("barchartpr.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, 0.5]); svg.selectAll(".bar").remove();
svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.pr); }) .attr("height", function(d) { return height - y(d.pr); }) .style("fill", function(d) { return colorFPR(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); //Update Y axis svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); } </script> </body>

More Related Content

KEY
Future of Web Apps: Sass
byHampton Catlin
 
TXT
thiết kế website bằng blogspot
byLàm seo blogspot miễn phí
 
PDF
Algunas razones por las que CSS3 lo peta
bybetabeers
 
TXT
Template ku
bytworonggo
 
PDF
ANOUS CITIES
byBruno Zaro
 
PDF
Agile kontrakter mar 2016 café-møde BestBrains
byRikke Veng Petersen
 
PDF
3
byTone Margrete Wevang
 
PDF
Thomas Phinney, “Fonts. Everything is Changing. Again.”
byWebVisions
 
Future of Web Apps: Sass
byHampton Catlin
 
thiết kế website bằng blogspot
byLàm seo blogspot miễn phí
 
Algunas razones por las que CSS3 lo peta
bybetabeers
 
Template ku
bytworonggo
 
ANOUS CITIES
byBruno Zaro
 
Agile kontrakter mar 2016 café-møde BestBrains
byRikke Veng Petersen
 
3
byTone Margrete Wevang
 
Thomas Phinney, “Fonts. Everything is Changing. Again.”
byWebVisions
 

Featured

PDF
2024 Trend Updates: What Really Works In SEO & Content Marketing
bySearch Engine Journal
 
PDF
Storytelling For The Web: Integrate Storytelling in your Design Process
byChiara Aliotta
 
PDF
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
byOECD Directorate for Financial and Enterprise Affairs
 
PDF
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
bySocialHRCamp
 
PDF
2024 State of Marketing Report – by Hubspot
byMarius Sescu
 
PDF
Everything You Need To Know About ChatGPT
byExpeed Software
 
PDF
Product Design Trends in 2024 | Teenage Engineerings
byPixeldarts
 
PDF
How Race, Age and Gender Shape Attitudes Towards Mental Health
byThinkNow
 
PDF
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
bymarketingartwork
 
PDF
Skeleton Culture Code
bySkeleton Technologies
 
PDF
PEPSICO Presentation to CAGNY Conference Feb 2024
byNeil Kimberley
 
PDF
Content Methodology: A Best Practices Report (Webinar)
bycontently
 
PPTX
How to Prepare For a Successful Job Search for 2024
byAlbert Qian
 
PDF
Social Media Marketing Trends 2024 // The Global Indie Insights
byKurio // The Social Media Age(ncy)
 
PDF
Trends In Paid Search: Navigating The Digital Landscape In 2024
bySearch Engine Journal
 
PDF
5 Public speaking tips from TED - Visualized summary
bySpeakerHub
 
PDF
ChatGPT and the Future of Work - Clark Boyd
byClark Boyd
 
PDF
Getting into the tech field. what next
byTessa Mero
 
PDF
Google's Just Not That Into You: Understanding Core Updates & Search Intent
byLily Ray
 
PDF
How to have difficult conversations
byRajiv Jayarajah, MAppComm, ACC
 
2024 Trend Updates: What Really Works In SEO & Content Marketing
bySearch Engine Journal
 
Storytelling For The Web: Integrate Storytelling in your Design Process
byChiara Aliotta
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
byOECD Directorate for Financial and Enterprise Affairs
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
bySocialHRCamp
 
2024 State of Marketing Report – by Hubspot
byMarius Sescu
 
Everything You Need To Know About ChatGPT
byExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
byPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
byThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
bymarketingartwork
 
Skeleton Culture Code
bySkeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
byNeil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
bycontently
 
How to Prepare For a Successful Job Search for 2024
byAlbert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
byKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
bySearch Engine Journal
 
5 Public speaking tips from TED - Visualized summary
bySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
byClark Boyd
 
Getting into the tech field. what next
byTessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
byLily Ray
 
How to have difficult conversations
byRajiv Jayarajah, MAppComm, ACC
 

Data Visualization Project Code

  • 1.
    <!DOCTYPE html> <meta charset="utf-8"> <head> <styletype = "text/css"> .header { height:100px; background:#FFF; width:1250px; margin:0px auto; text-align: center; padding-top: 50px; font-size:50px; font-family: sans-serif; font-weight: bold; } .decoration { height: 30px; background: #02818a; opacity: .9; width: 1250px; } #button1 { display: inline-block; } #button2 { display: inline-block; } #button3 { display: inline-block; } .space2 { height: 20px; } .space3 { height: 20px; background-color: gray; } .countries { fill: none; } .country { fill: none; stroke: #989898; stroke-linejoin: round; }
  • 2.
    .q0-5 { fill:rgb(252,187,161);} .q1-5 { fill:rgb(252,146,114); } .q2-5 { fill:rgb(251,106,74); } .q3-5 { fill:rgb(222,45,38); } .q4-5 { fill:rgb(165,15,21); } .q0-5:hover { opacity: 0.3; } .q1-5:hover { opacity: 0.3; } .q2-5:hover { opacity: 0.3; } .q3-5:hover { opacity: 0.3; } .q4-5:hover { opacity: 0.3; } .p0-8 { fill:rgb(253,224,221); } .p1-8 { fill:rgb(252,197,192); } .p2-8 { fill:rgb(250,159,181); } .p3-8 { fill:rgb(247,104,161); } .p4-8 { fill:rgb(221,52,151); } .p5-8 { fill:rgb(174,1,126); } .p6-8 { fill:rgb(122,1,119); } .p7-8 { fill:rgb(73,0,106); } .p0-8:hover { opacity: 0.3; } .p1-8:hover { opacity: 0.3; } .p2-8:hover { opacity: 0.3; } .p3-8:hover { opacity: 0.3; } .p4-8:hover { opacity: 0.3;
  • 3.
    } .p5-8:hover { opacity: 0.3; } .p6-8:hover{ opacity: 0.3; } .p7-8:hover { opacity: 0.3; } .r0-8 { fill:rgb(237,248,177); } .r1-8 { fill:rgb(199,233,180); } .r2-8 { fill:rgb(127,205,187); } .r3-8 { fill:rgb(65,182,196); } .r4-8 { fill:rgb(29,145,192); } .r5-8 { fill:rgb(34,94,168); } .r6-8 { fill:rgb(37,52,148); } .r7-8 { fill:rgb(8,29,88); } .r0-8:hover { opacity: 0.3; } .r1-8:hover { opacity: 0.3; } .r2-8:hover { opacity: 0.3; } .r3-8:hover { opacity: 0.3; } .r4-8:hover { opacity: 0.3; } .r5-8:hover { opacity: 0.3; } .r6-8:hover { opacity: 0.3; } .r7-8:hover { opacity: 0.3; }
  • 4.
    .s0-5 { fill:rgb(208,209,230);} .s1-5 { fill:rgb(166,189,219); } .s2-5 { fill:rgb(103,169,207); } .s3-5 { fill:rgb(28,144,153); } .s4-5 { fill:rgb(1,108,89); } .s0-5:hover { opacity: 0.3; } .s1-5:hover { opacity: 0.3; } .s2-5:hover { opacity: 0.3; } .s3-5:hover { opacity: 0.3; } .s4-5:hover { opacity: 0.3; } .t0-5 { fill:rgb(217,240,163); } .t1-5 { fill:rgb(173,221,142); } .t2-5 { fill:rgb(120,198,121); } .t3-5 { fill:rgb(49,163,84); } .t4-5 { fill:rgb(0,104,55); } .t0-5:hover { opacity: 0.3; } .t1-5:hover { opacity: 0.3; } .t2-5:hover { opacity: 0.3; } .t3-5:hover { opacity: 0.3; } .t4-5:hover { opacity: 0.3; } .u0-5 { fill:rgb(198,219,239); }
  • 5.
    .u1-5 { fill:rgb(158,202,225);} .u2-5 { fill:rgb(107,174,214); } .u3-5 { fill:rgb(49,130,189); } .u4-5 { fill:rgb(8,81,156); } .u0-5:hover { opacity: 0.3; } .u1-5:hover { opacity: 0.3; } .u2-5:hover { opacity: 0.3; } .u3-5:hover { opacity: 0.3; } .u4-5:hover { opacity: 0.3; } #tooltip { position: absolute; width: 200px; height: auto; padding: 10px; background-color: white; border-radius: 10px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); pointer-events: none; } #tooltip.hidden { display: none; } #tooltip p { margin: 0; font-family: sans-serif; font-size: 16px; line-height: 20px; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }
  • 6.
    .bar:hover { fill: brown; } .axis{ font: 9px sans-serif; } </style> </head> <body> <div class="header">Visual Analytics Project: Gender Equality</div> <div class="space1"></div> <div class="decoration"></div> <div class="space2"></div> <div style="text-align:center;"> <div id="button1"> <input name="updateButton" type="button" value="Gender Inequality Index" onclick="updateDataGII(); updateBarChartGII();" /> </div> <div id="button2"> <input name="updateButton" type="button" value="Maternal Mortality" onclick="updateDataMMR(); updateBarChartMMR();" /> </div> <div id="button3"> <input name="updateButton" type="button" value="Adolescent Birth Rate" onclick="updateDataABR(); updateBarChartABR();" /> </div> <div id="button4"> <input name="updateButton" type="button" value="Female Labor Participation Rate" onclick="updateDataFLP(); updateBarChartFLP();" /> </div> <div id="button5"> <input name="updateButton" type="button" value="Secondary Education" onclick="updateDataFSE(); updateBarChartFSE();" /> </div> <div id="button6"> <input name="updateButton"
  • 7.
    type="button" value="Parlimentary Representation" onclick="updateDataFPR(); updateBarChartFPR();"/> </div> </div> <div class="space2"></div> <div id="tooltip" class="hidden"></div> <div class="space3"></div> <script src="d3.js"></script> <script src="queue.js"></script> <script src="topojson.js"></script> <script src="jquery-1.11.3.min.js"></script> <script> var width = 1250, height = 600; var rateById = d3.map(); var quantizeGII = d3.scale.quantize() .domain([0, 1]) .range(d3.range(5).map(function(i) { return "q" + i + "-5"; })); var quantizeMMR = d3.scale.quantize() .domain([0, 1000]) .range(d3.range(8).map(function(i) { return "p" + i + "-8"; })); var quantizeABR = d3.scale.quantize() .domain([0, 205]) .range(d3.range(8).map(function(i) { return "r" + i + "-8"; })); var quantizeFLP = d3.scale.quantize() .domain([0, 1]) .range(d3.range(5).map(function(i) { return "s" + i + "-5"; })); var quantizeFSE = d3.scale.quantize() .domain([0, 1]) .range(d3.range(5).map(function(i) { return "t" + i + "-5"; })); var quantizeFPR = d3.scale.quantize() .domain([0, 0.55]) .range(d3.range(5).map(function(i) { return "u" + i + "-5"; })); var projection = d3.geo.mercator() .scale(200) .translate([width / 2, height / 2]); var path = d3.geo.path()
  • 8.
    .projection(projection); var map =d3.select("body").append("svg") .attr("width", width) .attr("height", height); queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "genderinequality2013.csv", function(d) { rateById.set(d["Country Code"], +d["Gender Inequality 2013"]); }) .await(ready); function ready(error, countries, genderinequality2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeGII(rateById.get(d.id)); }) .attr("id", function(d) {return d.id; }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } function updateDataGII() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "genderinequality2013.csv", function(d) { rateById.set(d["Country Code"], +d["Gender Inequality 2013"]); }) .await(ready); function ready(error, countries, genderinequality2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeGII(rateById.get(d.id)); }) .attr("d", path);
  • 9.
    map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a,b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; function updateDataMMR() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "maternalmortality2013.csv", function(d) { rateById.set(d["Country Code"], +d.maternalMortality); }) .await(ready); function ready(error, countries, maternalmortality2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeMMR(rateById.get(d.id)); }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; function updateDataABR() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "adolescentbirthrate2013.csv", function(d) { rateById.set(d["Country Code"], +d.adolescentBirths); }) .await(ready); function ready(error, countries, adolescentbirthrate2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features)
  • 10.
    .enter().append("path") .attr("class", function(d) {return quantizeABR(rateById.get(d.id)); }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; function updateDataFLP() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "femalelaborparticipation2013.csv", function(d) { rateById.set(d["Country Code"], +d.femaleLaborPar); }) .await(ready); function ready(error, countries, femalelaborparticipation2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeFLP(rateById.get(d.id)); }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; function updateDataFSE() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "femalese2013.csv", function(d) { rateById.set(d["Country Code"], +d.femaleSE); }) .await(ready); function ready(error, countries, femalese2013) { if (error) throw error; map.append("g")
  • 11.
    .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class",function(d) { return quantizeFSE(rateById.get(d.id)); }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; function updateDataFPR() { queue() .defer(d3.json, "countries.topo.json") .defer(d3.csv, "femalepr2013.csv", function(d) { rateById.set(d["Country Code"], +d.femalePR); }) .await(ready); function ready(error, countries, femalepr2013) { if (error) throw error; map.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .enter().append("path") .attr("class", function(d) { return quantizeFPR(rateById.get(d.id)); }) .attr("d", path); map.append("path") .datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !== b["Country Code"]; })) .attr("class", "country") .attr("d", path); } }; var margin = {top: 50, right: 40, bottom: 40, left: 60}, width = 1250 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var colorGII = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072",
  • 12.
    "#fb8072", "#fb8072", "#fb8072","#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var colorMMR = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var colorABR = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var colorFLP = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var colorFSE = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var colorFPR = d3.scale.ordinal() .range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]); var legendColor = d3.scale.ordinal() .range(["#8dd3c7", "#fdb462", "#bebada", "#fb8072", "#80b1d3"]); var x = d3.scale.ordinal() .rangeRoundBands([0, width], .25); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y)
  • 13.
    .orient("left") .ticks(10); var svg =d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv("barchartgii.csv", function(error, data) { if (error) throw error; d3.csv("barchartlegend.csv", function(error, datalegend) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, d3.max(data, function(d) { return d.gii; })]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end"); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.gii); }) .attr("height", function(d) { return height - y(d.gii); }) .style("fill", function(d) { return colorGII(d.region); }); var legend = svg.selectAll(".legend") .data(datalegend) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", function(d) {return legendColor(d.name)});
  • 14.
    legend.append("text") .attr("x", width -24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function (d) { return d.name}); }) }); function updateBarChartGII () { d3.csv("barchartgii.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, d3.max(data, function(d) { return d.gii; })]); svg.selectAll(".bar").remove(); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.gii); }) .attr("height", function(d) { return height - y(d.gii); }) .style("fill", function(d) { return colorGII(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); //Update Y axis svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); } function updateBarChartMMR () { d3.csv("barchartmmr2.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; }));
  • 15.
    y.domain([0, 750]); svg.selectAll(".bar").remove(); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d){ return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.mmr); }) .attr("height", function(d) { return height - y(d.mmr); }) .style("fill", function(d) { return colorMMR(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); } function updateBarChartABR () { d3.csv("barchartabr.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, 150]); svg.selectAll(".bar").remove(); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); })
  • 16.
    .attr("width", x.rangeBand()) .attr("y", function(d){ return y(d.abr); }) .attr("height", function(d) { return height - y(d.abr); }) .style("fill", function(d) { return colorABR(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); } function updateBarChartFLP () { d3.csv("barchartlaborpar.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, 1]); svg.selectAll(".bar").remove(); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.laborpar); }) .attr("height", function(d) { return height - y(d.laborpar); }) .style("fill", function(d) { return colorFLP(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); //Update Y axis svg.select(".y.axis") .transition() .duration(1000) .call(yAxis);
  • 17.
    }); } function updateBarChartFSE (){ d3.csv("barchartse.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, d3.max(data, function(d) { return d.sefemale; })]); svg.selectAll(".bar").remove(); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) { return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.sefemale); }) .attr("height", function(d) { return height - y(d.sefemale); }) .style("fill", function(d) { return colorFLP(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); //Update Y axis svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); } function updateBarChartFPR () { d3.csv("barchartpr.csv", function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.region; })); y.domain([0, 0.5]); svg.selectAll(".bar").remove();
  • 18.
    svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class","bar") .attr("x", function(d) {return x(d.region); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.pr); }) .attr("height", function(d) { return height - y(d.pr); }) .style("fill", function(d) { return colorFPR(d.region); }); svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); //Update Y axis svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); } </script> </body>