GerardoFurtado/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from gherka's block: Linked Brushing between two charts

  
## data.csv

          
            Country
            A
            B
            C

            
              Scotland
              2
              3
              2

            
              Croatia
              1
              7
              4

            
              Norway
              4
              5
              10

            
              France
              3
              4
              8

## 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;
        }
    </style>
</head>

<body>
    <div id='bar'></div>
    <div id='scatter'></div>
    <script>
        (function barChart() {

            //set inner margins for the svgContainer
            var margin = {
                top: 40,
                right: 50,
                bottom: 30,
                left: 50
            };

            //inner dimensions of the chart area
            var width = 800 - margin.left - margin.right,
                height = 200 - margin.top - margin.bottom;

            //create an svg object into #bar div and make it scale responsively
            var svgContainer = d3.select("#bar").append("svg")
                .attr("preserveAspectRatio", "xMinYMin meet")
                .attr("viewBox", "0 0 800 200")
                .classed("svg-content", true);

            //load sample data
            var f = "data.csv";

            d3.csv(f).then(function(data) {

                //clean the data (it comes in as strings)
                data.forEach(function(d) {
                    d.C = +d.C;
                });

                //Scales and Axis first so that Scale function can be reused;
                var xScale = d3.scaleBand()
                    .range([0, width])
                    .domain(data.map(function(d) {
                        return d.Country;
                    }))
                    .padding(0.1);

                var xAxis = d3.axisBottom()
                    .scale(xScale);

                var yScale = d3.scaleLinear()
                    .range([height, 0])
                    .domain([0, d3.max(data, function(d) {
                        return d.C;
                    })]);

                var yAxis = d3.axisLeft()
                    .scale(yScale);

                //after data is bound using enter.append, you can access it normally

                var enter = svgContainer.selectAll('rect')
                    .data(data)
                    .enter().append('rect')
                    .attr('class', function(d) {
                        return "mycharts_bars_" + d.Country;
                    })
                    .attr('x', function(d) {
                        return xScale(d.Country);
                    })
                    .attr('y', function(d) {
                        return yScale(d.C);
                    })
                    .attr('width', xScale.bandwidth())
                    .attr('height', function(d) {
                        return height - yScale(d.C);
                    })
                    .attr('transform', `translate(${margin.left}, ${margin.top})`)
                    .attr('fill', 'grey')
                    .on("mouseover", function(d) {
                        d3.selectAll("circle, rect").attr("fill", function(e) {
                            return e.Country === d.Country ? "pink" : "grey"
                        })
                    })

                .on("mouseout", function(d) {
                    d3.selectAll("circle, rect").attr("fill", "grey")
                });

                // Draw the axes
                svgContainer.append("g")
                    .attr('transform', `translate(${margin.left}, ${height + margin.top})`)
                    .call(xAxis);

                svgContainer.append("g")
                    .attr('transform', `translate(${margin.left}, ${margin.top})`)
                    .call(yAxis);
            });
        }());
    </script>
    <script>
        (function scatterChart() {

            //set inner margins for the svgContainer
            var margin = {
                top: 40,
                right: 50,
                bottom: 30,
                left: 50
            };

            //inner dimensions of the chart area
            var width = 800 - margin.left - margin.right,
                height = 200 - margin.top - margin.bottom;

            //create svg object
            var svgContainer = d3.select("#scatter").append("svg")
                .attr("preserveAspectRatio", "xMinYMin meet")
                .attr("viewBox", "0 0 800 200")
                .classed("svg-content", true);

            //load sample data
            var f = "data.csv";

            d3.csv(f).then(function(data) {

                data.forEach(function(d) {
                    d.A = +d.A;
                    d.B = +d.B;
                });

                var xValue = data.map(function(d) {
                    return d.A;
                });
                var yValue = data.map(function(d) {
                    return d.B;
                });

                var xScale = d3.scaleLinear()
                    .domain([0, d3.max(xValue)])
                    .range([0, width]);

                var yScale = d3.scaleLinear()
                    .domain([0, d3.max(yValue)])
                    .range([height, 0]);

                svgContainer.selectAll('circle')
                    .data(data)
                    .enter()
                    .append('circle')
                    .attr('class', function(d) {
                        return "mycharts_scatter_" + d.Country;
                    })
                    .attr('transform', `translate(${margin.left}, ${margin.top})`)
                    .attr('cx', function(d) {
                        return xScale(d.A);
                    })
                    .attr('cy', function(d) {
                        return yScale(d.B);
                    })
                    .attr('fill', 'grey')
                    .attr('r', 8);

                // Draw the axes and don't forget to transform everything!
                var xAxis = d3.axisBottom()
                    .scale(xScale);

                var yAxis = d3.axisLeft()
                    .scale(yScale)
                    .ticks(9);

                svgContainer.append("g")
                    .attr('transform', `translate(${margin.left}, ${height + margin.top})`)
                    .call(xAxis);

                svgContainer.append("g")
                    .attr('transform', `translate(${margin.left}, ${margin.top})`)
                    .call(yAxis);
            });
        }());
    </script>


