You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
6.9 KiB
210 lines
6.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title></title>
|
|
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
|
|
|
|
<style>
|
|
* {
|
|
font-family:Indie Flower;
|
|
letter-spacing:0.7px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul {
|
|
background:#f7f7f7;
|
|
border:1px solid #e0e0e0;
|
|
left:0;
|
|
list-style-type:none;
|
|
padding:5px;
|
|
position:absolute;
|
|
top:0;
|
|
}
|
|
|
|
.subunit.SCT { fill: #ddc; }
|
|
.subunit.WLS { fill: #cdd; }
|
|
.subunit.NIR { fill: #cdc; }
|
|
.subunit.ENG { fill: #dcd; }
|
|
.subunit.IRL { display: none; }
|
|
|
|
.subunit-boundary {
|
|
fill: none;
|
|
stroke: #f00;
|
|
stroke-dasharray: 2,2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.subunit-boundary.IRL {
|
|
stroke: #aaa;
|
|
}
|
|
|
|
.place-label {
|
|
font-size:11px;
|
|
left:20px;
|
|
}
|
|
|
|
.subunit-label {
|
|
fill: #777;
|
|
fill-opacity: .5;
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
text-anchor: middle;
|
|
}
|
|
|
|
svg {
|
|
/*background: #098347;*/
|
|
margin:100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- <ul>
|
|
<li>✓ Render any map</li>
|
|
<li>✓ Finish Bostock tutorial</li>
|
|
<li>☐ Render the ocean map</li>
|
|
<li>☐ Extract only CA coastline from ocean map</li>
|
|
<li>☐ Find how to render something at a point</li>
|
|
<li>☐ Find how to draw a flat line</li>
|
|
<li>☐ Get feed of ocean temperatures</li>
|
|
http://www.ndbc.noaa.gov/data/realtime2/46237.txt (last 26? days)
|
|
http://www.ndbc.noaa.gov/station_history.php?station=46237 (historical)
|
|
http://cdip.ucsd.edu/?nav=historic&sub=data&stn=142&stream=p1
|
|
http://cdip.ucsd.edu/?nav=documents&sub=index&units=metric&tz=UTC&pub=public&map_stati=1,2,3&xitem=arch
|
|
<li>☐ Get locations of CA buoys</li>
|
|
</ul> -->
|
|
|
|
<svg width='500px' height='500px' id='svg'>
|
|
<defs>
|
|
<linearGradient id="fillR" gradientUnits="userSpaceOnUse" x1="200" y1="200" x2="0" y2="0">
|
|
<stop offset="0%" stop-color="#f00" />
|
|
<stop offset="100%" stop-color="#fff" stop-opacity="0" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="fillG" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="100" y2="200">
|
|
<stop offset="0%" stop-color="#0f0" />
|
|
<stop offset="100%" stop-color="#fff" stop-opacity="0" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="fillB" gradientUnits="userSpaceOnUse" x1="0" y1="200" x2="150" y2="100">
|
|
<stop offset="0%" stop-color="#00f" />
|
|
<stop offset="100%" stop-color="#fff" stop-opacity="0" />
|
|
</linearGradient>
|
|
|
|
<filter id="triblend">
|
|
<feImage xlink:href="#pathA" result="layerA" x="0" y="0" />
|
|
<feComposite in="layerA" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1.0" k3="1.0" k4="0" />
|
|
</filter>
|
|
</defs>
|
|
|
|
<g stroke="none" stroke-width="0" shape-rendering="crispEdges" >
|
|
<path d='M100,0 L200,200 L0,200 Z' fill='url(#fillR)' id='pathA'></path>
|
|
<path d='M100,0 L200,200 L0,200 Z' fill='url(#fillG)' id='pathB'></path>
|
|
<path d='M100,0 L200,200 L0,200 Z' fill='url(#fillB)'></path>
|
|
</g>
|
|
|
|
<!--
|
|
<path d='M100,0 L300,0 L200,200 Z' fill='#f438ff' id='triangle2'></path>
|
|
<path d='M0,200 L200,200 L100,400 Z' fill='#897457' id='triangle3'></path>
|
|
<path d='M200,200 L300,400 L100,400 Z' fill='#88aaef' id='triangle4'></path>
|
|
<path d='M300,0 L400,200 L200,200 Z' fill='#99ea21' id='triangle5'></path>
|
|
<path d='M200,200 L400,200 L300,400 Z' fill='#845879' id='triangle6'></path>
|
|
-->
|
|
</svg>
|
|
|
|
<script>
|
|
var svg = document.getElementById('svg');
|
|
</script>
|
|
|
|
|
|
|
|
<!-- <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
|
<script src="//d3js.org/topojson.v1.min.js"></script> -->
|
|
|
|
|
|
<!--
|
|
DISCUSS:
|
|
gourad / phong?
|
|
feImage
|
|
-->
|
|
|
|
<script>
|
|
// var file = 'uk-topo.json';
|
|
// var file = 'ocean-geo.json';
|
|
|
|
// d3.json(file, function(error, mapJson) {
|
|
// // if (error) return console.error(error);
|
|
|
|
// var projection =
|
|
// //d3.geo.albers()
|
|
// d3.geo.mercator()
|
|
// // .center([0, 55.4])
|
|
// // .rotate([4.4, 0])
|
|
// // .parallels([50, 60])
|
|
// .scale(200)
|
|
// .translate([w / 2, h / 2]);
|
|
|
|
// var path = d3.geo.path().projection(projection);
|
|
|
|
// svg.selectAll('.subunit')
|
|
// .data(mapJson.features)
|
|
// .enter().append('path')
|
|
// .attr('class', function(d) {
|
|
// console.log(d);
|
|
// return 'subunit ' + d.id;
|
|
// })
|
|
// .attr('d', path);
|
|
|
|
// // svg.selectAll('.subunit')
|
|
// // .data(topojson.feature(uk, uk.objects.subunits).features)
|
|
// // .enter().append('path')
|
|
// // .attr('class', function(d) {
|
|
// // return 'subunit ' + d.id;
|
|
// // })
|
|
// // .attr('d', path);
|
|
|
|
// // svg.append("path")
|
|
// // .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL"; }))
|
|
// // .attr("d", path)
|
|
// // .attr("class", "subunit-boundary");
|
|
|
|
// // svg.append("path")
|
|
// // .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === "IRL"; }))
|
|
// // .attr("d", path)
|
|
// // .attr("class", "subunit-boundary IRL");
|
|
|
|
// // svg.append("path")
|
|
// // .datum(topojson.feature(uk, uk.objects.places))
|
|
// // .attr("d", path)
|
|
// // .attr("class", "place");
|
|
|
|
// // svg.selectAll(".place-label")
|
|
// // .data(topojson.feature(uk, uk.objects.places).features)
|
|
// // .enter().append("text")
|
|
// // .attr("class", "place-label")
|
|
// // .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
|
|
// // .attr("dy", ".35em")
|
|
// // .text(function(d) { return d.properties.name; });
|
|
|
|
// // svg.selectAll(".subunit-label")
|
|
// // .data(topojson.feature(uk, uk.objects.subunits).features)
|
|
// // .enter().append("text")
|
|
// // .attr("class", function(d) { return "subunit-label " + d.id; })
|
|
// // .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
|
|
// // .attr("dy", ".35em")
|
|
// // .text(function(d) { return d.properties.name; });
|
|
// });
|
|
|
|
// var h = 800;
|
|
// var w = 800;
|
|
|
|
// var svg = d3.select("body").append("svg")
|
|
// .attr('x', 500)
|
|
// .attr("width", w)
|
|
// .attr("height", h);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|