working on react

git-svn-id: file:///usr/local/svnrepository/gaymarriagemap@4744 1105561e-45e8-0310-ac4d-b20c3b09defe
gregstoll · Sep 10, 2016 · e987ba4 · e987ba4
1 parent 3e6d319
commit e987ba4
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/index_react.html b/index_react.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="msApplication-ID" content="57039gregstoll.com.MarriageMap">
+        <meta name="msApplication-PackageFamilyName" content="57039gregstoll.com.MarriageMap_mrfc7nnpdd326">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Same-sex marriage status in the United States</title>
+        <!-- The core React library -->
+        <script src="https://npmcdn.com/react@15.3.0/dist/react-with-addons.min.js"></script>
+        <!-- The ReactDOM Library -->
+        <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>
+        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
+        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
+        <script src="https://d3js.org/d3.v4.min.js"></script>
+        <script src="usastates.json"></script>
+    </head>
+    <body>
+        <div id="reactTarget"></div>
+
+        <script type="text/babel">
+
+            var Map = React.createClass({
+                componentDidMount: function() {
+                    d3.selectAll('#regions path').data(usaStatesGeoData.features).enter().insert(this.path).attr('stroke', '#ccc');
+                },
+                path: function() {
+                    var mapW = 1000;
+                    var mapH = 600;
+                    var mapXY = d3.geoAlbersUsa().scale(1000).translate([mapH/2,mapW/2]);
+                    return d3.geoPath().projection(mapXY);
+                },
+                render: function() {
+                    return <svg height="600" width="1000"><g id="regions"></g></svg>;
+                }
+            });
+            var App = React.createClass({
+                getInitialState: function() {
+                    return {'marriageData': {}};
+                },
+                render: function() {
+                    return <div><Map /></div>;
+                }
+            });
+            ReactDOM.render(<App/>, document.getElementById('reactTarget'));
+        </script>
+    </body>
+</html>
+
diff --git a/usastates.json b/usastates.json