</body>
	<!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;
	}
	</style>
	</head>

	<body>
	<div id='bar'></div>
	<div id='scatter'></div>
	<script>
	(function barChart() {

	//set inner margins for the svgContainer
	var margin = {
	top: 40,
	right: 50,
	bottom: 30,
	left: 50
	};

	//inner dimensions of the chart area
	var width = 800 - margin.left - margin.right,
	height = 200 - margin.top - margin.bottom;

	//create an svg object into #bar div and make it scale responsively
	var svgContainer = d3.select("#bar").append("svg")
	.attr("preserveAspectRatio", "xMinYMin meet")
	.attr("viewBox", "0 0 800 200")
	.classed("svg-content", true);

	//load sample data
	var f = "data.csv";

	d3.csv(f).then(function(data) {

	//clean the data (it comes in as strings)
	data.forEach(function(d) {
	d.C = +d.C;
	});

	//Scales and Axis first so that Scale function can be reused;
	var xScale = d3.scaleBand()
	.range([0, width])
	.domain(data.map(function(d) {
	return d.Country;
	}))
	.padding(0.1);

	var xAxis = d3.axisBottom()
	.scale(xScale);

	var yScale = d3.scaleLinear()
	.range([height, 0])
	.domain([0, d3.max(data, function(d) {
	return d.C;
	})]);

	var yAxis = d3.axisLeft()
	.scale(yScale);

	//after data is bound using enter.append, you can access it normally

	var enter = svgContainer.selectAll('rect')
	.data(data)
	.enter().append('rect')
	.attr('class', function(d) {
	return "mycharts_bars_" + d.Country;
	})
	.attr('x', function(d) {
	return xScale(d.Country);
	})
	.attr('y', function(d) {
	return yScale(d.C);
	})
	.attr('width', xScale.bandwidth())
	.attr('height', function(d) {
	return height - yScale(d.C);
	})
	.attr('transform', `translate(${margin.left}, ${margin.top})`)
	.attr('fill', 'grey')
	.on("mouseover", function(d) {
	d3.selectAll("circle, rect").attr("fill", function(e) {
	return e.Country === d.Country ? "pink" : "grey"
	})
	})

	.on("mouseout", function(d) {
	d3.selectAll("circle, rect").attr("fill", "grey")
	});

	// Draw the axes
	svgContainer.append("g")
	.attr('transform', `translate(${margin.left}, ${height + margin.top})`)
	.call(xAxis);

	svgContainer.append("g")
	.attr('transform', `translate(${margin.left}, ${margin.top})`)
	.call(yAxis);
	});
	}());
	</script>
	<script>
	(function scatterChart() {

	//set inner margins for the svgContainer
	var margin = {
	top: 40,
	right: 50,
	bottom: 30,
	left: 50
	};

	//inner dimensions of the chart area
	var width = 800 - margin.left - margin.right,
	height = 200 - margin.top - margin.bottom;

	//create svg object
	var svgContainer = d3.select("#scatter").append("svg")
	.attr("preserveAspectRatio", "xMinYMin meet")
	.attr("viewBox", "0 0 800 200")
	.classed("svg-content", true);

	//load sample data
	var f = "data.csv";

	d3.csv(f).then(function(data) {

	data.forEach(function(d) {
	d.A = +d.A;
	d.B = +d.B;
	});

	var xValue = data.map(function(d) {
	return d.A;
	});
	var yValue = data.map(function(d) {
	return d.B;
	});

	var xScale = d3.scaleLinear()
	.domain([0, d3.max(xValue)])
	.range([0, width]);

	var yScale = d3.scaleLinear()
	.domain([0, d3.max(yValue)])
	.range([height, 0]);

	svgContainer.selectAll('circle')
	.data(data)
	.enter()
	.append('circle')
	.attr('class', function(d) {
	return "mycharts_scatter_" + d.Country;
	})
	.attr('transform', `translate(${margin.left}, ${margin.top})`)
	.attr('cx', function(d) {
	return xScale(d.A);
	})
	.attr('cy', function(d) {
	return yScale(d.B);
	})
	.attr('fill', 'grey')
	.attr('r', 8);

	// Draw the axes and don't forget to transform everything!
	var xAxis = d3.axisBottom()
	.scale(xScale);

	var yAxis = d3.axisLeft()
	.scale(yScale)
	.ticks(9);

	svgContainer.append("g")
	.attr('transform', `translate(${margin.left}, ${height + margin.top})`)
	.call(xAxis);

	svgContainer.append("g")
	.attr('transform', `translate(${margin.left}, ${margin.top})`)
	.call(yAxis);
	});
	}());
	</script>


	</body>