Linked Brushing between two charts

forked from gherka's block: Linked Brushing between two charts

<!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

.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>

https://d3js.org/d3.v5.min.js