D3 Map - Revision history

Admin at 04:41, 17 February 2015

2015-02-17T04:41:37Z

← Older revision		Revision as of 04:41, 17 February 2015
Line 116:		Line 116:
	<script src="http://d3js.org/topojson.v1.min.js"></script>		<script src="http://d3js.org/topojson.v1.min.js"></script>

	<script src="{{ SITEURL }}/d3basicmap.js" type="text/javascript"></script>		<script src="{ { SITEURL } }/d3basicmap.js" type="text/javascript"></script>
	</source>		</source>

	where <code>{{ SITEURL }}</code> is Jinja template markup, part of using [[Pelican]] to manage all the maps on the page.		where <nowiki><code>{{ SITEURL }}</code></nowiki> is Jinja template markup, part of using [[Pelican]] to manage all the maps on the page.

	Pelican/Jinja template on Github here: https://github.com/charlesreid1/a-shrubbery/blob/master/pelican/maps/d3basicmap.html		Pelican/Jinja template on Github here: https://github.com/charlesreid1/a-shrubbery/blob/master/pelican/maps/d3basicmap.html

Admin at 04:40, 17 February 2015

2015-02-17T04:40:56Z

← Older revision		Revision as of 04:40, 17 February 2015
Line 372:		Line 372:

	[[Category:GIS]]		[[Category:GIS]]

			[[Category:D3]]

Admin: /* Init D3 HTML Page */

2015-02-15T03:07:22Z

Init D3 HTML Page

@@ Line 341: / Line 341: @@
          .style("stroke-width", "1")
          .style("stroke", "black")
+}

Admin: /* D3 HTML Page */

2015-02-15T03:06:03Z

D3 HTML Page

← Older revision		Revision as of 03:06, 15 February 2015
Line 236:		Line 236:
	</pre>		</pre>

	==D3 HTML Page==		==Init D3 HTML Page==

	Now time for making the D3 HTML page.		Now time for making the D3 HTML page.
Line 377:		Line 377:


	I finally ended up, once again, adjusting the whole map by hand to get the view centered on the interesting data. Only problem was, it wasn't that interesting...		I finally ended up, once again, adjusting the whole map by hand to get the view centered on the interesting data. Only problem was, it wasn't that interesting...:

	[[Image:D3_Contour_Init.png\|500px]]		[[Image:D3_Contour_Init.png\|500px]]

Admin: /* D3 HTML Page */

2015-02-15T03:04:58Z

D3 HTML Page

← Older revision		Revision as of 03:04, 15 February 2015
Line 375:		Line 375:

	[[Image:D3_Centering_Fail2.png\|500px]]		[[Image:D3_Centering_Fail2.png\|500px]]


			I finally ended up, once again, adjusting the whole map by hand to get the view centered on the interesting data. Only problem was, it wasn't that interesting...

			[[Image:D3_Contour_Init.png\|500px]]

Admin: /* Creating html file */

2015-02-15T03:04:01Z

Creating html file

← Older revision		Revision as of 03:04, 15 February 2015
Line 235:		Line 235:
	prune: retained 34880 / 34880 arcs (100%)		prune: retained 34880 / 34880 arcs (100%)
	</pre>		</pre>

	~~==Creating html file==~~

	~~The next step was to create the HTML file. Here's how I modified the example HTML code:~~

	~~<source lang="xml">~~

	~~</source>~~

	==D3 HTML Page==		==D3 HTML Page==

Admin: /* Creating make file */

2015-02-15T02:25:38Z

Creating make file

← Older revision		Revision as of 02:25, 15 February 2015
Line 236:		Line 236:
	</pre>		</pre>

			==Creating html file==

			The next step was to create the HTML file. Here's how I modified the example HTML code:

			<source lang="xml">

			</source>

	==D3 HTML Page==		==D3 HTML Page==

Admin: /* D3 HTML Page */

2015-02-14T20:10:10Z

D3 HTML Page

← Older revision		Revision as of 20:10, 14 February 2015
Line 243:		Line 243:
	I copied and pasted most of what the example gave, with a few small modifications for my own data. Here's the final HTML file, barrygoldwater.html:		I copied and pasted most of what the example gave, with a few small modifications for my own data. Here's the final HTML file, barrygoldwater.html:

	<source lang="~~html~~">		<source lang="xml">

	<style>		<style>

Admin: /* D3 HTML Page */

2015-02-14T20:09:52Z

D3 HTML Page

← Older revision		Revision as of 20:09, 14 February 2015
Line 245:		Line 245:
	<source lang="html">		<source lang="html">

	~~<!-- language: html -->~~
	<style>		<style>
	svg { border: 5px solid #333; background-color: #C6ECFF;}		svg { border: 5px solid #333; background-color: #C6ECFF;}

Admin: /* D3 HTML Page */

2015-02-14T20:09:35Z

D3 HTML Page

← Older revision		Revision as of 20:09, 14 February 2015
Line 240:		Line 240:

	Now time for making the D3 HTML page.		Now time for making the D3 HTML page.

			I copied and pasted most of what the example gave, with a few small modifications for my own data. Here's the final HTML file, barrygoldwater.html:

			<source lang="html">

			<!-- language: html -->
			<style>
			svg { border: 5px solid #333; background-color: #C6ECFF;}

			/* TOPO */
			path.Topo_1 { fill:#ACD0A5; stroke: #0978AB; stroke-width: 1px; }
			path.Topo_50 {fill: #94BF8B; }
			path.Topo_100 {fill: #BDCC96; }
			path.Topo_200 {fill: #E1E4B5; }
			path.Topo_500 {fill: #DED6A3; }
			path.Topo_1000 {fill:#CAB982 ; }
			path.Topo_2000 {fill: #AA8753; }
			path.Topo_3000 {fill: #BAAE9A; }
			path.Topo_4000 {fill: #E0DED8 ; }
			path.Topo_5000 {fill: #FFFFFF ; }
			.download {
			background: #333;
			color: #FFF;
			font-weight: 900;
			border: 2px solid #B10000;
			padding: 4px;
			margin:4px;
			}
			</style>
			<body>
			<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
			<script src="http://d3js.org/d3.v3.min.js"></script>
			<script src="http://d3js.org/topojson.v1.min.js"></script>
			<script>


			// 1. -------------- SETTINGS ------------- //
			// Geo-frame_borders in decimal degrees
			var WNES = { "W": 32.0, "N":-113.0, "E": 33.0, "S": -114.0 };

			// Geo values of interest :
			var latCenter = (WNES.S + WNES.N)/2,
			lonCenter = (WNES.W + WNES.E)/2,
			geo_width = (WNES.E - WNES.W),
			geo_height= (WNES.N - WNES.S);
			// HTML expected frame dimensions
			var width = 600,
			height = width * (geo_height / geo_width);

			// Projection: projection, reset scale and translate
			var projection = d3.geo.equirectangular()
			.scale(1)
			.translate([0, 0]);

			// SVG injection:
			var svg = d3.select("body").append("svg")
			.attr("width", width)
			.attr("height", height);

			// Path
			var path = d3.geo.path()
			.projection(projection)
			.pointRadius(4);

			// Data (getJSON: TopoJSON)
			d3.json("barrygoldwater_new.json", showData);

			// 2. ---------- FUNCTION ------------- //
			function showData(error, contours) {

			var contour = topojson.feature(contours, contours.objects.Elev_Contour);

			var onecontour = contour.features.filter(function(d) {
			return d.properties.CONTOURELE === 1840;
			});

			// Focus area box compute for derive scale & translate.
			// [[left, bottom], [right, top]] // E W N S
			var b = path.bounds(contour[0]),
			s = 1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
			t = [(width - s * (b[1][0] + b[0][0])) / 2,
			(height - s * (b[1][1] + b[0][1])) / 2];

			console.log("bounds = "+b);

			// Projection update
			projection
			.scale(s)
			.translate(t);

			console.log("Scale factor = "+s);

			// black border around map
			svg.append("rect").attr('width', width).attr('height', height)
			.style('stroke', 'black').style('fill', 'none');

			svg.selectAll("path")
			.data(contour.features)
			.enter().append("path")
			.attr("d",path)
			.attr("class", function(d) { return "contour contour" + d.properties.CONTOURELE; })
			.style("stroke-width", "1")
			.style("stroke", "black")



			/*
			//Append Topo polygons
			svg.append("path")
			.datum(Levels)
			.attr("d", path)
			svg.selectAll(".levels")
			.data(topojson.feature(fra, fra.objects.levels).features)
			.enter().append("path")
			.attr("class", function(d) { return "contour contour" + d.properties.CONTOURELE; })
			.attr("data-elev", function(d) { return d.properties.name; })
			.attr("d", path)
			*/

			}
			</script>
			<br />
			<div>
			<a class="download ac-icon-download" href="javascript:javascript: (function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://raw.github.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();"><!--⤋--><big>⇩</big> Download</a> -- Works on Chrome. Feedback me for others web browsers ?
			</div>
			<br />
			</body>
			</html>


			</source>

	This failed. I kept seeing errors about the path elements, as well as problems with the computed bounds and scales:		This failed. I kept seeing errors about the path elements, as well as problems with the computed bounds and scales: