Skip to content

Commit

Permalink
added marker; next up: clipping
Browse files Browse the repository at this point in the history
  • Loading branch information
@blehman
blehman committed Mar 2, 2017
1 parent 48523b8 commit 3ad325e
Show file tree
Hide file tree
Showing 7 changed files with 214 additions and 54 deletions.
12 changes: 10 additions & 2 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,18 @@ form {
}

.active {
stroke: #000;
stroke-width: 2px;
fill: none;
fill-opacity: 0.10;
stroke-width: 4px;
stroke: green;
stroke-opacity:0.50
}

#legend_pointer{
fill:#000;
}


/*
#yearSlider path.domain{
stroke: none;
Expand Down
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,11 @@
<script src="js/gradient_legend.js"></script>
<script src="js/year_slider.js"></script>
<script src="js/homes.js"></script>
<script src="js/d3-polygon-clip.js"></script>
</head>

<div id="non-svg-elements">
<canvas width="880" height="1" style="opacity:0.80;position:absolute;width:510px;height:8px;margin:65px 85px;background:#ccc;"></canvas>
<canvas height="1" style="opacity:0.80;position:absolute;width:510px;height:6px;margin:65px 86px;background:#ccc;"></canvas>
</div>
<body>
<!-- Run App -->
Expand Down
7 changes: 6 additions & 1 deletion js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
// get data
d3.queue()
.defer(d3.json, "data/us.json")
//.defer(d3.json, "data/us-10m.v1.json")
//.defer(d3.json, "data/10m.json")
//.defer(d3.json, "http://bl.ocks.org/mbostock/raw/4090846/us.json")
//.defer(d3.tsv, "wmo_latlon.tsv")
.defer(d3.csv,"data/wmo2latlon.csv")
Expand All @@ -14,7 +16,8 @@
var margin = { top: 0.10, right: 0.10, bottom: 0.10, left: 0.10 }
, svg_width = 960
, svg_height = 600
, map_size = {"width": svg_width * 0.5, "height":svg_height * 0.5};
, map_size = {"width": svg_width * 0.5, "height":svg_height * 0.5}
, startYear = "1980";

var polygon_fill_opacity = 0.60;

Expand Down Expand Up @@ -59,6 +62,7 @@
vMap.polygon_opacity(polygon_fill_opacity)
vMap.height(map_size.height)
vMap.width(map_size.width)
vMap.filterYear(startYear)

// create an instance of GradientLegend
var gLegend = GradientLegend();
Expand All @@ -71,6 +75,7 @@

// create an instance of YearSlider
var ySlider = YearSlider();
ySlider.filterYear(startYear)

// create an instance of YearSlider
var iHomes = Homes();
Expand Down
68 changes: 68 additions & 0 deletions js/d3-polygon-clip.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
// Version 0.0.0. Copyright 2017 Mike Bostock.
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.d3 = global.d3 || {})));
}(this, function (exports) { 'use strict';

// Clips the specified subject polygon to the specified clip polygon;
// requires the clip polygon to be counterclockwise and convex.
// https://en.wikipedia.org/wiki/Sutherland–Hodgman_algorithm
exports.polygonClip = function(clip, subject) {
var input,
closed = polygonClosed(subject),
i = -1,
n = clip.length - polygonClosed(clip),
j,
m,
a = clip[n - 1],
b,
c,
d;

while (++i < n) {
input = subject.slice();
subject.length = 0;
b = clip[i];
c = input[(m = input.length - closed) - 1];
j = -1;
while (++j < m) {
d = input[j];
if (polygonInside(d, a, b)) {
if (!polygonInside(c, a, b)) {
subject.push(polygonIntersect(c, d, a, b));
}
subject.push(d);
} else if (polygonInside(c, a, b)) {
subject.push(polygonIntersect(c, d, a, b));
}
c = d;
}
if (closed) subject.push(subject[0]);
a = b;
}

return subject;
};

function polygonInside(p, a, b) {
return (b[0] - a[0]) * (p[1] - a[1]) < (b[1] - a[1]) * (p[0] - a[0]);
}

// Intersect two infinite lines cd and ab.
function polygonIntersect(c, d, a, b) {
var x1 = c[0], x3 = a[0], x21 = d[0] - x1, x43 = b[0] - x3,
y1 = c[1], y3 = a[1], y21 = d[1] - y1, y43 = b[1] - y3,
ua = (x43 * (y1 - y3) - y43 * (x1 - x3)) / (y43 * x21 - x43 * y21);
return [x1 + ua * x21, y1 + ua * y21];
}

// Returns true if the polygon is closed.
function polygonClosed(coordinates) {
var a = coordinates[0],
b = coordinates[coordinates.length - 1];
return !(a[0] - b[0] || a[1] - b[1]);
}

Object.defineProperty(exports, '__esModule', {value: true});
}));
35 changes: 30 additions & 5 deletions js/gradient_legend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,36 @@ function GradientLegend(){

function chart(selection) {
selection.each(function(data) {
console.log(choroplethScale)
console.log(data)
var wmoVintage2energy = data["wmoVintage2energy"]
console.log(wmoVintage2energy)

var legend = d3.select(this)
.attr("transform","translate(85,65)");

// create some definitions
var defs = legend.append("defs");
// create some definitions
var defs = legend.append("defs");
// create arrow marker
defs.append("marker")
.attr("id", "legend_pointer")
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5")
.attr("fill","none");
// create arrow
legend.append("line")// attach a line
.attr("id","pointer_line")
.style("stroke", "none")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", 1)
.attr("marker-end","url(#legend_pointer)");
/*
RED
#d73027
Expand All @@ -29,6 +53,7 @@ function GradientLegend(){
Green
*/
// define a linear gradient
/*
var linearGradient = defs.append("linearGradient")
.attr("id","map-color-gradient")
//.attr("gradientUnits", "userSpaceOnUse")
Expand All @@ -54,7 +79,7 @@ function GradientLegend(){
.attr("width",width)
.attr("height",height)
.style("fill","url(#map-color-gradient)");

*/
// legend scale
var x = d3.scaleLinear()
.domain(d3.extent(domain))
Expand All @@ -73,7 +98,7 @@ function GradientLegend(){
.range(["#8e0152", "#c51b7d", "#de77ae", "#f1b6da", "#fde0ef", "#f7f7f7", "#e6f5d0", "#b8e186", "#7fbc41", "#4d9221", "#276419"]); // PiYG
*/
var range = ["#8e0152", "#c51b7d", "#de77ae", "#f1b6da", "#fde0ef", "#f7f7f7", "#e6f5d0", "#b8e186", "#7fbc41", "#4d9221", "#276419"];
var delta = (50000-10000)/range.length
var delta = (domain[1]-domain[0])/range.length
, min = domain[0]
, choroplethScale_range = range.map((d,i) => choroplethScale(min+(i*delta)))
var image = context.createImageData(canvasWidth, 1),
Expand Down
95 changes: 66 additions & 29 deletions js/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ function NewMap(){
var consumption_extent,
choroplethScale;

var filterYear="1980";

function chart(selection) {
selection.each(function(map_data) {
console.log(map_data)
Expand All @@ -41,11 +43,9 @@ function NewMap(){
, postalcode2wmo = map_data["postalcode2wmo"]
, zip2wmo = map_data["zip2wmo"]
, wmoVintage2energy = map_data["wmoVintage2energy"]
, vintage2nationalTotal = map_data["vintage2nationalTotal"];

// find extent of total consumption by wmo
var filterYear = "1950"
, vintage2nationalTotal = map_data["vintage2nationalTotal"]
, consumption = [];
// find extent of total consumption by wmo
Object.keys(wmoVintage2energy).map(function(d){
year = d.slice(9,13);
//console.log(wmoVintage2energy[d].total_consumption_KWH)
Expand All @@ -63,6 +63,10 @@ function NewMap(){
, consumption_domain = [consumption_min,consumption_mid, consumption_max]
, consumption_delta = (consumption_max-consumption_min)/6;

var legendAxisScale =d3.scaleLinear()
.domain(d3.extent(consumption_extent))
.range([0,510])

/*
choroplethScale = d3.scaleLinear()
.domain([
Expand Down Expand Up @@ -110,6 +114,8 @@ function NewMap(){
.projection(projection)
.pointRadius(1.5);

//var path = d3.geoPath();

// pack meta_data
usaf.forEach(function(d) {
//console.log(d)
Expand All @@ -130,8 +136,24 @@ function NewMap(){
.attr("transform","translate(100,100)");

// build map elements
/*
var path = d3.geoPath()
viz_g.append("path")
.attr("stroke", "#aaa")
.attr("stroke-width", 0.5)
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); })));
viz_g.append("path")
.attr("stroke-width", 0.5)
.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
viz_g.append("path")
.attr("d", path(topojson.feature(us, us.objects.nation)));
*/
viz_g.append("path")
.datum(topojson.feature(us, us.objects.land))
//.datum(topojson.feature(us, us.objects.nation))
.attr("class", "land")
.attr("d", path);

Expand Down Expand Up @@ -164,6 +186,9 @@ function NewMap(){
var v = voronoi(usaf)
, poly = v.polygons();

//var test = poly.map(d => );
//console.log()

var vData = v.cells.map(function(d,i){
//console.log(d)
var key = "("+d.site.data.usaf+", "+filterYear+")"
Expand Down Expand Up @@ -194,39 +219,45 @@ function NewMap(){
return polygon_coords ? "M" + polygon_coords.join("L") + "Z" : null;
})


polygons
/*
.transition()
.delay(3000)
.duration(3000)
.style("stroke-width","1px")
.style("stroke","red")
.transition()
.delay(2000)
.duration(4000)
*/
.style("stroke-width","0.15px")
.style("stroke","#999")
/*
.transition()
.delay(1000)
.duration(5000)
*/
.style("fill", d => d.color)
/*
.style("fill-opacity", 0.10)
.transition()
.duration(2000)
*/
.style("fill-opacity",polygon_opacity);
//.style("fill-opacity", d => d.opacity)

polygons.on("click",function(d){
var click = d.click==d.opacity ? 0:d.opacity;
d3.select(this).style("fill-opacity", click)
d.click = click
var click = d.click==d.opacity ? 0:d.opacity;
d3.select(this).style("fill-opacity", click)
d.click = click
})

polygons.on('mouseout', function(d){
console.log(d)
d3.select("#legend_pointer")
.style("opacity",1)
.style("fill-opacity",1)
.style("fill","none")
.style("stroke","none")

})
polygons.on('mouseover', function(d){
d3.select("#legend_pointer")
.style("opacity",1)
.style("fill-opacity",1)
.style("fill","#000")
.style("stroke","#000")

var key = "("+d.wmo_id.split("_")[2]+", "+filterYear+")";
var wmo_consumption = wmoVintage2energy[key].total_consumption_KWH;
var xValue = legendAxisScale(wmo_consumption);
console.log(wmo_consumption)
d3.select("#pointer_line")
.attr("x1",xValue)
.attr("x2",xValue)

})


/* .attr("d", function(d) {
console.log(d)
var value = "M" + d
Expand Down Expand Up @@ -271,7 +302,13 @@ function NewMap(){
choroplethScale = c;
return chart;
};
chart.filterYear= function(y) {
if (!arguments.length) { return filterYear; }
filterYear = y;
return chart;
};

// end NewMap
return chart
}

Loading

0 comments on commit 3ad325e

Please sign in to comment.