fabiokandrade · July 18, 2019 00:12
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <style>
        body {
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        svg {
            font: 10px sans-serif;
        }

        .country {
            fill: none;
            stroke: red;
            stroke-width: 2px;
        }

        .Portugal {
            fill: none;
            stroke: blue;
            stroke-width: 2px;
        }



        .area {
            fill: blue;
            stroke: none;

        }

        .areaCountry {
            fill: red;
            stroke: none;

        }

        .difference {
            stroke: white;
            stroke-width: 2px;
        }

        #countrySelectorContainer {
            margin: 20px
        }
    </style>
 </head>

 <body>
    <div id="countrySelectorContainer">
        <select name="country" id="countrySelector">

        </select>

    </div>

    <script>

        //Margin Convention     
        var margin = { top: 20, right: 30, bottom: 20, left: 100 },
            width = 900 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        //Defining the range for the years scale     
        var xScale = d3.scaleLinear().range([0, width]);

        //Defining the range for the linear scaling  
        var yScale = d3.scaleLinear().range([height, 0]);



        ////Area generator   
        var area = (source, limit) => d3.area()
            .x(d => xScale(d.year))
            .y0(d => yScale(d[source]))
            .y1(d => yScale(d[source] * limit))
            .defined(d => d[source]!=="")
        



        //Area generator   
        var linePortugal = d3.line()
            .x(d => xScale(d.year))
            .y(d => yScale(d.Portugal))
            .defined(d => d.Portugal!=="")

        var lineCountry = d3.line()
            .x(d => xScale(d.year))
            .y(d => yScale(d.country))
            .defined(d => d.country!=="")

        var years = d3.range(2000, 2016)

        var defaultCountry = "Spain"


        
        d3.csv('World_Homicides.csv').then(csvData => {



            const draw = (country) => {

                d3.select("svg").remove();

                //Container  
                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 + ")");



                var countryData = csvData.filter(o => o["Country Name"] == country)[0]
                var PortugalData = csvData.filter(o => o["Country Name"] == "Portugal")[0]


                var data = years.map(year => {
                    return {
                        year,
                        country: countryData[`${year}`]=="" ? "" : +countryData[`${year}`],
                        Portugal: +PortugalData[`${year}`],
                    }
                })

                console.log(data)
                //Defining the domain for the linear scaling using D3 extent which return the min and max
                xScale.domain(d3.extent(data, d => d.year));

                yScale.domain([0, d3.max(data.map(d => d.Portugal).concat(data.map(d => d.country))) * 1.1])

                var mean = d => d3.mean([d.Portugal, d.country])
                var percFormater = d3.format('.0%')

                svg.selectAll("#PortugalBand11.area").data([data]).enter()
                    .append("path")
                    .attr("class", "area")
                    .attr("d", d => area('Portugal', 1.1)(d))
                    .style("fill-opacity", 0.1)

                svg.selectAll("#countryBand11.area").data([data]).enter()
                    .append("path")
                    .attr("class", "areaCountry")
                    .attr("d", d => area('country', 1.1)(d))
                    .style("fill-opacity", 0.1)

                svg.selectAll("#PortugalBand09.area").data([data]).enter()
                    .append("path")
                    .attr("class", "area")
                    .attr("d", d => area('Portugal', 0.9)(d))
                    .style("fill-opacity", 0.1)
                svg.selectAll("#countryBand09.area").data([data]).enter()
                    .append("path")
                    .attr("class", "areaCountry")
                    .attr("d", d => area('country', 0.9)(d))
                    .style("fill-opacity", 0.1)



                svg.selectAll(".country").data([data]).enter()
                    .append("path")
                    .attr("class", "country")
                    .attr("d", d => lineCountry(d))


                svg.selectAll(".Portugal").data([data]).enter()
                    .append("path")
                    .attr("class", "Portugal")
                    .attr("d", d => linePortugal(d))




                svg.append("g")
                    .attr("class", "axis--x")
                    .attr("transform", "translate(0," + height + ")")
                    .call(d3.axisBottom(xScale)
                        .ticks(years.length))

                svg.append("g")
                    .attr("class", "axis--y")
                    .call(d3.axisLeft(yScale).ticks(4));


                //Title
                d3.select('svg')
                    .append("g")
                    .attr("id", "title")
                    .attr("transform", "translate(" + margin.left * 2.5 + "," + margin.top + ")")
                    .append('text')
                    .attr("text-anchor", "middle")
                    .attr("color", "black")
                    .style("font-size", "16px")
                    .text(`Homicides per 100,000 people:`)

                d3.select('#title')
                    .append('text')
                    .attr("transform", "translate(" + 112 + "," + 0 + ")")
                    .attr("text-anchor", "left")
                    .attr("color", "black")
                    .style("font-size", "16px")
                    .text(`Portugal`)
                    .style('stroke', 'blue')

                d3.select('#title')
                    .append('text')
                    .attr("transform", "translate(" + 177 + "," + 0 + ")")
                    .attr("text-anchor", "left")
                    .attr("color", "black")
                    .style("font-size", "16px")
                    .text(` x `)
                d3.select('#title')
                    .append('text')
                    .attr("transform", "translate(" + 192 + "," + 0 + ")")
                    .attr("text-anchor", "left")
                    .attr("color", "black")
                    .style("font-size", "16px")
                    .text(`${country}`)
                    .style('stroke', 'red')

            }
            draw(defaultCountry)
            var countries = csvData.map(o => o["Country Name"]).sort()
            d3.select('#countrySelector').selectAll("option").data(countries).enter()
                .append("option")
                .text(d => d)
                .attr("value", d => d)
                .property("selected", d => d === defaultCountry)


            d3.select('#countrySelector').on('change', function () {
                const country = d3.select(this).property('value');
                draw(country);
            });



        });

    </script>

 </body>
