Neighborhood in San jose and Housing prices data.
xxxxxxxxxx<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> <style> body, html { width: 960px; height: 100%; } 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> <script> var draw = function(error, data) { // Feel free to change or delete any of the code you see! 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