All examples By author By category About

ozanyusufoglu

Full window Github gist

zoomable v2

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>"
  <style>
   .background {
  fill: none;
  pointer-events: all;
}

#info {
  position:absolute;
  top: 10px;
  left: 10px;
}

h1 {
  font-family:arial;
  font-size:2em;
  color:#333;
}
#city-layer {
  fill: #ccc;
  cursor: pointer;
}

#city-layer .active {

fill : orange;
}

#city-mesh {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

#town-mesh {
  fill: none;
  stroke: #fff;
  stroke-width: 0.2px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.town {
  fill: #ccc ;
}

.town:hover, .city:hover {
  fill: orange;
}

</style>
</head>

<body>
  <script>
    // feature zooming to polygons : https://bl.ocks.org/mbostock/2206590
// extract administrative geojson for whole turkey
// put the data layer on map

const d3 = require('d3');
const topojson = require('topojson')

var townData = []
var cityData = []

var townGeo = {};
var cityGeo = {};

var width = 700;
var height = 500;
var active = d3.select(null);

var svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

svg.append('rect')
  .attr('class', 'background')
  .attr('width', width)
  .attr('height', height)
  .on('click', reset);

const g = svg.append('g');

const projection = d3.geoMercator()

const zoom = d3.zoom()
  .scaleExtent([1, 8])
  .on("zoom", zoomed);

svg.call(zoom);
var path = d3.geoPath().projection(projection);

var color = d3.scaleThreshold()
  .domain([0, 50, 100, 125, 150, 500, 1000, 2000])
  .range(['rgba(247,251,255,0.8)', 'rgb(222,235,247)', 'rgb(198,219,239)', 'rgb(158,202,225)', 'rgb(107,174,214)', 'rgb(66,146,198)', 'rgb(33,113,181)', 'rgb(8,81,156)', 'rgb(8,48,107)']);

d3.queue()
  .defer(d3.json, './geodata/tr_simple.json')
  .defer(d3.csv, './miscdata/pivot.csv')

.awaitAll(draw)

d3.request("https://localhost:8080/miscdata/tr_pop_per_region.txt")
  .mimeType("application/json")
  .response(function(xhr) {
    return xhr.responseText
  })
  .get(parseTowns)

var cities;
var towns;

function draw(err, results) {

const tr = results[0]; //topojson
  const data = results[1]; // city pop data

console.log('Exported population data:\n', data);

/*  color.domain([

d3.min(data, function(d) {
        return d.population;
      }),
      d3.max(data, function(d) {
        return d.population;
      })
    ]);
  */
  cities = topojson.feature(tr, tr.objects.cities); // carry these to findPolygon
  towns = topojson.feature(tr, tr.objects.towns)

cities.features.map(function(e, i) {

for (let i = 0; i < data.length; i++) {

if (e.properties.NAME_1 === data[i].city) {

var newProps = {

tr_id: data[i].tr_id,
          name: e.properties.NAME_1,
          provider_data : [{
            name: "JTI",
            value: 0
          }, {
            name: "PMI",
            value: 0
          }, {
            name: "IT",
            value: 0
          }, {
            name: "TEKEL",
            value: 0
          }, {
            name: "ET",
            value: 0
          }, {
            name: "BAT",
            value: 0
          }, {
            name: "KTG",
            value: 0
          }, {
            name: "BOGAZICI",
            value : 0
          }],

id: e.properties.ID_1
        }
        return e.properties = newProps;
      }

}

})

console.log(cities)
  projection.fitExtent([
    [0, 0],
    [width, height]
  ], cities);

g.append('g')
    .attr('id', 'town-layer')
    .selectAll('path')
    .data(towns.features)
    .enter()
    .append('path')
    .attr('d', path)
    .attr('class', 'town')
    .on('click', clicked)
    .on('mouseover', function(d) {
      var props = d.properties;
      return document.getElementById('name').innerHTML = props;
    })
  // cities first
    g.append('g')
    .attr('id', 'city-layer')
    .selectAll('path')
    .data(cities.features)
    .enter()
    .append('path')
    .attr('d', path)
    .attr('class', 'city')
    .on('click', clicked)
    .on('mouseover', function(d) {
      var props = d.properties;
      return document.getElementById('name').innerHTML =
        "<pre>" +
        "Name: " + props.name + "\n" +
        "Value: " + props.population + '\n' +
        "ID: " + props.tr_id +
        "</pre>"
    })

update()

g.append('path')
    .datum(topojson.mesh(tr, tr.objects.towns, function(a, b) {
      return a !== b;
    }))
    .attr('id', 'town-mesh')
    .attr('d', path)

g.append('path')
    .datum(topojson.mesh(tr, tr.objects.cities, function(a, b) {
      return a !== b;
    }))
    .attr('id', 'city-mesh')
    .attr('d', path)

}