diff --git a/World_Homicides.csv b/World_Homicides.csv
	<!DOCTYPE html>

	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<style>
	body {
	margin: 0;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	}

	svg {
	font: 10px sans-serif;
	}

	.country {
	fill: none;
	stroke: red;
	stroke-width: 2px;
	}

	.Portugal {
	fill: none;
	stroke: blue;
	stroke-width: 2px;
	}



	.area {
	fill: blue;
	stroke: none;

	}

	.areaCountry {
	fill: red;
	stroke: none;

	}

	.difference {
	stroke: white;
	stroke-width: 2px;
	}

	#countrySelectorContainer {
	margin: 20px
	}
	</style>
	</head>

	<body>
	<div id="countrySelectorContainer">
	<select name="country" id="countrySelector">

	</select>

	</div>

	<script>

	//Margin Convention
	var margin = { top: 20, right: 30, bottom: 20, left: 100 },
	width = 900 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	//Defining the range for the years scale
	var xScale = d3.scaleLinear().range([0, width]);

	//Defining the range for the linear scaling
	var yScale = d3.scaleLinear().range([height, 0]);



	////Area generator
	var area = (source, limit) => d3.area()
	.x(d => xScale(d.year))
	.y0(d => yScale(d[source]))
	.y1(d => yScale(d[source] * limit))
	.defined(d => d[source]!=="")




	//Area generator
	var linePortugal = d3.line()
	.x(d => xScale(d.year))
	.y(d => yScale(d.Portugal))
	.defined(d => d.Portugal!=="")

	var lineCountry = d3.line()
	.x(d => xScale(d.year))
	.y(d => yScale(d.country))
	.defined(d => d.country!=="")

	var years = d3.range(2000, 2016)

	var defaultCountry = "Spain"



	d3.csv('World_Homicides.csv').then(csvData => {



	const draw = (country) => {

	d3.select("svg").remove();

	//Container
	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 + ")");



	var countryData = csvData.filter(o => o["Country Name"] == country)[0]
	var PortugalData = csvData.filter(o => o["Country Name"] == "Portugal")[0]


	var data = years.map(year => {
	return {
	year,
	country: countryData[`${year}`]=="" ? "" : +countryData[`${year}`],
	Portugal: +PortugalData[`${year}`],
	}
	})

	console.log(data)
	//Defining the domain for the linear scaling using D3 extent which return the min and max
	xScale.domain(d3.extent(data, d => d.year));

	yScale.domain([0, d3.max(data.map(d => d.Portugal).concat(data.map(d => d.country))) * 1.1])

	var mean = d => d3.mean([d.Portugal, d.country])
	var percFormater = d3.format('.0%')

	svg.selectAll("#PortugalBand11.area").data([data]).enter()
	.append("path")
	.attr("class", "area")
	.attr("d", d => area('Portugal', 1.1)(d))
	.style("fill-opacity", 0.1)

	svg.selectAll("#countryBand11.area").data([data]).enter()
	.append("path")
	.attr("class", "areaCountry")
	.attr("d", d => area('country', 1.1)(d))
	.style("fill-opacity", 0.1)

	svg.selectAll("#PortugalBand09.area").data([data]).enter()
	.append("path")
	.attr("class", "area")
	.attr("d", d => area('Portugal', 0.9)(d))
	.style("fill-opacity", 0.1)
	svg.selectAll("#countryBand09.area").data([data]).enter()
	.append("path")
	.attr("class", "areaCountry")
	.attr("d", d => area('country', 0.9)(d))
	.style("fill-opacity", 0.1)



	svg.selectAll(".country").data([data]).enter()
	.append("path")
	.attr("class", "country")
	.attr("d", d => lineCountry(d))


	svg.selectAll(".Portugal").data([data]).enter()
	.append("path")
	.attr("class", "Portugal")
	.attr("d", d => linePortugal(d))




	svg.append("g")
	.attr("class", "axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(xScale)
	.ticks(years.length))

	svg.append("g")
	.attr("class", "axis--y")
	.call(d3.axisLeft(yScale).ticks(4));


	//Title
	d3.select('svg')
	.append("g")
	.attr("id", "title")
	.attr("transform", "translate(" + margin.left * 2.5 + "," + margin.top + ")")
	.append('text')
	.attr("text-anchor", "middle")
	.attr("color", "black")
	.style("font-size", "16px")
	.text(`Homicides per 100,000 people:`)

	d3.select('#title')
	.append('text')
	.attr("transform", "translate(" + 112 + "," + 0 + ")")
	.attr("text-anchor", "left")
	.attr("color", "black")
	.style("font-size", "16px")
	.text(`Portugal`)
	.style('stroke', 'blue')

	d3.select('#title')
	.append('text')
	.attr("transform", "translate(" + 177 + "," + 0 + ")")
	.attr("text-anchor", "left")
	.attr("color", "black")
	.style("font-size", "16px")
	.text(` x `)
	d3.select('#title')
	.append('text')
	.attr("transform", "translate(" + 192 + "," + 0 + ")")
	.attr("text-anchor", "left")
	.attr("color", "black")
	.style("font-size", "16px")
	.text(`${country}`)
	.style('stroke', 'red')

	}
	draw(defaultCountry)
	var countries = csvData.map(o => o["Country Name"]).sort()
	d3.select('#countrySelector').selectAll("option").data(countries).enter()
	.append("option")
	.text(d => d)
	.attr("value", d => d)
	.property("selected", d => d === defaultCountry)


	d3.select('#countrySelector').on('change', function () {
	const country = d3.select(this).property('value');
	draw(country);
	});



	});

	</script>

	</body>
No results found