xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Philadelphia Weather History</title> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <style type="text/css"> body { } .bar { fill: steelblue; opacity: .6; } .overlay { fill: white; opacity: .5; } .overlay:hover { opacity: 0; } .labels { font: 12px sans-serif; fill: black; } .axis path, .axis line { fill: none; stroke: #e0e0e0; shape-rendering: crispEdges; } .x.axis { font: 10px sans-serif; fill: #c0c0c0; } .y.axis { font: 10px sans-serif; fill: #c0c0c0; } .x.axis path { display: none; } .area { fill: #a0a0a0; opacity: .7; } .line { fill: none; stroke: white; } </style> </head> <body> <div id="container"> <script type="text/javascript"> //conventional margins var margin = {top: 40, right: 160, bottom: 40, left: 40}; var width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var svg = d3.select('#container').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 + ')'); //conventional margins end var parseDate = d3.time.format('%Y').parse; //scales var xA = d3.time.scale() .range([0,width]); var xB = d3.scale.ordinal() .rangeBands([0, width], .25, .25); var yA = d3.scale.linear() .range([height, 0]); var yB = d3.scale.linear() .range([height, 0]); //axes var xAxis = d3.svg.axis() .scale(xA) .orient('bottom') .ticks(10); var yAxisA = d3.svg.axis() .scale(yA) .orient('left'); var yAxisB = d3.svg.axis() .scale(yB) .orient('right'); //area chart var area = d3.svg.area() .x(function(d) { return xA(d.Year); }) .y0(function(d) { return yA(d.DecJanFeb); }) .y1(function(d) { return yA(d.JunJulAug); }); //line chart var line = d3.svg.line() .x(function(d) { return xA(d.Year); }) .y(function(d) { return yA(d.Mean); }); //data d3.csv('temps.csv', function(error, data) { data.forEach(function(d) { d.Year = parseDate(d.Year); d.Mean = +d.Mean; d.DecJanFeb = +d.DecJanFeb; d.JunJulAug = +d.JunJulAug; d.Snowfall = +d.Snowfall; }); //domains for the scales xA.domain(d3.extent(data, function(d) { return d.Year; })); xB.domain(data.map(function(d) { return d.Year; })); yA.domain([0,100]); yB.domain([0,100]); svg.append('path') .datum(data) .attr('class', 'area') .attr('d', area); svg.selectAll('.bar') .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return xB(d.Year); }) .attr("width", xB.rangeBand()) .attr("y", function(d) { return yB(d.Snowfall); }) .attr("height", function(d) { return height - yB(d.Snowfall); }); svg.append('path') .datum(data) .attr('class', 'line') .attr('d', line); svg.selectAll('.overlay') .data(data) .enter().append("rect") .attr("class", "overlay") .attr("x", function(d) { return xB(d.Year); }) .attr("width", xB.rangeBand()) .attr("y", 0) .attr("height", height) .on('mouseover', function(d) { xTip = parseFloat(d3.select(this).attr('x')); svg.append('text') .data(data) .attr('class', 'labels') .attr('id', 'tooltip0') .attr('x', xTip - 35) .attr('y', yB(d.Snowfall) - 5) .text(d.Snowfall + 'in'); svg.append('text') .data(data) .attr('class', 'labels') .attr('id', 'tooltip1') .attr('x', xTip + 5) .attr('y', yB(d.Mean) - 5) .text(' Average ' + d.Mean + 'º'); svg.append('text') .data(data) .attr('class', 'labels') .attr('id', 'tooltip2') .attr('x', xTip + 5) .attr('y', yB(d.JunJulAug) - 5) .text(' Jun-Jul-Aug average: ' + d.JunJulAug + 'º'); svg.append('text') .data(data) .attr('class', 'labels') .attr('id', 'tooltip3') .attr('x', xTip + 5) .attr('y', yB(d.DecJanFeb) - 5) .text(' Dec-Jan-Feb average: ' + d.DecJanFeb + 'º'); }) .on('mouseout', function() { d3.select('#tooltip0').remove() d3.select('#tooltip1').remove() d3.select('#tooltip2').remove() d3.select('#tooltip3').remove(); }); svg.append('g') .attr('class', 'x axis') .call(xAxis) .append('text') .attr('x', width - 100) .attr('y', -16) .attr("dy", ".71em") .text("source: Franklin Institute"); svg.append("g") .attr("class", "y axis") .call(yAxisA) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Temp.(ºF) 1875-1990"); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + width + ", 0)") .call(yAxisB) .append("text") .attr("x", -110) .attr("y", height + 10) .attr("dy", ".71em") .style("text-anchor", "start") .text("Snowfall(in.) 1875-1990"); }); </script> </div> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js