d3.interval(function(){

d3.request("https://jti-test.tsmgateway.com/api/analytics/location_sales?scope=last_90_days")
    .mimeType("application/json")
    .response(function(xhr) {
      return JSON.parse(xhr.responseText).data
    })
    .get(findPolygon)
    update()
}, 2000)

function clicked(d) {
  if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

var bounds = path.bounds(d),
    dx = bounds[1][0] - bounds[0][0],
    dy = bounds[1][1] - bounds[0][1],
    x = (bounds[0][0] + bounds[1][0]) / 2,
    y = (bounds[0][1] + bounds[1][1]) / 2,
    scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),
    translate = [width / 2 - scale * x, height / 2 - scale * y];

svg.transition()
    .duration(750)
    .call(zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale));;
}

function reset() {
  active.classed("active", false);
  active = d3.select(null);

svg.transition()
    .duration(750)
    .call(zoom.transform, d3.zoomIdentity);
}

function zoomed() {
  g.style("stroke-width", 1.5 / d3.event.scale + "px");
  g.attr("transform", d3.event.transform);

function stopped() {
    if (d3.event.defaultPrevented) d3.event.stopPropagation();
  }
}
/*

// zoom to bounding box v1

function clicked(d) {
  if (active.node() === this) return reset();
  active.classed('active', false);
  active = d3.select(this).classed('active', true);

var bounds = path.bounds(d),
    dx = bounds[1][0] - bounds[0][0],
    dy = bounds[1][1] - bounds[0][1],
    x = (bounds[0][0] + bounds[1][0]) / 2,
    y = (bounds[0][1] + bounds[1][1]) / 2,
    scale = .9 / Math.max(dx / width, dy / height),
    translate = [width / 2 - scale * x, height / 2 - scale * y];

g.transition()
    .duration(750)
    .style('stroke-width', 1.5 / scale + 'px')
    .attr('transform', 'translate(' + translate + ')scale(' + scale + ')');
}

function reset() {
  active.classed('active', false);
  active = d3.select(null);

g.transition()
    .duration(750)
    .style('stroke-width', '1.5px')
    .attr('transform', '');
}
*/
/* Bar chart için

svg.selectAll('rect')
  .data(geojson.features)
  .enter()
  .append('rect')
  .attr('transform', function(d) { return 'translate(' + path.centroid(d) + ')rotate(180)'; })
  .attr('width','10px')
  .attr('height',function(d){
      return d.properties.value * 0.001
}).style('fill', function(d) {
  var value = d.properties.value;
  if (value) {
    return color(value);
  } else {
    return '#ccc';
  }
});

function unwind(topojson) {

console.log('inside');
  topojson.features.forEach(item => {
    if (d3.geoArea(item) > 2 * Math.PI) {
      item.geometry.coordinates = item.geometry.coordinates.map(f => f.map(e => e.reverse()));
      item.properties.error = true;
    }
  })
}

function parseTowns(text) {

var lines = text.split(/\n/);

lines.forEach(function(e) {

let items = e.split(/\s/);

let dataObj = {
      id: items[0],
      name: items[1],
      parent: items[2],
      population: items[3],
      admin_level: 2,

}
    townData.push(dataObj)
  })
}

function findPolygon(salesobj) {

salesobj.forEach(function(sale) {
    var points = [sale.lon, sale.lat]
    console.log(points)

cities.features.forEach(function(feature) {

if (d3.geoContains(feature, points)) {
        feature.properties.provider_data[0].value++
      }

})
  })
}

function update(){

generateRandom();
    d3.select("#city-layer").selectAll('path')
               .data(cities.features)
               .style('fill', function(d) {
                 var value = d.properties.provider_data[0].value
                 if (value) {
                   return color(value);
                 } else {
                   return '#ccc';
                 }
               })
}

function generateRandom(){

console.log(towns.features);
    var istanbul_towns = towns.features.filter(function(feature){

if( feature.properties.NAME_1 == "Istanbul")
                  return feature;
      })

console.log(istanbul_towns);

istanbul_towns.forEach()

}

</script>
</body>

Modified http://d3js.org/topojson.v2.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js