A multiple line chart visualizing California electrical energy production Built with blockbuilder.org
| date | california_energy_production | total_hydroelectric | nuclear | in_state_coal | oil | natural_gas | geothermal | biomass | wind | solar | other | direct_coal_imports | other_imports | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1983 | 199609 | 59351 | 6738 | 563 | 6535 | 45486 | 7020 | 731 | 52 | 2 | 0 | 17001 | 56130 | |
| 1984 | 211900 | 46880 | 13467 | 731 | 2632 | 58248 | 9272 | 1099 | 192 | 11 | 0 | 18080 | 61288 | |
| 1985 | 210172 | 33898 | 18911 | 865 | 2790 | 69771 | 10957 | 1171 | 655 | 33 | 0 | 14112 | 57009 | |
| 1985 | 211028 | 44478 | 28000 | 1033 | 3126 | 49260 | 13094 | 2063 | 1221 | 64 | 6 | 17588 | 51095 | |
| 1987 | 220371 | 27140 | 32995 | 1163 | 2143 | 75437 | 14083 | 2461 | 1713 | 188 | 5 | 17544 | 45499 | |
| 1988 | 232926 | 26692 | 35481 | 1791 | 8158 | 74221 | 14194 | 4092 | 1824 | 315 | 4 | 19243 | 46911 | |
| 1989 | 238567 | 32742 | 33803 | 2479 | 9275 | 78916 | 15247 | 5204 | 2139 | 471 | 4 | 17223 | 41064 | |
| 1990 | 252355 | 26092 | 36586 | 3692 | 4449 | 76082 | 16038 | 6644 | 2418 | 681 | 4 | 17710 | 61959 | |
| 1991 | 242343 | 23244 | 37167 | 3050 | 523 | 75828 | 15566 | 7312 | 2669 | 719 | 0 | 20392 | 55873 | |
| 1992 | 245535 | 22373 | 38622 | 3629 | 107 | 87032 | 16491 | 7362 | 2707 | 700 | 2 | 28806 | 37704 | |
| 1993 | 242026 | 41595 | 36579 | 2549 | 2085 | 70715 | 15770 | 5760 | 2867 | 857 | 0 | 20358 | 42892 | |
| 1994 | 256719 | 25626 | 38828 | 2655 | 1954 | 95025 | 15573 | 7173 | 3293 | 798 | 0 | 22440 | 43354 | |
| 1995 | 256367 | 51665 | 36186 | 1136 | 489 | 78378 | 14267 | 5969 | 3182 | 793 | 0 | 16788 | 47514 | |
| 1996 | 253621 | 47883 | 39753 | 2870 | 693 | 66711 | 13539 | 5557 | 3154 | 832 | 343 | 22590 | 49696 | |
| 1997 | 230243 | 41400 | 37267 | 2276 | 143 | 74341 | 11950 | 5701 | 2739 | 810 | 896 | 22411 | 30310 | |
| 1998 | 244577 | 48757 | 41715 | 2701 | 123 | 82052 | 12554 | 5266 | 2776 | 839 | 230 | 22570 | 24993 | |
| 1999 | 243077 | 41627 | 40419 | 3602 | 55 | 84703 | 13251 | 5663 | 3433 | 838 | 0 | 22802 | 26685 | |
| 2000 | 246876 | 42053 | 43533 | 3183 | 449 | 106878 | 13456 | 6086 | 3604 | 860 | 0 | 23877 | 2897 | |
| 2001 | 267399 | 24988 | 33294 | 4041 | 379 | 116369 | 13525 | 5761 | 3242 | 836 | 38 | 23699 | 41227 | |
| 2002 | 274444 | 31359 | 34353 | 4275 | 87 | 92752 | 13396 | 6196 | 3546 | 851 | 35 | 23653 | 63941 | |
| 2003 | 280026 | 36341 | 35594 | 4269 | 103 | 94715 | 13329 | 6092 | 3316 | 759 | 108 | 23148 | 62253 | |
| 2004 | 290211 | 34490 | 30241 | 4086 | 127 | 105358 | 13494 | 6080 | 4258 | 741 | 48 | 24504 | 66785 | |
| 2005 | 289177 | 40263 | 36155 | 4283 | 148 | 97110 | 13292 | 6076 | 4084 | 660 | 24 | 24114 | 62967 | |
| 2006 | 298454 | 48559 | 32036 | 4190 | 134 | 109316 | 13093 | 5861 | 4902 | 616 | 34 | 14452 | 65263 | |
| 2007 | 304823 | 27105 | 35698 | 4217 | 103 | 120459 | 13029 | 5743 | 5570 | 668 | 15 | 14417 | 77799 | |
| 2008 | 307448 | 24460 | 32482 | 3977 | 92 | 123036 | 12907 | 5927 | 5724 | 733 | 39 | 14463 | 83608 | |
| 2009 | 299101 | 29220 | 31509 | 3735 | 67 | 117277 | 12907 | 6096 | 6249 | 851 | 20 | 13556 | 77615 | |
| 2010 | 291310 | 34327 | 32214 | 3406 | 52 | 109916 | 12740 | 5960 | 6172 | 912 | 12 | 13119 | 72481 | |
| 2011 | 293875 | 42731 | 36666 | 3120 | 36 | 91276 | 12685 | 5986 | 7598 | 1097 | 13 | 13032 | 79633 | |
| 2012 | 302113 | 27459 | 18491 | 1580 | 90 | 121761 | 12733 | 6121 | 9242 | 1834 | 14 | 9716 | 93071 | |
| 2013 | 296569 | 24098 | 17860 | 1018 | 38 | 120896 | 12485 | 6466 | 12694 | 4154 | 14 | 11824 | 85022 |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta http-equiv="Content-Language" content="en" /> | |
| <title>Energy Production in California</title> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script> | |
| <style> | |
| body { font: 12px avenir next;} | |
| path { | |
| stroke: #; | |
| stroke-width: ; | |
| fill: none; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #e7eff1; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .graph-svg-component { | |
| background-color:#e7eff1; | |
| opacity:0.9; | |
| } | |
| /*div { | |
| padding: 15px; | |
| width:800px; | |
| margin-left:auto; | |
| margin-right:auto; | |
| border:10px ; | |
| }*/ | |
| .overlay { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| .focus circle { | |
| fill: #990000; | |
| stroke: #990000; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: #7ea7ba; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| stroke-width: 1.5px; | |
| } | |
| .line-hover { | |
| stroke: #cc6200; | |
| stroke-width:4; | |
| } | |
| .voronoi path { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| .grid .tick{ | |
| stroke:white; | |
| stroke-width:1.5px; | |
| stroke-opacity:0.9; | |
| shape-rendering: crispEdges; | |
| } | |
| .grid path{ | |
| stroke-width:0; | |
| } | |
| .lable{ | |
| font-size: 30; | |
| } | |
| .lable-hover{ | |
| font-size: 30; | |
| } | |
| text.shadow { stroke: white; | |
| stroke-width: 2.5px; | |
| opacity: 0.9; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var margin = {top: 80, right: 140, bottom: 60, left: 80}, | |
| width = 1400 - margin.left - margin.right, | |
| height = 830 - margin.top - margin.bottom; | |
| var parseDate = d3.time.format("%Y").parse, | |
| bisectDate = d3.bisector(function(d) { return d.date; }).left, | |
| formatValue = d3.format(",.2f"); | |
| var x = d3.time.scale().range([0, width]); | |
| var y = d3.scale.linear().range([height, 0]); | |
| var xAxis = d3.svg.axis().scale(x) | |
| .orient("bottom").ticks(15); | |
| var yAxis = d3.svg.axis().scale(y) | |
| .orient("left").ticks(10); | |
| var voronoi = d3.geom.voronoi() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.value); }) | |
| .clipExtent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]); | |
| var valueline2 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.total_hydroelectric); }); | |
| var valueline3 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.nuclear); }); | |
| var valueline4 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.in_state_coal); }); | |
| var valueline5 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.oil); }); | |
| var valueline6 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.natural_gas ); }); | |
| var valueline7 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.geothermal ); }); | |
| var valueline8 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.biomass ); }); | |
| var valueline9 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.wind ); }); | |
| var valueline10 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.solar ); }); | |
| var valueline11 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.other ); }); | |
| var valueline12 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.direct_coal_imports ); }); | |
| var valueline13 = d3.svg.line() | |
| // .interpolate("basis") | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.other_imports ); }); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .attr("class", "graph-svg-component") | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| tmp = null; | |
| function make_x_axis() { return d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .ticks(10) | |
| } | |
| function make_y_axis() { return d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(5) | |
| } | |
| // Get the data | |
| d3.csv("data_3.csv", function(error, data) { | |
| var flatData = []; | |
| data.forEach(function(d) { | |
| d.date = parseDate(d.date); | |
| // d.california_energy_production = +d.california_energy_production; | |
| d.total_hydroelectric = +d.total_hydroelectric; | |
| d.nuclear = +d.nuclear; | |
| d.in_state_coal = +d.in_state_coal; | |
| d.oil = +d.oil; | |
| d.natural_gas = +d.natural_gas; | |
| d.geothermal = +d.geothermal; | |
| d.biomass = +d.biomass; | |
| d.wind = +d.wind; | |
| d.solar = +d.solar; | |
| d.other = +d.other; | |
| d.direct_coal_imports = +d.direct_coal_imports; | |
| d.other_imports = +d.other_imports; | |
| flatData.push({date: d.date, value: d.total_hydroelectric, key: "total_hydroelectric"}); | |
| flatData.push({date: d.date, value: d.nuclear, key: "nuclear"}); | |
| flatData.push({date: d.date, value: d.in_state_coal, key: "in_state_coal"}); | |
| flatData.push({date: d.date, value: d.oil, key: "oil"}); | |
| flatData.push({date: d.date, value: d.natural_gas, key: "natural_gas"}); | |
| flatData.push({date: d.date, value: d.geothermal, key: "geothermal"}); | |
| flatData.push({date: d.date, value: d.biomass, key: "biomass"}); | |
| flatData.push({date: d.date, value: d.wind, key: "wind"}); | |
| flatData.push({date: d.date, value: d.solar, key: "solar"}); | |
| flatData.push({date: d.date, value: d.other, key: "other"}); | |
| flatData.push({date: d.date, value: d.direct_coal_imports, key: "direct_coal_imports"}); | |
| flatData.push({date: d.date, value: d.other_imports, key: "other_imports"}); | |
| }); | |
| // Scale the range of the data | |
| x.domain(d3.extent(data, function(d) { return d.date; })); | |
| y.domain([0, d3.max(data, function(d) { return Math.max( d.total_hydroelectric, d.nuclear,d.in_state_coal, d.oil, d.natural_gas); })]) | |
| // Add the valueline path. | |
| // svg.append("path") | |
| // .attr("class", "line") | |
| // .attr("d", valueline1(data)); | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(make_x_axis() | |
| .tickSize(-height, 0, 0) | |
| .tickFormat("") | |
| ) | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .call(make_y_axis() | |
| .tickSize(-width, 0, 0) | |
| .tickFormat("") | |
| ) | |
| svg.append("path") | |
| .attr("class", "line total_hydroelectric") | |
| .attr("d", valueline2(data)); | |
| svg.append("path") | |
| .attr("class", "line nuclear") | |
| .attr("d", valueline3(data)); | |
| svg.append("path") | |
| .attr("class", "line in_state_coal") | |
| .attr("d", valueline4(data)); | |
| svg.append("path") | |
| .attr("class", "line oil") | |
| .attr("d", valueline5(data)); | |
| svg.append("path") | |
| .attr("class", "line natural_gas") | |
| .attr("d", valueline6(data)); | |
| svg.append("path") | |
| .attr("class", "line geothermal") | |
| .attr("d", valueline7(data)); | |
| svg.append("path") | |
| .attr("class", "line biomass") | |
| .attr("d", valueline8(data)); | |
| svg.append("path") | |
| .attr("class", "line wind") | |
| .attr("d", valueline9(data)); | |
| svg.append("path") | |
| .attr("class", "line solar") | |
| .attr("d", valueline10(data)); | |
| svg.append("path") | |
| .attr("class", "line other") | |
| .attr("d", valueline11(data)); | |
| svg.append("path") | |
| .attr("class", "line direct_coal_imports") | |
| .attr("d", valueline12(data)); | |
| svg.append("path") | |
| .attr("class", "line other_imports") | |
| .attr("d", valueline13(data)); | |
| svg.append("g") // Add the X Axis | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") // Add the Y Axis | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| var focus = svg.append("g") | |
| .attr("class", "focus") | |
| .attr("transform", "translate(-100,-100)"); | |
| focus.append("circle") | |
| .attr("r", 6); | |
| focus.append("text") | |
| .attr("x", -9) | |
| .attr("y",-15) | |
| .attr("dy", ".35em"); | |
| svg.append("text") | |
| .attr("class", "lable total_hydroelectric") | |
| .attr("transform", "translate(" + (width+3) + "," + y(data[30].total_hydroelectric) + ")") | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "start") | |
| // .style("fill", "#898989") | |
| .text("Total Hydroelectric"); | |
| svg.append("text") | |
| .attr("class", "lable nuclear") | |
| .attr("transform", "translate(" + (width+3) + "," + y(data[30].nuclear) + ")") | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "start") | |
| // .style("fill", "#898989") | |
| .text("Nuclear"); | |
| // svg.append("text") | |
| // .attr("class", "lable in_state_coal") | |
| // .attr("transform", "translate(" + (width+3) + "," + y(data[30].in_state_coal) + ")") | |
| // .attr("dy", ".35em") | |
| // .attr("text-anchor", "start") | |
| // // .style("fill", "#898989") | |
| // .text("In State Coal"); | |
| // svg.append("text") | |
| // .attr("class", "lable oil") | |
| // .attr("transform", "translate(" + (width+3) + "," + y(data[30].oil) + ")") | |
| // .attr("dy", ".35em") | |
| // .attr("text-anchor", "start") | |
| // // .style("fill", "#898989") | |
| // .text("Oil"); | |
| svg.append("text") | |
| .attr("class", "lable natural_gas") | |
| .attr("transform", "translate(" + (width+3) + "," + y(data[30].natural_gas) + ")") | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "start") | |
| // .style("fill", "#898989") | |
| .text("Natural Gas"); | |
| svg.append("text") | |
| .attr("class", "lable geothermal") | |
| .attr("transform", "translate(" + (width+3) + "," + y(data[30].geothermal) + ")") | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "start") | |
| // .style("fill", "#898989") | |
| .text("Geotheral"); | |
| // svg.append("text") | |
| // .attr("class", "lable biomass") | |
| // .attr("transform", "translate(" + (width+3) + "," + y(data[30].biomass) + ")") | |
| // .attr("dy", ".35em") | |
| // .attr("text-anchor", "start") | |
| // // .style("fill", "#898989") | |
| // .text("Biomass"); | |
| // svg.append("text") | |
| // .attr("class", "lable wind") | |
| // .attr("transform", "translate(" + (width+3) + "," + y(data[30].wind) + ")") | |
| // .attr("dy", ".35em") | |
| // .attr("text-anchor", "start") | |
| // // .style("fill", "#898989") | |
| // .text("Wind"); | |
| // svg.append("text") | |
| // .attr("class", "lable solar") | |
| // .attr("transform", "translate(" + (width+3) + "," + y(data[30].solar) + ")") | |
| // .attr("dy", ".35em") | |
| // .attr("text-anchor", "start") | |
| // // .style("fill", "#898989") | |
| // .text("Solar"); | |
| // svg.append("text") | |
| // .attr("class", "lable other") | |
| // .attr("transform", "translate(" + (width+3) + "," + y(data[30].other) + ")") | |
| // .attr("dy", ".35em") | |
| // .attr("text-anchor", "start") | |
| // // .style("fill", "#898989") | |
| // .text("Other"); | |
| // svg.append("text") | |
| // .attr("class", "lable direct_coal_imports") | |
| // .attr("transform", "translate(" + (width+3) + "," + y(data[30].direct_coal_imports) + ")") | |
| // .attr("dy", ".35em") | |
| // .attr("text-anchor", "start") | |
| // // .style("fill", "#898989") | |
| // .text("Direct Coal Imports"); | |
| svg.append("text") | |
| .attr("class", "lable other_imports") | |
| .attr("transform", "translate(" + (width+3) + "," + y(data[30].other_imports) + ")") | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "start") | |
| // .style("fill", "#898989") | |
| .text("Other Imports"); | |
| var voronoiGroup = svg.append("g") | |
| .attr("class", "voronoi"); | |
| voronoiGroup.selectAll("path") | |
| .data(voronoi(flatData)) | |
| .enter().append("path") | |
| .attr("d", function(d) { return "M" + d.join("L") + "Z"; }) | |
| .datum(function(d) { return d.point; }) | |
| .on("mouseover", mouseover) | |
| .on("mouseout", mouseout); | |
| function mouseover(d) { | |
| console.log(d); | |
| d3.select("."+d.key).classed("line-hover", true); | |
| focus.attr("transform", "translate(" + x(d.date) + "," + y(d.value) + ")"); | |
| focus.select("text") | |
| .text( d.value + " Gigawatt/Hours") | |
| .style("font-size", "14") | |
| .style("opacity", "0.75") | |
| .style("font-weight",500); | |
| } | |
| function mouseout(d) { | |
| d3.select("."+d.key).classed("line-hover", false); | |
| focus.attr("transform", "translate(-100,-100)"); | |
| } | |
| }); | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x", 10) | |
| .attr("y", 40) | |
| .text("California Electrical Energy Production Breakdown, Visualized") | |
| .style({"font-size":"28px", | |
| "font-family":"Helvetica", | |
| "font-weight":"600", | |
| "opacity":"0.8", | |
| }); | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x", 13) | |
| .attr("y", 65) | |
| .text("Hover your mouse on each energy source to see more details") | |
| .style({"font-size":"20px", | |
| "font-family":"Helvetica", | |
| "font-weight":"400", | |
| "opacity":"0.65", | |
| }); | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x",10) | |
| .attr("y",820) | |
| .text("Produced by Jeremy C.F. Lin") | |
| .style({"font-size":"12px", | |
| "font-family":"avenir next", | |
| "font-weight":"500", | |
| "opacity":"0.65", | |
| }) | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x", 10) | |
| .attr("y", 805) | |
| .text("Data source: http://energyalmanac.ca.gov/electricity/") | |
| .style({"font-size":"12px", | |
| "font-family":"avenir next", | |
| "font-weight":"500", | |
| "opacity":"0.65", | |
| }); | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x", 1263) | |
| .attr("y", 688) | |
| .text("Wind") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x", 1263) | |
| .attr("y", 718) | |
| .text("Direct Coal Imports") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x", 1263) | |
| .attr("y", 730) | |
| .text("Biomass") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x", 1263) | |
| .attr("y", 745) | |
| .text("Solar") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x", 1263) | |
| .attr("y", 760) | |
| .text("Oil") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x", 1263) | |
| .attr("y", 775) | |
| .text("Other") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x",1190) | |
| .attr("y",345) | |
| .style("opacity",0.7) | |
| .style("font-size",10) | |
| .text(" Other Imports include power plants locatd") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x",1190) | |
| .attr("y",360) | |
| .style("opacity",0.7) | |
| .style("font-size",10) | |
| .text("physically out-of-state as following:") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x",1190) | |
| .attr("y",375) | |
| .style("opacity",0.7) | |
| .style("font-size",10) | |
| .text("Intermountain Power Plant (coal) in Utah,") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x",1190) | |
| .attr("y",390) | |
| .style("opacity",0.7) | |
| .style("font-size",10) | |
| .text("Mohave Generation Station (coal) in Nevada,") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x",1190) | |
| .attr("y",405) | |
| .style("opacity",0.7) | |
| .style("font-size",10) | |
| .text("Terra-Gen Dixie Valley plant (geothermal)") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x",1190) | |
| .attr("y",420) | |
| .style("opacity",0.7) | |
| .style("font-size",10) | |
| .text("Desert Star Plant (natural gas) in Nevada,") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x",1190) | |
| .attr("y",435) | |
| .style("opacity",0.7) | |
| .style("font-size",10) | |
| .text("Termoelectrica de Mexicali Plant and") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x",1190) | |
| .attr("y",450) | |
| .style("opacity",0.7) | |
| .style("font-size",10) | |
| .text("InterGen's La Rosita Plant (natural gas)") | |
| d3.select("svg") | |
| .append("text") | |
| .attr("x",1190) | |
| .attr("y",465) | |
| .style("opacity",0.7) | |
| .style("font-size",10) | |
| .text("both of which are in Mexico.") | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment