as discussed on the d3js #learning-d3 and #help slack channels on 2015/12/03
an 'anonymoyus' block from micahstubbs
Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: fresh block
forked from anonymous's block: circle transitions example for @hectorleon
forked from anonymous's block: circle transitions example for @hectorleon
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="styles.css"> | |
| </head> | |
| <body> | |
| <div id="option"> | |
| <input type="button" name="updateButton" value="Update" onclick="updateData()" /> | |
| </div> | |
| <section class="row-1"> | |
| <article id="chart--01"></article> | |
| </section> | |
| <script> | |
| var dataset = [ | |
| {datetime: "2013-01-01T11:56:00+00:00", amount: 200, pageViews: 412, enabled: true}, | |
| {datetime: "2013-03-10T12:34:00+00:00", amount: 50, pageViews: 412, enabled: true}, | |
| {datetime: "2013-05-21T13:00:00+00:00", amount: 1250, pageViews: 412, enabled: true}, | |
| {datetime: "2013-06-23T17:00:00+00:00", amount: 300, pageViews: 3500, enabled: true}, | |
| {datetime: "2013-10-25T19:00:00+00:00", amount: 600.456, pageViews: 412, enabled: true}, | |
| {datetime: "2013-12-29T21:15:00+00:00", amount: 550, pageViews: 412, enabled: true}, | |
| {datetime: "2013-12-30T23:11:00+00:00", amount: 233, pageViews: 412, enabled: true}, | |
| ]; | |
| var dataset2 = [ | |
| {datetime: "2012-01-21T11:56:00+00:00", amount: 0, pageViews: 200, enabled: true}, | |
| {datetime: "2013-03-17T12:34:00+00:00", amount: 150, pageViews: 200, enabled: true}, | |
| {datetime: "2013-06-21T13:56:00+00:00", amount: 50, pageViews: 800, enabled: true}, | |
| {datetime: "2015-10-01T17:00:00+00:00", amount: 1300, pageViews: 3500, enabled: true}, | |
| {datetime: "2015-10-05T19:56:00+00:00", amount: 400.456, pageViews: 1500, enabled: true}, | |
| {datetime: "2015-11-29T21:56:00+00:00", amount: 10, pageViews: 700, enabled: true}, | |
| {datetime: "2015-12-30T23:11:00+00:00", amount: 233, pageViews: 4000, enabled: true}, | |
| ]; | |
| var margin = {top: 35, right: 40, bottom: 50, left: 50}; | |
| svgWidth = 920, // 320, | |
| svgHeight = 480, // 200, | |
| contentWidth = svgWidth - margin.left - margin.right, | |
| contentHeight = svgHeight - margin.top - margin.bottom; | |
| svg = d3.select("#chart--01") | |
| .append("svg") | |
| .attr("class", "chart sample-chart") | |
| .attr("width", svgWidth) | |
| .attr("height", svgHeight) | |
| .append('g') | |
| .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); // Centering | |
| var parseDate = d3.time.format.utc("%Y-%m-%dT%H:%M:%S+00:00").parse; | |
| dataset.forEach(function (d) { | |
| d.datetime = parseDate(d.datetime); | |
| d.amount = +d.amount; | |
| d.pageViews = +d.pageViews; | |
| }); | |
| var xScale = d3.time.scale.utc().range([0, contentWidth]), | |
| yScale = d3.scale.linear().range([contentHeight, 0]), | |
| yScale1 = d3.scale.linear().range([contentHeight, 0]), | |
| xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5), | |
| yAxisLeft = d3.svg.axis().scale(yScale).orient("left" ).ticks(5).tickFormat(d3.format("s")), | |
| yAxisRight = d3.svg.axis().scale(yScale1).orient("right").ticks(5).tickFormat(d3.format("s")); | |
| function xGrid() { return d3.svg.axis().scale(xScale).orient("bottom").ticks(5); } | |
| function yGrid() { return d3.svg.axis().scale(yScale).orient("left" ).ticks(5); } | |
| var valueline = d3.svg.line() | |
| .interpolate("cardinal") | |
| .x(function (d) { return xScale(d.datetime); }) | |
| .y(function (d) { return yScale(d.amount); }); | |
| var valueline2 =d3.svg.line() | |
| .interpolate("cardinal") | |
| .x(function (d) { return xScale(d.datetime); }) | |
| .y(function (d) { return yScale1(d.pageViews);}); | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| var year = d3.time.format("%Y"), | |
| dayOfMonth = d3.time.format("%d %b"), | |
| time = d3.time.format("%H:%M"); | |
| // AutoUpdate | |
| var inter = setInterval(function() { updateData(); }, 4000); | |
| xScale.domain(d3.extent(dataset, function (d) { return d.datetime; })); | |
| yScale.domain([0, d3.max(dataset, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
| yScale1.domain([0, d3.max(dataset, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
| xScale.nice(d3.time.month); | |
| svg.append("path") | |
| .attr("class", "line") | |
| .attr("d", valueline(dataset)); | |
| svg.append("path") | |
| .attr("class", "line line2") | |
| .attr("id", "line2") | |
| .attr("d", valueline2(dataset)); | |
| svg.selectAll("circle") | |
| .data(dataset) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "scatter-dots") | |
| .attr("r", 3.5) | |
| .attr("cx", function(d) { return xScale(d.datetime); }) | |
| .attr("cy", function(d) { return yScale(d.amount); }) | |
| .on("mouseover", function(d) { | |
| div.transition() | |
| .duration(100) | |
| .style("opacity", 0.95); | |
| div.html("<span>" + dayOfMonth(d.datetime) + "</span> - " + | |
| "<span>" + time(d.datetime) + "</span><br/>" + | |
| "<span>" + d.amount + "</span>") | |
| .style("left", (d3.event.pageX + 5 ) + "px") | |
| .style("top", (d3.event.pageY - 40) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| div.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| svg.append("g") | |
| .attr("class", "axis x") | |
| .attr("transform", "translate(0, " + contentHeight + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "axis y left") | |
| .call(yAxisLeft); | |
| svg.append("g") | |
| .attr("class", "axis y right y1") | |
| .attr("transform", "translate(" + contentWidth + " ,0)") | |
| .call(yAxisRight); | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .attr("transform", "translate(0," + contentHeight + ")") | |
| .call(xGrid() | |
| .tickSize(-contentHeight, 0, 0) | |
| .tickFormat("") | |
| ); | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .call(yGrid() | |
| .tickSize(-contentWidth, 0, 0) | |
| .tickFormat("") | |
| ); | |
| // ******* UPDATING DATA ******* // | |
| function updateData() { | |
| dataset2.forEach(function (d) { | |
| d.datetime = parseDate(d.datetime); | |
| d.amount = +d.amount; | |
| d.pageViews = +d.pageViews; | |
| }); | |
| xScale.domain (d3.extent(dataset2 , function (d) { return d.datetime; })); | |
| yScale.domain ([0, d3.max(dataset2, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
| yScale1.domain([0, d3.max(dataset2, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
| var svg = d3.select("body").select("svg"); | |
| svg.select(".line") | |
| .transition() | |
| .duration(750) | |
| .attr("d", valueline(dataset2)); | |
| svg.select(".line2") | |
| .transition() | |
| .duration(750) | |
| .attr("d", valueline2(dataset2)); | |
| svg.select(".axis.x") | |
| .transition() | |
| .duration(750) | |
| .call(xAxis); | |
| svg.select(".axis.y.left") | |
| .transition() | |
| .duration(750) | |
| .call(yAxisLeft); | |
| svg.select(".axis.y.right") | |
| .transition() | |
| .duration(750) | |
| .call(yAxisRight); | |
| var circle = svg.selectAll("circle") | |
| .data(dataset2); | |
| circle.exit().remove(); | |
| circle.enter().append("circle") | |
| .attr("r", 3.5); | |
| circle | |
| .transition() | |
| .duration(750) | |
| .attr("cx", function(d) { return xScale(d.datetime); }) | |
| .attr("cy", function(d) { return yScale(d.amount); }) | |
| } | |
| </script> | |
| </body> |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| width:100%; | |
| height:100%; | |
| background: silver; | |
| margin: 0 auto; | |
| } | |
| #chart--01 { | |
| width :100%; | |
| height :220px; | |
| margin : 10px auto; | |
| padding : 2% 0; | |
| text-align: center; | |
| } | |
| svg.chart { | |
| border: 1px solid blue; | |
| background-color: azure; | |
| } | |
| .line { | |
| stroke : steelblue; | |
| stroke-width : 1; | |
| fill : none; | |
| } | |
| .line2 { | |
| stroke :red; | |
| } | |
| .line2-name { | |
| fill: red; | |
| font-size: 10px; | |
| } | |
| .area { | |
| fill: lightblue; | |
| stroke-width: 0; | |
| } | |
| .area2 { | |
| fill: rgba(214,34,12,.6); | |
| } | |
| .scatter-dots { | |
| fill: white; | |
| stroke: steelblue; | |
| stroke-width: 1; | |
| } | |
| .scatter-dots:hover, | |
| .scatter-dots:active { | |
| fill: steelblue; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill : none; | |
| stroke : grey; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis.y path { | |
| stroke-width: 0; | |
| } | |
| .axis .tick text { | |
| fill: black; | |
| font-size: 11px; | |
| } | |
| .grid .tick { | |
| stroke: grey; | |
| stroke-opacity: 1; | |
| shape-rendering: crispEdges; | |
| stroke-dasharray: 3,3; | |
| } | |
| .grid path { | |
| stroke-width: 0; | |
| } | |
| .axis-title { | |
| font-size: 12px; | |
| font-style: italic; | |
| } | |
| .tooltip { | |
| position : absolute; | |
| text-align: center; | |
| width : auto; | |
| min-width : 90px; | |
| height : auto; | |
| padding : 2px; | |
| font : 12px sans-serif; | |
| background: Turquoise; | |
| border : 0px; | |
| pointer-events: none; | |
| -webkit-box-shadow : 2px 2px 5px 0px rgba(0,0,0,0.35); | |
| -moz-box-shadow : 2px 2px 5px 0px rgba(0,0,0,0.35); | |
| box-shadow : 2px 2px 5px 0px rgba(0,0,0,0.35); | |
| } |