মানচিত্রের জন্য ডি 3 --- জিওতে ডেটা আনতে কোন পর্যায়ে?


12

আমি D3, একটি লা সহ প্রদর্শন করার জন্য একটি বিশ্ব চিরোপিলিটি মানচিত্র করতে চাই:

আমার কাছে একটি ডেটাসেট রয়েছে যা আমি আইএসও-আলফা -3 কীগুলিতে তৈরি করতে চাই। তাই ...

danger.csv
iso,level
AFG,100
ALB,0
DZA,12

প্রভৃতি

টপোজসনের নির্দেশাবলী অনুসরণ করে, আমি জানি যে আমি এটি করতে পারি ...

wget "http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_0_countries.zip"
unzip ne_50m_admin_0_countries.zip
ogr2ogr -f "GeoJSON" output_features.json ne_50m_admin_0_countries.shp -select iso_a3
topojson -o topo.json output_features.json --id-property iso_a3

ISO3 দ্বারা ID'd হয় এমন একটি ওয়ার্ল্ডম্যাপ জসন তৈরি করতে।

আমার প্রশ্ন হ'ল: কার্যপ্রবাহের কোন পর্যায়ে আমি ভূ-উপাত্তের সাথে বিপদ। সিএসভি থেকে ডেটা মার্জ করব? আমি এর আগে জিজিআই হিসাবে কিউজিআইএস-এর সাথে কাজ করেছি, তবে কোথায় / হওয়া উচিত / সংহতটি হবে? .Shp এ? Ogr2ogr পরে? ক্রমশঃ টপোজসন সঙ্কুচিত হওয়ার পরে ব্রাউজারে (যেমন http://bl.ocks.org/mbostock/4060606 http://bl.ocks.org/mbostock/3306362 )?

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

(স্ট্যাকওভারফ্লো সম্পর্কে আমার একটি সম্পর্কিত, তবে আরও জড়িত ফলোআপ রয়েছে যা সম্ভবত আমার এখানে স্থানান্তরিত হওয়া উচিত: /programming/18604877/how-to-do-time-data-in-d3-maps )


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

উত্তর:


11

নিজেকে দুটি প্রশ্ন জিজ্ঞাসা করুন:

  1. আপনি কি একাধিক ডেটাসেটে ভূগোলটি পুনরায় ব্যবহার করতে যাচ্ছেন?

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

    অন্যদিকে, আপনি যদি কেবলমাত্র এই ভূগোলটি একবার ব্যবহার করেন , তবে কোডটি সরল করার জন্য আপনার সম্ভবত ভূগোলটিতে ডেটা "বেক" করা উচিত। এই পদ্ধতিটি সহজ কারণ আপনার কেবলমাত্র একটি একক ফাইল লোড করতে হবে (সুতরাং কোনও queue.js নেই ) এবং যেহেতু ডেটা প্রতিটি বৈশিষ্ট্যের বৈশিষ্ট্য হিসাবে সংরক্ষণ করা হয়, তাই আপনাকে ক্লায়েন্টে ডেটা যোগ করার দরকার নেই (সুতরাং ডি 3 নেই ) । মানচিত্র )।

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

  2. আপনার ডেটা কি ইতিমধ্যে ভূগোলের সাথে আবদ্ধ (যেমন, আপনার শেফফিলের সম্পত্তি)?

    ধরে নিচ্ছি যে আপনি প্রথম প্রশ্নের "না" উত্তর দিয়েছেন এবং ভূগোলের মধ্যে ডেটা বেক করতে চান (ক্লায়েন্টে না করে), আপনি কীভাবে এটি করেন তা ডেটা ফর্ম্যাটের উপর নির্ভর করে।

    যদি আপনার ডেটাটি ইতিমধ্যে আপনার শেফফিলের সম্পত্তি, তবে topojson -pউত্পাদিত টোপোজেন ফাইলে কোন বৈশিষ্ট্য সংরক্ষণ করা হবে তা নিয়ন্ত্রণ করতে ব্যবহার করুন। আপনি এটি বৈশিষ্ট্যগুলির নাম পরিবর্তন করতে এবং সংখ্যায়ও বাধ্য করতেও এটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ একটি মানচিত্র তৈরি করুন দেখুন ।

    আপনার ডেটা একটি পৃথক CSV অথবা TSV ফাইলে হয়, তাহলে ব্যবহার topojson -e (ছাড়াও -pএকটি নির্দিষ্ট করার) বাহ্যিক বৈশিষ্ট্য যে ফাইলটি আপনার ভৌগলিক বৈশিষ্ট্য যোগদান করতে পারবে। উইকি থেকে উদাহরণটি ধরা, যদি আপনার মতো টিএসভি ফাইল থাকে:

    FIPS    rate
    1001    .097
    1003    .091
    1005    .134
    1007    .121
    1009    .099
    1011    .164
    1013    .167
    1015    .108
    1017    .186
    1019    .118
    1021    .099
    

    ব্যবহার করে -eআপনি এগুলিকে "বেকারত্ব" নামক একটি সংখ্যাসূচক আউটপুট সম্পত্তিটিতে মানচিত্র করতে পারেন:

    topojson \
      -o output.json \
      -e unemployment.tsv \
      --id-property=+FIPS \
      -p unemployment=+rate \
      -- input.shp
    

    এই পদ্ধতির উদাহরণ হ'ল কেনটাকি জনসংখ্যা কোরোপলথ , bl.ocks.org/5144735


2
এবং এখানে আমি আমার হার্ড ডি 3 ম্যাপিং প্রশ্নগুলি জিৎ.স্ট্যাকেক্সেঞ্জের পরিবর্তে স্ট্যাকওভারফ্লোতে জিজ্ঞাসা করছিলাম কারণ আমি ভেবেছিলাম সেখানে আরও দক্ষতা রয়েছে --- এবং তারপরে মাস্টার নিজেই আমার প্রশ্নের উত্তর এখানে দেবেন। =) ভাল, এটি আজকে 2 টি জিনিস শিখেছি। ধন্যবাদ!
মিটেনচপস

3

ভাল প্রশ্ন. আপনি যে উদাহরণ সরবরাহ করেছেন তার মধ্যে একটি কৌশলটি করা মনে হচ্ছে যদিও এটি অনুসরণ করা শক্ত।

আপনি নোট পাবেন যে উদাহরণ দুই বাহ্যিক ডাটা ফাইল, হয়েছে us.json এবং unemployment.tsvআপনি বেকারত্ব.এসটিভি সম্পর্কে আপনার বিপদ। সিএসভির মতো ভাবতে পারেন; us.json হ'ল এমন ভৌগলিক বৈশিষ্ট্য যা আপনি ড্রেস.সিএসভি থেকে প্যারামিটারগুলি সংযুক্ত করতে চান। আধুনিক, বেকারত্ব.এসটিভি, idএবং rateক্ষেত্রগুলি যেখানে আমাদের.জেসনের idমতো theid

এটি D3 এর সাথে ক্লায়েন্টে অন্তত এই উদাহরণ দিয়ে আপনার ডেটা এবং বৈশিষ্ট্যগুলি মার্জ করা উচিত । এটি ক্লায়েন্টের মধ্যেই বেকারত্বের হার, উদাহরণস্বরূপ, d3.map () ফাংশনটি ব্যবহার করে কাউন্টি বৈশিষ্ট্যে যোগ দেওয়া হয়েছে । এটি যেখানে এটি সূচনা হয়:

var rateById = d3.map();

এবং এটি এখানে rateম্যাপ করা হয় id:

