Skip to content

Instantly share code, notes, and snippets.

@gherka

gherka/.block

Last active January 8, 2019 17:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gherka/bc9ec7b0178a744fe75ebd7b50153312 to your computer and use it in GitHub Desktop.
Save gherka/bc9ec7b0178a744fe75ebd7b50153312 to your computer and use it in GitHub Desktop.
Download ZIP
Linked Brushing between two charts
Raw
.block
license: mit
Raw
data.csv
Country A B C
Scotland 2 3 2
Croatia 1 7 4
Norway 4 5 10
France 3 4 8
Raw
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) {
var hover_value = this.__data__.Country;
var hover_elems = document.querySelectorAll(`[class*="${hover_value}"]`);
for (let item of hover_elems) {
item.setAttribute('fill', 'hotpink');}
})
.on("mouseout", function(d) {
var hover_value = this.__data__.Country;
var hovered = document.querySelectorAll(`[class*="${hover_value}"]`);
for (let item of hovered) {
item.setAttribute('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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment