উপবৃত্ত খামের ডেটা-এর D3 মানচিত্র তৈরি করা

Question

আমার এই ডেটাসেটটি রয়েছে যার উপবৃত্ত রয়েছে, আরও নির্দিষ্টভাবে উপবৃত্তাকার "খামগুলি"। আমি ভাবছিলাম যে কারও কাছে আমি কীভাবে ডি 3 মানচিত্রে এগুলি আঁকতে পারি তার বিষয়ে পরামর্শ আছে কিনা। আমার ইতিমধ্যে মেরেটার অভিক্ষেপ সহ একটি মানচিত্র সেটআপ আছে। এই স্ট্যাকওভারফ্লো উত্তরের একটি ক্রিয়েলিপস ফাংশন রয়েছে যা আমাকে কাছে পেয়েছে তবে আমি নিশ্চিত করতে চাই যে আমি ডেটাটি সঠিকভাবে ব্যাখ্যা করছি।

আমি ডেটা থেকে উপবৃত্তের প্রধান / গৌণ অক্ষের মানগুলিতে প্লাগ করেছি এবং আবর্তনের জন্য আজিমুথ ব্যবহার করেছি, এটি কি সঠিক হবে? আমি আসলে "খাম" অংশটি বুঝতে পারি না। প্রতিটি জোনের বেশ কয়েকটি উপবৃত্ত কীভাবে একটি একক সঙ্গতিপূর্ণ আকার তৈরি করতে পারে?

কোন পরামর্শ প্রশংসা হবে।

  const margin  = {top:0, right:0, bottom:0, left:0},
        width   = 1000 - margin.left - margin.right,
        height  = 800  - margin.top - margin.bottom;

  const svg = d3.select('body')
      .append('svg')
      .attr('width', '100%')
      .attr('height', '100%')
      .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`);

  const chart = svg.append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

  //a/b are ellipse axes, x/y is center
  const createEllipse = function createEllipse(a, b, x = 0, y = 0, rotation = 0) {
    let k = Math.ceil(36 * (Math.max(a/b,b/a))); // sample angles
    let coords = [];
    for (let i = 0; i <= k; i++) {
      let angle = Math.PI*2 / k * i + rotation;
      let r = a * b / Math.sqrt(a*a*Math.sin(angle)*Math.sin(angle) + b*b*Math.cos(angle)*Math.cos(angle));
      coords.push(getLatLong([x,y],angle,r));
    }
    return { 'type':'Polygon', 'coordinates':[coords] };
  }

  const getLatLong = function getLatLong(center,angle,radius) {
    let rEarth = 6371; // kilometers
    x0 = center[0] * Math.PI / 180; // convert to radians.
    y0 = center[1] * Math.PI / 180;
    let y1 = Math.asin( Math.sin(y0)*Math.cos(radius/rEarth) + Math.cos(y0)*Math.sin(radius/rEarth)*Math.cos(angle) );
    let x1 = x0 + Math.atan2(Math.sin(angle)*Math.sin(radius/rEarth)*Math.cos(y0), Math.cos(radius/rEarth)-Math.sin(y0)*Math.sin(y1));
    y1 = y1 * 180 / Math.PI;
    x1 = x1 * 180 / Math.PI;
    return [x1,y1];
  } 


  d3.json('https://media.journalism.berkeley.edu/upload/2019/11/kazakhstan.json').then((data) => {

      const ellipses = [
        {lat: 48.6,    lng: 64.7,     axis_x: 30, axis_y: 16, azimuth: 26.5, area_hectar: 0.0713,  zone: 'U1'},
        {lat: 48.625,  lng: 64.625,   axis_x: 30, axis_y: 16, azimuth: 26.5, area_hectar: 0.0713,  zone: 'U1'},
        {lat: 48.366,  lng: 65.44166, axis_x: 50, axis_y: 30, azimuth: 40,   area_hectar: 0.11775, zone: 'U2'},
        {lat: 48.85,   lng: 65.61666, axis_x: 20, axis_y: 22, azimuth: 29,   area_hectar: 0.17584, zone: 'U3'},
        {lat: 48.9333, lng: 65.8,     axis_x: 22, axis_y: 22, azimuth: 28,   area_hectar: 0.17584, zone: 'U3'},
        {lat: 48.9166, lng: 66.05,    axis_x: 50, axis_y: 20, azimuth: 38,   area_hectar: 0.17584, zone: 'U3'},
        {lat: 48.9166, lng: 65.68333, axis_x: 20, axis_y: 22, azimuth: 29,   area_hectar: 0.17584, zone: 'U3'},
        {lat: 49,      lng: 65.86666, axis_x: 22, axis_y: 22, azimuth: 29,   area_hectar: 0.17584, zone: 'U3'}
      ]

      const projection = d3.geoMercator()
        .fitExtent([[0,0],[width,height]], data)

      const path = d3.geoPath()
        .projection(projection);


      chart.selectAll('path')
        .data(data.features)
        .enter()
        .append('path')
        .attr('d',  path)
        .attr('stroke', 'black')
        .attr('strok-width', '1px')
        .attr('fill', 'none');

      chart.selectAll(".ellipses")
        .data(ellipses.map((d) => createEllipse(d.axis_x, d.axis_y, d.lng, d.lat, d.azimuth)))
        .enter()
        .append('path')
        .attr('d', path)
        .attr('stroke', 'black')
        .attr('stroke-width', '1px')
        .attr('fill', 'orange');

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="chart"></div>

Answer 1

দেখে মনে হচ্ছে আপনি ফলাফলগুলি প্রায় সঠিকভাবে ব্যাখ্যা করছেন।

একটি ত্রুটি যা আমি স্থির করেছি তা হ'ল আপনার কোডটি আজিমুথকে বিবেচনা করে না।

আর একটি সম্ভাব্য সমস্যা অক্ষের সাথে সম্পর্কিত হতে পারে। প্রদত্ত সারণীতে তাদের "অক্ষের মাত্রা" হিসাবে নামকরণ করা হয়েছে যা উপবৃত্তাকার মাত্রার মতো শোনায়, যখন ক্রিয়েটলিপস ফাংশনটি রেডিয়াসকে প্যারাম হিসাবে গ্রহণ করে। দয়া করে উপরে বর্ণিত সমস্যাগুলি স্থির করে ভিজুয়ালাইজেশনের জুমটি দেখুন । হাওয়ার অন টুলটিপ রেফারেন্সের জন্য যুক্ত করা হয়।

তৃতীয় সমস্যাটি তর্কযোগ্য এবং টেবিলে প্রতিষ্ঠিত ডেটা ফর্ম্যাটের উপর নির্ভর করে। আমি বলতে চাই যে এক্স সবসময় দ্রাঘিমাংশ এবং y - অক্ষাংশ মানে না। তবে যৌক্তিকভাবে মনে হয় যে উপবৃত্তাকার দীর্ঘ মানগুলি ("x" মানগুলি বড় বা "y" মানের সমান) অনুভূমিক দিকের সাথে মিলিত হওয়া উচিত।

পার্শ্ব দ্রষ্টব্য হিসাবে: প্রাক্কলিত পৃথিবী ব্যাসার্ধের ব্যবহারের মাধ্যমে ভিজ্যুয়ালাইজেশনের নির্ভুলতাও প্রভাবিত হয় তবে এটি সামান্য।

"খাম" দ্বারা এখানে সম্ভবত সম্ভবত বোঝানো হয়েছে যে উপবৃত্তের কিছু নির্দিষ্ট আগ্রহের ক্ষেত্রের অভ্যন্তরীণ অবস্থান রয়েছে, এই বিবেচনা করে যে প্রদত্ত অঞ্চলের মানগুলি উপবৃত্তের ক্ষেত্রের চেয়ে অনেক ছোট।

Comments

এটি প্রচুর সাহায্য করে। উত্তর এবং কোড নমুনার জন্য আপনাকে ধন্যবাদ! আমি ডেটাসেটে আরও তথ্য পাচ্ছি। (এটি রকেটের ধ্বংসাবশেষে পড়ে যাওয়ার তথ্য) সুতরাং, আমি বিশ্বাস করি খামটি এমন এক অঞ্চলে যেখানে সমস্ত উপবৃত্ত থাকে।

— জুন 23