View on bl.ocks.org
John Berlin
- Transitions can be hard
- Domains are tricky
- Plotting data is easy with d3
Last active
February 12, 2016 01:53
-
-
Save N0taN3rd/ca8a6d89ed7a8cc2d972 to your computer and use it in GitHub Desktop.
Visualization Implementation (VI3)
This file contains hidden or 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style> | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| } | |
| div.bar { | |
| display: inline-block; | |
| width: 20px; | |
| height: 75px; /* Gets overriden by D3-assigned height below */ | |
| margin-right: 2px; | |
| background-color: teal; | |
| } | |
| .column{ float: left; margin: 0 20px 0 0;} | |
| </style> | |
| </head> | |
| <body> | |
| <body> | |
| <div id="third" class="column"> | |
| <p>Third Tutorial</p> | |
| </div> | |
| <div id="fourth" class="column"> | |
| <p>Click on this text to update the chart with new data values (once).</p> | |
| </div> | |
| </body> | |
| <script> | |
| w = 500; | |
| h = 300; | |
| padding = 30; | |
| numDataPoints = 50; //Number of dummy data points to create | |
| xRange = Math.random() * 1000; //Max range of new x values | |
| yRange = Math.random() * 1000; //Max range of new y values | |
| dataset = Array.apply(null, {length: numDataPoints}) | |
| .map(function () { | |
| return [Math.round(Math.random() * xRange), | |
| Math.round(Math.random() * yRange)] | |
| }); | |
| //Create scale functions | |
| xScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function (d) { | |
| return d[0]; | |
| })]) | |
| .range([padding, w - padding * 2]); | |
| yScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function (d) { | |
| return d[1]; | |
| })]) | |
| .range([h - padding, padding]); | |
| rScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function (d) { | |
| return d[1]; | |
| })]) | |
| .range([2, 5]); | |
| //Define X axis | |
| xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(5); | |
| //.tickFormat(formatAsPercentage); | |
| //Define Y axis | |
| yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(5); | |
| //.tickFormat(formatAsPercentage); | |
| //Create SVG element | |
| svg = d3.select("#third") | |
| .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]); | |
| }) | |
| .attr("r", function (d) { | |
| return rScale(d[1]); | |
| }); | |
| /* | |
| //Create labels | |
| svg.selectAll("text") | |
| .data(dataset) | |
| .enter() | |
| .append("text") | |
| .text(function(d) { | |
| return d[0] + "," + d[1]; | |
| }) | |
| .attr("x", function(d) { | |
| return xScale(d[0]); | |
| }) | |
| .attr("y", function(d) { | |
| return yScale(d[1]); | |
| }) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "11px") | |
| .attr("fill", "red"); | |
| */ | |
| //Create X axis | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(0," + (h - padding) + ")") | |
| .call(xAxis); | |
| //Create Y axis | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(" + padding + ",0)") | |
| .call(yAxis); | |
| //____________________________________________________________________________________________ | |
| w = 500; | |
| h = 300; | |
| var padding = 30; | |
| var numDataPoints = 50; //Number of dummy data points to create | |
| var xRange = Math.random() * 1000; //Max range of new x values | |
| var yRange = Math.random() * 1000; //Max range of new y values | |
| dataset = Array.apply(null, {length: numDataPoints}) | |
| .map(function () { | |
| return [Math.round(Math.random() * xRange), | |
| Math.round(Math.random() * yRange)] | |
| }); | |
| 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); | |
| var svg = d3.select("#fourth") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| svg.append("clipPath") | |
| .attr("id", "chart-area") | |
| .append("rect") | |
| .attr("x", padding) | |
| .attr("y", padding) | |
| .attr("width", w - padding * 3) | |
| .attr("height", h - padding * 2); | |
| svg.append("g") | |
| .attr("id", "circles") | |
| .attr("clip-path", "url(#chart-area)") | |
| .selectAll("circle") | |
| .data(dataset) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function (d) { | |
| return xScale(d[0]); | |
| }) | |
| .attr("cy", function (d) { | |
| return yScale(d[1]); | |
| }) | |
| .attr("r", function (d) { | |
| return rScale(d[1]); | |
| }); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (h - padding) + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + padding + ",0)") | |
| .call(yAxis); | |
| d3.select("#fourth").select("p") | |
| .on("click", function () { | |
| svg.selectAll("circle") | |
| .data(dataset) | |
| .transition() | |
| .duration(1000) | |
| .each("start", function () { | |
| d3.select(this) | |
| .attr("fill", "magenta") | |
| .attr("r", 6); | |
| }) | |
| .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", 2); | |
| }); | |
| svg.select(".x.axis") | |
| .transition() | |
| .duration(1000) | |
| .call(xAxis); | |
| svg.select(".y.axis") | |
| .transition() | |
| .duration(1000) | |
| .call(yAxis); | |
| }); | |
| d3.select(self.frameElement).style("height", "1300px"); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment