death_detail = { const axis_list = ["Nazi Germany", "Italy", "Japan", "Hungary", "Romania", "Bulgaria"] const height = 400 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 70, top: 10, right: 10, bottom: 100 } // const display_data = recorded_data.filter(d => d.Country) // // Find the track information by "trackName", mostly we want the trackId // const song = _.find(spotifySongs, { trackName }) // Go through a chain of process with "spotifyDailyGlobalRanking" dataset var display_data=[] var i if(selectedAlliance == "Axis") { //for axis for(i=0;i d["Country"]===axis_list[i])[0]) } display_data = display_data.sort((a, b) => d3.descending(a[selectedField]=="NA"?0:+a[selectedField], b[selectedField]=="NA"?0:+b[selectedField])) }else{ //for allies display_data = recorded_data for(i=0;i d["Country"]!=axis_list[i]) } display_data = display_data.sort((a, b) => d3.descending(a[selectedField]=="NA"?0:+a[selectedField], b[selectedField]=="NA"?0:+b[selectedField])) } var out_data = [] // const display_data = recorded_data var maxheight = 0 var total_death = 0 for(i=0;i=display_death && display_death+display_data[i][selectedField]>=total_death*LBpercentageSlider/100 && UBpercentageSlider>LBpercentageSlider) { out_data.push(display_data[i]) } display_death+= (display_data[i][selectedField]=="NA")?0:+display_data[i][selectedField] } for(i=0;i d["Country"])) .domain(out_data.map(d => d["Country"])) // .domain(sample.map((s) => s.language)) .range([margin.left, width - margin.right]) .padding(0.1) let xAxis = svg.append('g') .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) // .call(d3.axisBottom(xScale)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-50)"); const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) // Use "maxDailyStreams" instead of calculating from the filtered data to keep the // chart consistent across different songs .domain([0, maxheight*1.3]) svg.append('g') .call(d3.axisLeft(yScale))//.tickFormat(d3.format('.2s'))) .attr('transform', `translate(${margin.left},0)`) const Coloring = d=> (is_axis(d))?"Red":"Blue" svg.append("text") .attr("x", (width / 2)) .attr("y", 15) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text(selectedField + " of " + selectedAlliance); const tooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '10px') .style('float', 'left') .style('font-family', 'monospace') .html(d => `

Country Name: ${d["Country"]}
Total population: ${d["Total population1/1/1939"]}
${selectedField}: ${d[selectedField]}
percentage: ${d[selectedField]/d["Total population1/1/1939"]*100} %

`) // Militarydeaths from all causes: 10034000 // Civilian deaths due tomilitary activity and crimes against humanity: 7250000 // Civilian deaths due towar-related famine and disease: 8500000 // Totaldeaths: 23500000 // Militarywounded: 14685593 // Deaths as % of1939 population: 12.447 svg.call(tooltip) // Make the column chart with "rect", its attributes can be found in the documentation: // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect svg.selectAll('rect') // .data(display_data) .data(out_data) .enter() .append('rect') .attr('x', (d, i) => xScale(d["Country"])) // .attr('x', (d, i) => xAxis(d["Country"])) .attr('y', d => yScale(+d[selectedField])) .attr('height', d => yScale(0) - yScale(+d[selectedField])) .attr('width', xScale.bandwidth()) .attr('fill', d=>Coloring(d)) // .on('click', function (d, i) { // d3.select(this) // // .attr('opacity', 0.5) // // d => `${d.date}: ${Math.round(d.streams)}` // // mutable selectedMonth = d.date // }) .on('mouseover', tooltip.show) // Hide the tooltip when "mouseout" .on('mouseout', tooltip.hide) .append('title') .text(d => `${d["Country"]}: ${d[selectedField]}`) // return percentageSlider //display_data[0] return svg.node() }