Created
October 19, 2015 15:54
-
-
Save lmelgar/086115f650545013a915 to your computer and use it in GitHub Desktop.
Scatter Homework
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- Modified example from enjalot: http://bl.ocks.org/enjalot/1429426 --> | |
| <html> | |
| <head> | |
| <title>Bar Transition Example</title> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <style type="text/css"> | |
| @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); | |
| body { | |
| font-family: "Open Sans", sans-serif; | |
| font-weight: 300; | |
| padding: 50px; | |
| font-size: 12pt; | |
| } | |
| button { | |
| margin: 5px; | |
| font-size: 15pt; | |
| padding: 3px; | |
| cursor: pointer; | |
| } | |
| input { | |
| margin: 5px; | |
| font-size: 15pt; | |
| padding: 3px; | |
| } | |
| p { | |
| width: 500px; | |
| } | |
| .data1 { | |
| width: 200px; | |
| position: absolute; | |
| left: 600px; | |
| top: 300px; | |
| } | |
| .data2 { | |
| width: 200px; | |
| position: absolute; | |
| left: 600px; | |
| top: 450px; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-size: 12px; | |
| } | |
| .selected { | |
| background-color: #B6E3CB; | |
| } | |
| .unfocused { | |
| opacity: 0.5; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| z-index: 10; | |
| } | |
| .tooltip p { | |
| width: initial; | |
| font-family: "Open Sans", sans-serif; | |
| line-height: 1.4; | |
| color: black; | |
| font-size: 13px; | |
| background-color: rgba(255,255,255,0.8); | |
| border: rgba(230,230,230,1) 1px solid; | |
| padding: 5px 7px 5px 7px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>Homework for Fake Scatter Update</h2> | |
| <p>Make this fake data work with the enter/update/exit pattern as scatterplots. | |
| <div id="buttons"> | |
| <button id="data1">Set Data to data 1</button> | |
| <button id="data2">Set Data to data 2</button> | |
| </div> | |
| <div id="chart"> | |
| </div> | |
| <script type="text/javascript"> | |
| var data1 = [ | |
| {country: "Belgium", x: 5, y: 24, region: "Europe"}, // in data set 2 | |
| {country: "USA", x: 20, y: 43, region: "Americas"}, // in data set 2 | |
| {country: "China", x: 55, y: 24, region: "Asia"}, // in data set 2 | |
| {country: "Russia", x: 15, y: 30, region: "Asia"}, | |
| {country: "France", x: 60, y: 43, region: "Europe"}, // in data set 2 | |
| {country: "Chile", x: 89, y: 34, region: "Americas"} | |
| ]; | |
| var data2 = [ | |
| {country: "Belgium", x: 5, y: 24, region: "Europe"}, | |
| {country: "USA", x: 20, y: 43, region: "Americas"}, | |
| {country: "Spain", x: 35, y: 24, region: "Europe"}, | |
| {country: "China", x: 55, y: 24, region: "Asia"}, | |
| {country: "UK", x: 90, y: 10, region: "Europe"}, | |
| {country: "Brazil", x: 40, y: 20, region: "Americas"}, | |
| {country: "France", x: 60, y: 43, region: "Europe"}, | |
| {country: "Canada", x: 39, y: 66, region: "Americas"}, | |
| {country: "Argentina", x: 99, y: 30, region: "Americas"} | |
| ]; | |
| var width = 500; | |
| var height = 500; | |
| var margin = {top: 50, right: 10, bottom: 50, left: 50}; | |
| var dotRadius = 6; | |
| var xScale = d3.scale.linear() | |
| .range([margin.left, width - margin.right - margin.left]); | |
| var yScale = d3.scale.linear() | |
| .range([height - margin.bottom, margin.top]); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(8); // fix this to a good number of ticks for your scale later. | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(8); | |
| var tooltip = d3.select("body") | |
| .append("div") | |
| .attr("class", "tooltip"); | |
| //setup the svg | |
| var vis = d3.select("#chart").append("svg"); | |
| var svg = vis | |
| .attr("width", width) | |
| .attr("height", height); // adding some random padding | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (height - margin.bottom) + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (margin.left) + ",0)") | |
| .call(yAxis); | |
| //setup our ui buttons: | |
| d3.select("#data1") | |
| .on("click", function(d,i) { | |
| redraw(data1); | |
| var thisButton = d3.select(this); | |
| d3.selectAll("button").classed("selected", false); | |
| thisButton.classed("selected", true); | |
| }); | |
| d3.select("#data2") | |
| .on("click", function(d,i) { | |
| redraw(data2) | |
| var thisButton = d3.select(this); | |
| d3.selectAll("button").classed("selected", false); | |
| thisButton.classed("selected", true); | |
| }); | |
| //make the dots | |
| redraw(data1); | |
| //TODO: make the button for data1 look selected when the page loads. | |
| // This function is used to draw and update the data. It takes different data each time. | |
| function redraw(data) { | |
| xScale.domain([ | |
| d3.min(data, function(d) { | |
| return +d.x; | |
| }) -3, | |
| d3.max(data, function(d) { | |
| return +d.x; | |
| }) +3 | |
| ]); | |
| yScale.domain([ | |
| d3.min(data, function(d) { | |
| return +d.y; | |
| }) -3, | |
| d3.max(data, function(d) { | |
| return +d.y; | |
| }) +3 | |
| ]); | |
| var circles = svg.selectAll("circle") | |
| .data(data, function(d) { return d.country }); | |
| circles | |
| .enter() | |
| .append("circle") | |
| /*.attr("cx", function (d){ | |
| return xScale(+d.x); | |
| }) | |
| .attr("cy", function (d){ | |
| return yScale(+d.y); | |
| })*/ | |
| .attr("class", "dots") | |
| .attr("fill", function(d) { | |
| if(d.region === "Europe") { | |
| return "#E3B6CE"; | |
| } | |
| if(d.region === "Asia") { | |
| return "#E3E2B6"; | |
| } | |
| else { | |
| return "#B6B7E3"; | |
| } | |
| }); | |
| circles | |
| .transition() | |
| .duration(1000) | |
| .ease("linear") | |
| .attr("cx", function(d) { | |
| return xScale(+d.x); | |
| // return the value to use for your x scale here | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(+d.y); | |
| }) | |
| .attr("r", function() { | |
| return dotRadius; | |
| }); | |
| circles | |
| .exit() | |
| .transition() | |
| .duration(700) | |
| .remove(); | |
| svg.select(".x.axis") | |
| .transition() | |
| .duration(1000) | |
| .call(xAxis); | |
| // Update Y Axis | |
| svg.select(".y.axis") | |
| .transition() | |
| .duration(1000) | |
| .call(yAxis); | |
| //TODO: Fill this in with scatter plot enter/update/exit stuff including transitions. | |
| // Include axes that transition. | |
| d3.selectAll("circle") | |
| .on("mouseover", mouseoverFunc) | |
| .on("mouseout", mouseoutFunc) | |
| .on("mousemove", mousemoveFunc); | |
| function mouseoverFunc(d) { | |
| // line styling: | |
| // this is the g element. select it, then the line inside it! | |
| //console.log(d, this); | |
| d3.selectAll("circle").classed("unfocused", true); | |
| // now undo the unfocus on the current line and set to focused. | |
| d3.select(this).classed("unfocused", false).classed("focused", true); | |
| tooltip | |
| .style("display", null) // this removes the display none setting from it | |
| .html("<p><b>" + d.country + "</b></br>" + d.region + "</p>"); | |
| } | |
| function mouseoutFunc() { | |
| // this removes special classes for focusing from all lines. Back to default. | |
| d3.selectAll("circle").classed("unfocused", false).classed("focused", false); | |
| tooltip.style("display", "none"); // this sets it to invisible! | |
| } | |
| function mousemoveFunc(d) { | |
| //console.log("events", window.event, d3.event); | |
| tooltip | |
| .style("top", (d3.event.pageY - 10) + "px" ) | |
| .style("left", (d3.event.pageX + 10) + "px"); | |
| } | |
| }; // end of draw function | |
| d3.select("button#data1").classed("selected", true); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment