xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } div.tooltip { position: absolute; text-align: center; width: 60px; height: 28px; padding: 2px; font: 12px sans-serif; border: 0px; border-radius: 8px; pointer-events: none;} </style></head><div id="drop1" align=left> <b>Select the predictor variable x:</b></div><div id="drop2" align=left> <b>Select the response variable y:</b></div><body> <script> var margin = {top: 100, right: 80, bottom: 100, left: 80}, width = 480 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x_sca = d3.scaleLinear().range([0, width]), y_sca = d3.scaleLinear().range([height, 0]), x_bar = d3.scaleBand().range([0, width]).padding(0.1), y_bar = d3.scaleLinear().range([height, 0]); var sca = 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 bar = 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 div = d3.select("body").append("div").attr("class", "tooltip") .style("opacity", 0); d3.csv("Facebook.csv", drawData); function drawData(data){ //Scatterplot var features = d3.keys(data[0]) .filter(function(d){ return ((d != "Type") & (d != "Category")); }); var xselection = features[0], yselection = features[0]; x_sca.domain(d3.extent(data, function(d) { return +d[xselection]; })); y_sca.domain(d3.extent(data, function(d) { return +d[yselection]; })); var scakey = function(d) { return d.Type;}, scacolor = d3.scaleOrdinal(d3.schemeCategory10); sca.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x_sca)) .selectAll("text") .style("text-anchor", "start") .attr("dy", "1em") .attr("transform", "rotate(45)" ); sca.append("text") .attr("x", width) .attr("y", height-5) .style("text-anchor", "start") .text("Units") .style("font-size", "12px"); sca.append("g") .attr("class", "y axis") .call(d3.axisLeft(y_sca)); sca.append("text") .attr("dy", "-1em") .style("text-anchor", "end") .text("Units") .style("font-size", "12px"); sca.selectAll("dot") .data(data) .enter() .append("circle") .attr("r", 3.5) .attr("cx", function(d) { return x_sca(+d[xselection]); }) .attr("cy", function(d) { return y_sca(+d[yselection]); }) .style("fill", function(d) { return scacolor(scakey(d)); }); var legend = sca.selectAll(".legend") .data(scacolor.domain().sort()) .enter().append("g") .attr("class", "legend"); legend.append("rect") .attr("x", function(d, i){ return 80 + i * 100; }) .attr("y", -70) .attr("width", 18) .attr("height", 18) .style("fill", scacolor); legend.append("text") .attr("x", function(d, i){ return 70 + i * 100; }) .attr("y", -60) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return "Type: " + d;}) .style("font-size", "12px"); //Bar chart var transdata = d3.nest().key(function(d){ return d.PostWeekday; }) .rollup(function(d){ return d3.mean(d, function(g){ return g.TotalInteractions; }); }) .entries(data); var barcolor = d3.scaleOrdinal(d3.schemeCategory10); x_bar.domain(transdata.map(function(d) { return d.key; })); y_bar.domain([0, d3.max(transdata, function(d) { return d.value; })]); bar.selectAll(".bar") .data(transdata) .enter() .append("rect") .attr("class", "bar") .attr("x", function(d) { return x_bar(d.key); }) .attr("width", x_bar.bandwidth()) .attr("y", function(d) { return y_bar(+d.value); }) .attr("height", function(d) { return height - y_bar(+d.value); }) .attr("fill", function(d,i){ return barcolor(i)}) .attr("id", function(d, i) { return i; }) .on("mouseover", function(d){ d3.select(this).attr("fill", "#ffff00"); div.transition().duration(200).style("opacity", .9); div.html("Average Interactions:" + "<br/>" + d3.format(".2f")(d.value)) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY) + "px"); }) .on("mouseout", function(d){ d3.select(this) .attr("fill", function(d){ return barcolor(this.id);}); div.transition().duration(200).style("opacity", 0); }) bar.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x_bar)) .selectAll("text") .attr("transform", "rotate(45)") .style("text-anchor", "start"); bar.append("g") .attr("class", "y axis") .call(d3.axisLeft(y_bar)); bar.append("text") .attr("dy", "-1em") .style("text-anchor", "end") .text("Units") .style("font-size", "12px"); //Two dropdown menus var xselector = d3.select("#drop1") .append("select") .attr("id", "dropdown") .on("change", function(){ xselection = this.value; x_sca.domain(d3.extent(data, function(d) { return +d[xselection]; })); sca.select("g.x.axis") .transition() .call(d3.axisBottom(x_sca)) .selectAll("text") .style("text-anchor", "start") .attr("dy", "1em") .attr("transform", "rotate(45)" ); sca.selectAll("circle") .data(data) .transition() .attr("cx", function(d) { return x_sca(+d[xselection]); }) }); xselector.selectAll("option") .data(features) .enter() .append("option") .attr("value", function(d){ return d; }) .text(function(d){ return d; }); var yselector = d3.select("#drop2") .append("select") .attr("id", "dropdown") .on("change", function(){ yselection = this.value; y_sca.domain(d3.extent(data, function(d) { return +d[yselection]; })); sca.select("g.y.axis") .transition() .call(d3.axisLeft(y_sca)); sca.selectAll("circle") .data(data) .transition() .attr("cy", function(d) { return y_sca(+d[yselection]); }) }); yselector.selectAll("option") .data(features) .enter() .append("option") .attr("value", function(d){ return d; }) .text(function(d){ return d; }); //Brush selection var brush = d3.brush().extent([[0, 0], [width, height]]) .on("brush", brushed); sca.append("g") .attr("class", "brush") .call(brush); function brushed(){ var chosen = d3.brushSelection(this); var newdata = data.filter(function(d){ return chosen[0][0] <= x_sca(+d[xselection]) && x_sca(+d[xselection]) <= chosen[1][0] && chosen[0][1] <= y_sca(+d[yselection]) && y_sca(+d[yselection]) <= chosen[1][1]; }) if (newdata.length != 0){ transdata = d3.nest().key(function(d){ return d.PostWeekday; }) .rollup(function(d){ return d3.mean(d, function(g){ return g.TotalInteractions; }); }) .entries(newdata); y_bar.domain([0, d3.max(transdata, function(d) { return d.value; })]); bar.select("g.y.axis") .transition() .call(d3.axisLeft(y_bar)); bar.selectAll("rect") .data(transdata) .transition() .attr("y", function(d) { return y_bar(+d.value); }) .attr("height", function(d) { return height - y_bar(+d.value); }) } } } </script></body> https://d3js.org/d3.v4.min.js