San Jose Neighborhood housing prices year 2016

Neighborhood in San jose and Housing prices data.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js"></script>
  <script src="https://d3js.org/d3-queue.v2.min.js"></script>

svg {
      width:50%;
      height:100%;
      float: left;
    }

circle.airbnb {
      fill: #e00007;
      opacity: 0.6;
    }

.axis {
      font-family: arial;
      font-size: 0.7em;
    }
    
    text {
      fill: black;
      stroke: none;
    }
      
    .label {
      font-size: 1.5em;
    }
      
    path {
      fill: none;
      stroke: black;
      stroke-width: 2px;
    }
    .tick {
      fill: none;
      stroke: black;
    }
    
    circle {
      opacity: 0.9;
      stroke: none;
      fill: red;
    }
    
    .line {
      fill: none;
      stroke: #e00007;
      stroke-width: 1px;
    }

/*body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }*/
  </style>

var margin = 75,
        width = 450 - margin,
        height = 500 - margin;
    // var margin = 75,
    //     width = 960 - margin,
    //     height = 500 - margin;
  
    // append SVG to page
    // var svg = d3.select("body")
    //     .append("svg")
    //       .attr("width", width + margin)
    //       .attr("height", height + margin)
    //     .append('g')
    //       .attr('class', 'map');

var projection = d3.geo.mercator()
                          .center([-121.88646, 37.34141])
                          .scale(100000)
                          .translate([width / 1.95, height / 1.65]);
    
    // var neighborhood_boundary = d3.geo.path().projection(projection);

// create a path to draw the neighborhoods
    var path = d3.geo.path()
                     .projection(projection);

var format = d3.time.format("%m/%d/%Y");

// svg.append("text")
    //     .attr("x", (width / 2))       
    //     .attr("y", 0 - (margin.top / 2))
    //     .attr("text-anchor", "middle")  
    //     .style("font-size", "16px") 
    //     .style("text-decoration", "underline")  
    //     .text("Value vs Date Graph");

// create and append the map of SF neighborhoods
    var map = d3.select('#map').selectAll('path')
                 .data(data[0].features)
                 .enter()
                 .append('path')
                 .attr('d', path)
                 .style('fill', '#eee')
                 .style('stroke', 'black')
                 .style('stroke-width', 1);
    console.log(data[0]);

// map.datum(function(d){
    //   var normalized= d.properties.name
    //                     .replace(/ /g, '_')
    //                     .replace(/\//g, '_');
    //   d.properties.name = normalized;
    //   return d;
    // });

map.attr('class', function(d){
        return d.properties.name;
    })

//d3.json("housingarea.json", function(data) {
          // find the min/max of listing per neighborhood
    var listings_extent = d3.extent(d3.values(data[1]));
    // console.log(listings_extent);
    // console.log(data[1]);

var newData = {};

Object.keys(data[1]).forEach(function(key) {
        // newKey = key.replace(/ /g, '_')
        //                 .replace(/\//g, '_');
        newData[key] = parseFloat(data[1][key]);
        // console.log(key, parseFloat(data[1][key]));
    });

console.log(newData);
    // for(var ky in data[1]){
    //   val = data[1][ky];
    //   // fVal = parseInt(val)
    //   console.log(val, ky);
    // };
    
    // append a bubble to each neighborhood
    var bubbles = d3.select('#map').append("g")
           .attr("class", "bubble")
           .selectAll("circle")
           .data(data[0].features)
           .enter()
           .append("circle")
           .attr('class', 'airbnb');
          
          // add the listing data to each neighborhood datum
    bubbles.datum(function(d) {
      d.count = (newData[d.properties.name]);
      console.log(d.properties.name, d, d.count);
      return d;
    });
          //});
 // scale each bubble with a sqrt scale
    var radius = d3.scale.linear() //pow().exponent(0.00000000001)
                   .domain(listings_extent)
                   .range([3, 6]);

// transform each bubbles' attributes according to the data 
    bubbles
       .attr("cx", function(d) { return path.centroid(d.geometry)[0]; })
       .attr("cy", function(d) { return path.centroid(d.geometry)[1]; })
       .attr("r", function(d) { return radius(d.count); });

//});

//sanjose_ts_prices_c.csv
      d3.select("#map")
              .append("text")
              .attr("x", (width / 2))       
              .attr("y", (margin/ 2))
              .attr("text-anchor", "middle")  
              .style("font-family", "futura")
              .style("font-size", "1.5em") 
              .text("Neighborhood's in San Jose.")

// initialize the Mission as the default neighborhood
        var field = "Willow Glen";

// maximum reviews
        var max_y = d3.max(data[2], function(d) {
            var max = 0;

d3.values(d).forEach(function(i) {
              if (+i && (+i > max)) {
                max = +i;
              }
            });

return max;
        });

// Create y-axis scale mapping price -> pixels
        var measure_scale = d3.scale.linear()
            .range([height, 100])
            .domain([0, max_y]);

// Create D3 axis object from measure_scale for the y-axis
        var measure_axis = d3.svg.axis()
            .scale(measure_scale)
            .orient("right");

// Append SVG to page corresponding to the D3 y-axis
        d3.select('#chart').append('g')
              .attr('class', 'y axis')
              .attr("transform", "translate(" + width + " , -15)")
              .call(measure_axis);

// add label to y-axis
        d3.select(".y.axis")
              .append("text")
              .attr('class', 'label')
              .text("House prices in $")
              .attr("transform", "translate(70,215) rotate(90)");

// create a function to draw the timeseries for each neighborhood
        var drawChart = function(field) {
          // remove the previous chart
          d3.select('#chart').select('.x.axis').remove();
          d3.select('#chart').select('path').remove();

// update the title
          d3.select('#heading')
            .text(field.replace(/_/g, ' '));

// remove missing values
          var neigh_data = data[2].filter(function(d) {
            return d[field];
          });

// get min/max dates
          var time_extent = d3.extent(neigh_data, function(d){
            return format.parse(d['timestamp']);
          });

// Create x-axis scale mapping dates -> pixels
          var time_scale = d3.time.scale()
              .range([0, width - margin])
              .domain(time_extent);

// Create D3 axis object from time_scale for the x-axis
          var time_axis = d3.svg.axis()
              .scale(time_scale)
              .tickFormat(d3.time.format("%b '%y"));
              // .ticks(20);

// Append SVG to page corresponding to the D3 x-axis
          d3.select('#chart').append('g')
              .attr('class', 'x axis')
              .attr('transform', "translate(" + margin + ',' + (height - 15) + ")")
              .call(time_axis)
          .selectAll("text")
            .attr("y", 0)
            .attr("x", 9)
            .attr("dy", ".35em")
            .attr("transform", "rotate(90)")
            .style("text-anchor", "start");

// define the values to map for x and y position of the line
          var line = d3.svg.line()
                       .x(function(d) { return time_scale(format.parse(d['timestamp'])); })
                       .y(function(d) { return measure_scale(+d[field]); });

// append a SVG path that corresponds to the line chart
          d3.select('#chart').append("path")
            .datum(neigh_data)
            .attr("class", "line")
            .attr("d", line)
            .attr('transform', 'translate(' + margin + ', -25)');
        };

drawChart(field);

// create a callback for the neighborhood hover
        var mover = function(d) {
          var neigh = d.properties.name;
          d3.select('#map path.' + neigh).style('fill', 'black');

drawChart(neigh);
        };

// create a callback for the neighborhood hover
        var mout = function(d) {
          var neigh = d.properties.name;
          d3.select('path.' + neigh).style('fill', '#eee');
        }

// attach events to neighborhoods in map
        map.on("mouseover", mover);
        map.on("mouseout", mout);

// attach events to bubbles on map
        bubbles.on('mouseover', mover);
        bubbles.on('mouseout', mout);

}

</script>
</head>

<body>
 <svg id="map"></svg>
    <svg id="chart">
      <text x="50%" y="50" id="heading" font-size="1.5em" text-anchor="middle" font-family="futura">SJ</text>
  </svg>
<script>
// load data with queue
    var url1 = "sanjose.geojson";
    var url2 = "housingarea.json";
    var url3 = "sanjose_ts_prices_c.csv";

var q = d3_queue.queue(3)
                    .defer(d3.json, url1)
                    .defer(d3.json, url2)
                    .defer(d3.csv, url3)
                    .awaitAll(draw);
    console.log(q);
// d3.json("https://localhost:8000/sanjose.geojson", draw);
</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js

https://d3js.org/d3-queue.v2.min.js