queue()
    .defer(d3.json, "/mbostock/raw/4090846/us.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

আমি অবশ্যই স্বীকার করব যে আমি জানি না কী queue()জন্য, তবে এই আলোচনার পক্ষে এটি গুরুত্বপূর্ণ নয়। কি নোট করা জরুরী যে প্রতিটি কাউন্টি বৈশিষ্ট্য ক্ষেত্র বেকারত্ব দ্বারা প্রতিস্থাপিত হয় এখন ভাগ আইডেন্টিফায়ার দ্বারা প্রবেশযোগ্য ( সম্পাদনা করুন: হিসাবে @ blord-Castillo পয়েন্ট আউট আসলে এই একটি নতুন এসসিয়েতিভ আরে, বা কী হ্যাশ, যেখানে প্রজন্মের ম্যাপ করা হয় )। এখানেই প্রতীকীকরণের উদ্দেশ্যে ডাকা হয়েছিল (এখানে প্রতিটি সংখ্যার জন্য পূর্বনির্ধারিত সিএসএস ক্লাস পাওয়া যায়):idraterateidrateidrate

...
.enter().append("path")
  .attr("class", function(d) { return quantize(rateById.get(d.id)); })
  .attr("d", path);

যেখানে quantize()ফাংশনটি সিএসএস শ্রেণির নাম দেয় যা তার বেকারত্বের হারের ভিত্তিতে সেই বৈশিষ্ট্য (কাউন্টি) স্টাইল করতে ব্যবহার করা উচিত, যা এখন বৈশিষ্ট্যের idক্ষেত্রে সংজ্ঞায়িত করা হয়েছে ।


1
এফওয়াইআই কাতারে: bsumm.net/2013/03/31/analyzing-mbostocks-queue-js.html
johanvdw

সারি সিরিয়াল লোডের পরিবর্তে ডেটা উত্সগুলিতে অ্যাসিঙ্ক সমান্তরাল লোডিংয়ের অনুমতি দেয়।
blord-castillo

1
এই উদাহরণে যা চলছে তা হ'ল রেটবাইআইডি একটি মূল হ্যাশ। দেশের বৈশিষ্ট্যগুলিতে কখনও কোনও পরিবর্তন করা হয় না এবং ইউএস জেসন ডেটাটি ছোঁয়া থাকে। পরিবর্তে, বেকারত্ব.tsv কে 'রেটবাইআইডি' নামে একটি মূল হ্যাশে রূপান্তরিত করা হয়। রেটবিআইড.সেট () বেকারত্ব.এসটিভিতে লুপ করা হয়েছে যাতে বেকার.tsv এ প্রতিটি আইডির জন্য একটি কী সন্নিবেশ করা হয় (us.json নয়) এবং সেই কীটির মানটি সেই আইডির জন্য বেনার.tsv এ রেট ফিল্ডে সেট করা হয় ts । পরবর্তীতে, রেটবায়আইড.জেট () কে আইডি দিয়ে বেকারত্বের হার সন্ধান করতে হ্যাশ ব্যবহার করতে বলা হয়; সেই মানটি us.json বৈশিষ্ট্যগুলিতে স্টাইল সেট করতে ব্যবহৃত হয়, তারপরে ফেলে দেওয়া হবে।
blord-castillo

এই আইডিটিকে অন্য কোথাও কোনও বৈশিষ্ট্য হিসাবে সংযুক্ত করার পরিবর্তে হারের সাথে কেন / প্রতিস্থাপন করবে? এটি পরে নির্বাচন করা আরও কঠিন করে তোলে।
মিটেনচপস

1
এটি হারের সাথে আইডি প্রতিস্থাপন করে না। এটি আইডি থেকে রেট পর্যন্ত একটি লুকের হ্যাশ তৈরি করে।
blord-castillo

2

প্রথমে, আপনার সিএসভির প্রথম সারিতে এই পদ্ধতিটি ব্যবহার করতে কলামের নামের সাথে কমা দ্বারা পৃথক হওয়া তালিকা থাকতে হবে। যদি এটি সম্ভব না হয় তবে এই সম্পর্কে একটি মন্তব্য যুক্ত করুন এবং আমি কীভাবে এর d3.csv.parseRowsপরিবর্তে কীভাবে ব্যবহার করতে পারি তা যদি আমি কাজ করতে পারি তবে তা দেখতে পাচ্ছি d3.csv.parsed3.csv.parseমূল্যায়নকারী ফাংশন দ্বারা বলা হয় .defer(function, url, assessor)

আমি এখন আপনার ফাইলটিকে এমন দেখাচ্ছে বলে ধরে নিচ্ছি:

danger.csv
iso,level
AFG,100
ALB,0
DZA,12
...

এটি ব্যবহার করে, আপনি আইএসও 3 থেকে বিপদ স্তর পর্যন্ত একটি লুকের হ্যাশ তৈরি করতে পারেন।

var dangerByISO3 = d3.map();
queue()
    .defer(d3.json, "url to topo.json")
    .defer(d3.csv, "url to danger.csv", function(d) {dangerByISO3.set(d.iso, +d.level);})
    .await(ready);
function ready(error, world) {
    //You now have world as your available topojson
    //And you have dangerByISO3 as your danger level hash
    //You can lookup a danger level by dangerByISO3.get(ISO3 code)
}

কোড ওয়াকথ্রু

var dangerByISO3 = d3.map();

প্রথমে আপনি একটি d3.map () অবজেক্ট তৈরি করুন যা আপনার কী হ্যাশ হিসাবে কাজ করবে এবং এটিকে ভেরিয়েবল বিপদবাইএসআই 3 এ সংরক্ষণ করবে 3

queue()

সমান্তরাল লোডিংয়ের জন্য সারি ব্যবহার করুন।

.defer(d3.json, "url to topo.json")

অপেক্ষা করার ফাংশনে (ত্রুটির পরে) প্রথম পাস করার জন্য আপনার টপোজসনটি লোড করুন। শৈলীটি এখানে নোট করুন যেখানে এটি একটি শৃঙ্খলাবদ্ধ ফাংশন রয়েছে queue(), তবে একটি পৃথক লাইনে তালিকাভুক্ত করা হয়েছে (কোনও সমাপ্তি সেমিকোলন নেই queue())।

.defer(d3.csv, "url to danger.csv", function(d) {dangerByISO3.set(d.iso, +d.level);})

এখানে দুটি জিনিস ঘটছে। প্রথমে, আপনি অপেক্ষার ফাংশনে যাওয়ার জন্য আপনার দ্বিতীয় যুক্তি হিসাবে বিপদ। সিএসভি লোড করছেন। আপনি নীচে দেখতে পাবেন, এই যুক্তি আসলে ব্যবহার করা হয় না। পরিবর্তে, একটি মূল্যায়নকারী যুক্তি লোড ফাংশন, d3.csv সরবরাহ করা হয়। এই মূল্যায়নকারী সিএসভির প্রতিটি সারি প্রক্রিয়া করবে। এই ক্ষেত্রে, আমরা সেটটি ফাংশনটিকে বিপদবিসআইএসআই 3-তে কল করি যাতে একটি isoচাবির প্রতিটি সংমিশ্রণের জন্য আমরা levelসেই কীটি দিয়ে যাওয়ার মান হিসাবে সেট করি । +d.levelস্বরলিপি ইউনারী ব্যবহার +একটি সংখ্যা d.level মান বাধ্য করতে।

.await(ready);

উভয় ডেটা উত্স লোড হয়ে গেলে এগুলি ফাংশনে দুটি পৃথক যুক্তি হিসাবে পাস করা হয় ready()। কলব্যাকের প্রথম তর্কটি সর্বদা প্রথম ত্রুটি যা ঘটেছিল is যদি কোনও ত্রুটি না ঘটে তবে নালটি প্রথম যুক্তি হিসাবে পাস করা হবে। দ্বিতীয় যুক্তি হ'ল প্রথম ডেটা উত্স (প্রথম কার্যের ফলাফল) এবং তৃতীয় যুক্তি দ্বিতীয় ডেটা উত্স (দ্বিতীয় কার্যের ফলাফল)।

function ready(error, world) {...}

এটি কলব্যাক ফাংশন ready()। প্রথমে আমরা errorযুক্তিটি গ্রহণ করি যা দুটি লোডিং কার্য সফলভাবে সম্পন্ন হলে (আপনার ত্রুটিগুলি ধরতে এবং পরিচালনা করার জন্য ভাষাটি যুক্ত করা উচিত) বাতিল হওয়া উচিত। এরপরে আমরা টপোজসন ডেটাটিকে অবজেক্ট হিসাবে নিই countries। এই ডেটাটি ফাংশনের শরীরে এমন কিছু দিয়ে প্রক্রিয়া করা উচিত .data(topojson.feature(world,world.objects.countries).features)। যেহেতু ready()তৃতীয় যুক্তি গ্রহণ করে না, দ্বিতীয় কার্যের ফলাফল, আমাদের সিএসভি সহজভাবে বাতিল করা হয়। আমরা এটি কেবল কী হ্যাশ তৈরি করতে ব্যবহার করেছি এবং এর পরে এর প্রয়োজন নেই।


হ্যাঁ, আপনি ঠিক বলেছেন, আমার সিএসভি আসলে আমি পোস্ট করা অযত্ন ডেমোর পরিবর্তে একটি সুগঠিত সিএসভির মতো দেখায়। =) দুঃখিত, আমি এটি আপডেট করব।
মিটেনচপস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.