Built with blockbuilder.org
Made with data from selfiecity
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style type="text/css"> | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| stroke-width: 2; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: helvetica; | |
| font-size: 11px; | |
| } | |
| circle { | |
| fill: #B2B2B2; | |
| fill-opacity: .5; | |
| } | |
| circle:hover { | |
| -moz-transition: all 0.1s; | |
| -o-transition: all 0.1s | |
| -webkit-transition: all 0.1s; | |
| transition: all 0.1s; | |
| fill: #FFCC00; | |
| } | |
| #tooltip { | |
| position: absolute; | |
| width: 200px; | |
| height: auto; | |
| padding: 10px; | |
| background-color: white; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| pointer-events: none; | |
| } | |
| #tooltip.hidden { | |
| display: none; | |
| } | |
| #tooltip p { | |
| margin: 0; | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| line-height: 20px; | |
| } | |
| p { | |
| font-family: sans-serif; | |
| font-size: 10px; | |
| /*padding: {top: 1000px, right: 0px, bottom: 0px, left: 1000px};*/ | |
| /*font-style: italic;*/ | |
| } | |
| #title { | |
| font-family:helvetica; | |
| font-size: 12px; | |
| /*text-transform: uppercase;*/ | |
| } | |
| .x.label { | |
| font-family: helvetica; | |
| font-size: 10px; | |
| } | |
| .y.label { | |
| font-family: helvetica; | |
| font-size: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p id="info">A visualization using <a href="http://selfiecity.net/">data published by selfiecity</a>.</p> | |
| <p id="click">—Click to update value range—</p><p id="click2">—Click to zoom in on new value range—</p> | |
| <div id="tooltip" class="hidden"> | |
| <p><strong>xy coordinates</strong></p> | |
| <p><span id="value">100</span>%</p> | |
| </div> | |
| <script type="text/javascript"> | |
| var w = 850; | |
| var h = 400; | |
| var padding = 50; | |
| //static dataset | |
| var dataset = [ | |
| [.6, .93], [.6, .92], [.58, .95], [.59, .90], [.60, .91] | |
| ]; | |
| //format tick labels | |
| var xScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) {return d[0];} ) ]) | |
| .range([padding, w - padding * 2]); | |
| var yScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) {return d[1];} ) ]) | |
| .range([h - padding, padding]); | |
| var rScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) {return d[1];} ) ]) | |
| .range([2, 5]); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(5) | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(5) | |
| //create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //create circles | |
| svg.selectAll("circle") | |
| .data(dataset) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d) {return xScale(d[0]);}) | |
| .attr("cy", function(d) {return yScale(d[1]);}) | |
| //r: function(d) {return Math.sqrt(h - d[1]);} | |
| .attr("r", function(d) {return rScale(d[1]);}) | |
| .append("title") | |
| .text(function(d) { | |
| return "xy coordinates: " + d[0] + ", " + d[1]; | |
| }) | |
| //Create SVG element tooltips | |
| .on("mouseover", function(d) { | |
| //Get this bar's x/y values, then augment for the tooltip | |
| var xPosition = parseFloat(d3.select(this).attr("cx")) + xScale.rangeBand() / 2; | |
| var yPosition = parseFloat(d3.select(this).attr("cy")) + 14; | |
| //Create the tooltip label | |
| svg.append("text") | |
| .attr("id", "tooltip") | |
| .attr("x", xPosition) | |
| .attr("y", yPosition) | |
| .attr("text-anchor", "middle") | |
| .attr("font-family", "sans-serif") | |
| .attr("font-weight", "bold") | |
| .attr("font-size", "11px") | |
| .attr("fill", "black") | |
| .text(d); | |
| }) | |
| .on("mouseout", function() { | |
| //Remove the tooltip | |
| d3.select("#tooltip").remove(); | |
| }); | |
| //create X axis | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (h - padding) + ")") | |
| .call(xAxis); | |
| //label X axis | |
| svg.append("text") | |
| .attr("class", "x label") | |
| .attr("text-anchor", "end") | |
| .attr("x", w - 100) | |
| .attr("y", h - 60) | |
| .text("smile rating"); | |
| //create Y axis | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + padding + ",0)") | |
| .call(yAxis); | |
| svg.append("text") | |
| .attr("class", "y label") | |
| .attr("text-anchor", "end") | |
| .attr("y", 60) | |
| .attr("dy", 10) | |
| .attr("x", -50) | |
| .attr("transform", "rotate(-90)") | |
| .text("confidence rating"); | |
| //1. On click, update with new data | |
| d3.select("#click") | |
| .on("click", function() { | |
| //New values for dataset | |
| var numValues = dataset.length; | |
| //Count original length of dataset | |
| var maxRange = Math.random() * 1000; | |
| //Max range of new values | |
| dataset = [ [.45, .51], [.47, .55], [.44, .53], [.45, .53], [.48, .54] | |
| ]; | |
| //Update all circles | |
| svg.selectAll("circle") | |
| .data(dataset) | |
| .transition() | |
| .duration(1000) | |
| .each("start", function () { | |
| d3.select(this) // Selects 'this', the current element | |
| //.transition() -- Will override first transition | |
| //.duration(250) | |
| .attr("fill", "#FFCC00") //Sets fill of 'this' to magenta | |
| .attr("r", 9); //Sets radius of 'this' to 3 | |
| }) | |
| .attr("cx", function(d) { | |
| return xScale(d[0]); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d[1]); | |
| }) | |
| /*.each("end", function(){ | |
| d3.select(this)*/ | |
| .transition() | |
| .duration(1000) | |
| .attr("fill", "black") | |
| .attr("r", 9); | |
| }); | |
| //2. On click, update with new data | |
| d3.select("#click2") | |
| .on("click", function() { | |
| //New values for dataset | |
| var numValues = dataset.length; | |
| //Count original length of dataset | |
| var maxRange = Math.random() * 1000; | |
| //Max range of new values | |
| dataset = [ [.45, .51], [.47, .55], [.44, .53], [.45, .53], [.48, .54] | |
| ]; | |
| //Update scale domains | |
| xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]); | |
| yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]); | |
| //Update all circles | |
| svg.selectAll("circle") | |
| .data(dataset) | |
| .transition() | |
| .duration(1000) | |
| .each("start", function () { | |
| d3.select(this) // Selects 'this', the current element | |
| //.transition() -- Will override first transition | |
| //.duration(250) | |
| .attr("fill", "#FFCC00") //Sets fill of 'this' to magenta | |
| .attr("r", 12); //Sets radius of 'this' to 3 | |
| }) | |
| .attr("cx", function(d) { | |
| return xScale(d[0]); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d[1]); | |
| }) | |
| /*.each("end", function(){ | |
| d3.select(this)*/ | |
| .transition() | |
| .duration(1000) | |
| .attr("fill", "black") | |
| .attr("r", 12); | |
| //Update x-axis | |
| svg.select(".x.axis") | |
| .transition() | |
| .ease("bounce") | |
| .duration(1000) | |
| .call(xAxis); | |
| //Update y-axis | |
| svg.select(".y.axis") | |
| .transition() | |
| .ease("bounce") | |
| .duration(1000) | |
| .call(yAxis); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment