ไลบรารีการสร้างแผนภูมิสำหรับนักวิทยาศาสตร์ข้อมูลที่ต่อยอดจาก D3 และ stack.gl

การแนะนำ

Plotlyเป็นบริษัทคอมพิวเตอร์ที่มีสำนักงานใหญ่ในเมืองมอนทรีออล รัฐควิเบก ซึ่งพัฒนาเครื่องมือวิเคราะห์ข้อมูลและการแสดงข้อมูลออนไลน์ ให้บริการเครื่องมือสร้างกราฟ การวิเคราะห์ และสถิติออนไลน์สำหรับบุคคลและการทำงานร่วมกัน และไลบรารีการสร้างกราฟทางวิทยาศาสตร์สำหรับ Python, R , MATLAB, Perl, Julia, Arduino และ REST นอกจากนี้ยังสามารถใช้เครื่องมือ Plotly เพื่อจัดรูปแบบกราฟเชิงโต้ตอบด้วยสมุดบันทึก Jupyter

Plotly ยังเป็นชื่อผลิตภัณฑ์ Plotly.jsเป็นไลบรารีการสร้างแผนภูมิที่สร้างขึ้นจากD3และstack.glซึ่งเป็นส่วนประกอบ WebGL แบบแยกส่วน เป็นไลบรารีการสร้างแผนภูมิระดับสูงที่มีการประกาศ และมาพร้อมกับแผนภูมิมากกว่า 40 ประเภท รวมถึงแผนที่ 3 มิติ สถิติ วิทยาศาสตร์ การเงิน และ SVG นอกจากไลบรารี JavaScript แล้ว Plotly ยังให้พลังงานแก่plotly.pyและplotly.R แผนภูมิพล็ อ ตถูกนำมา ใช้อย่างกว้างขวางโดยชุมชน AI/วิทยาศาสตร์ข้อมูล เช่นMLflow การสาธิต Point-E บน Hugging Face

มาดูกันว่า Plotly ทำงานอย่างไร

ตั้งค่า Plotly.js ใน Create React App

เราใช้Create React Appเป็นฐานในการสำรวจ plotly.js คำสั่งต่อไปนี้สร้างโครงการ React:

% yarn create react-app react-plotly
% cd react-plotly

% yarn add plotly.js react-plotly.js

"dependencies": {
  "plotly.js": "^2.17.0",
  "react-plotly.js": "^2.6.0"
}

แผนภูมิแท่ง

แผนภูมิแท่งแสดงข้อมูลที่เป็นหมวดหมู่ด้วยแท่งสี่เหลี่ยมที่มีความสูงหรือความยาวเป็นสัดส่วนกับค่าที่แสดง แถบสามารถลงจุดในแนวตั้งหรือแนวนอนได้ แผนภูมิแท่งแนวตั้งบางครั้งเรียกว่าแผนภูมิคอลัมน์

ใน Plotlyชุดข้อมูลเรียกว่า data ซึ่งประกอบด้วยอาร์เรย์ของการติดตาม ออบเจกต์การติดตามแต่ละรายการประกอบด้วยtype, x, y, และข้อมูลอื่นๆ

• xตั้งxค่าพิกัดซึ่งเป็นอาร์เรย์ของความก้าวหน้าตามลำดับของค่า ค่าเริ่มต้นคือลำดับที่เริ่มต้นจาก 0 โดยเพิ่มขึ้นทีละ 1
• yตั้งyค่าพิกัดซึ่งเป็นอาร์เรย์ของค่าที่แต่ละจุดyของ
• ประเภทแผนภูมิแท่ง'bar'คือ

• ที่บรรทัดที่ 3–7 จะสร้างวัตถุเลย์เอาต์ที่มี, title, widthและheight
• ที่บรรทัดที่ 9–18 จะสร้างอาร์เรย์ข้อมูลที่ประกอบด้วยออบเจ็กต์การติดตามสองรายการ การติดตามทั้งสองถูกกำหนดเป็นประเภท'bar'พร้อมด้วยyค่า
• ที่บรรทัดที่ 21 แผนภูมิแท่งจะถูกสร้างขึ้น

เราสามารถเปลี่ยนแถบใดแถบหนึ่งเป็นแนวนอนได้ด้วยรหัสนี้:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
  },
];

การวางแนวแบบผสมมีไว้สำหรับการสาธิตเท่านั้น มีแนวโน้มว่ากรณีการใช้งานจริงจะมีแถบทั้งหมดในทิศทางเดียวกัน

ตั้งค่าแถบทั้งสองเป็นแนวนอนโดยใช้รหัสต่อไปนี้:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
    orientation: 'h',
  },
];

แผนภูมิกระจาย

แผนภูมิเส้นเชื่อมต่อชุดของจุดข้อมูลโดยใช้เส้น และแผนภูมิกระจายแสดงชุดของจุด ใน Plotly ทั้งแผนภูมิเส้นและแผนภูมิกระจายมีประเภท'scatter'เป็น ใช้modeเพื่อกำหนดโหมดการวาด:

• 'lines': มันวาดพล็อตเส้น
• 'markers': มันวาดพล็อตกระจาย
• 'text': มันแสดงข้อความ
• 'none': มันไม่แสดงอะไรเลย

นี่คือการแก้ไขsrc/App.js:

• ที่บรรทัดที่ 3–7 จะสร้างวัตถุเลย์เอาต์ที่มี, title, widthและheight
• ที่บรรทัดที่ 9–20 จะสร้างอาร์เรย์ข้อมูลที่ประกอบด้วยวัตถุการติดตามสองรายการ การติดตามทั้งสองถูกกำหนดเป็นประเภทของ'scatter'พร้อมด้วยyค่า การติดตามชุดแรกmodeเป็น'lines'และชุดที่สองmodeเป็น'markers'
• ที่บรรทัดที่ 23 แผนภูมิกระจายจะถูกสร้างขึ้น

นี่คือการแก้ไขsrc/App.jsที่ใช้โหมดรวม

• ที่บรรทัดที่ 3–7 จะสร้างวัตถุเลย์เอาต์ที่มี, title, widthและheight
• ที่บรรทัดที่ 9–28 จะสร้างอาร์เรย์ข้อมูลที่ประกอบด้วยวัตถุการติดตามสองรายการ
  – ที่บรรทัดที่ 10–14 การติดตามแรกจะตั้งค่าโหมด'lines+markers'เป็น
  – ที่บรรทัดที่ 15–26 การติดตามที่สองตั้งค่าโหมด'markers+lines'เป็น นอกจากนี้ยังตั้งค่าmarker.colorเป็น'green'ถึงmarker.size12 line.colorถึง'red'และline.widthถึง 3
• ที่บรรทัดที่ 31 แผนภูมิกระจายจะถูกสร้างขึ้น

ข้อมูลต่อไปนี้dataArrayเพิ่มtextให้modeกับการติดตามทั้งสอง พร้อมด้วยอาร์เรย์ของค่าข้อความ นี่คือรหัส:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

ใช้งานได้ ยกเว้นว่ามีการทับซ้อนกันระหว่างเครื่องหมายและข้อความ

เราสามารถเลื่อนตำแหน่งข้อความเพื่อหลีกเลี่ยงการทับซ้อนได้:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
    textposition: 'top center',
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    textposition: 'bottom center',
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

เราได้เห็นxและyขนาดในแผนภูมิ Plotly แล้ว และมีอีกมิติหนึ่งคือ มิติข้อมูลสี ในแผนภูมิกระจาย ในตัวอย่างต่อไปนี้ เราสร้างแผนภูมิที่มีเครื่องหมายกระจายแนวนอนเจ็ดเส้นพร้อมเครื่องหมาย เครื่องหมายเหล่านี้ใช้เพื่ออธิบายวิธีการทำงานของมิติสี

นี่คือแผนภูมิเป้าหมายของเรา:

และนี่คือการแก้ไขsrc/App.js:

• ที่บรรทัดที่ 10–18 trace 0ให้กำหนดyค่าเป็น[6, 6, 6, 6, 6, 6](บรรทัดที่ 12) และmarker.colorเป็นสีธรรมดา'red'(บรรทัดที่ 15)

• ที่บรรทัดที่ 19–28 trace 1ให้กำหนดyค่าเป็น[5, 5, 5, 5, 5, 5](บรรทัดที่ 21) และmarker.colorscaleเป็น[[0, 'green'], [1, 'blue']](บรรทัดที่ 24) colorscaleเป็นอาร์เรย์ที่มีการแมปอาร์เรย์ค่ามาตรฐานกับสตริง rgb, rgba, hex, hsl, hsv หรือสีที่มีชื่อ อย่างน้อยที่สุด จำเป็นต้องมีการแม็ปสำหรับค่าต่ำสุด (0) และสูงสุด (1) colorscaleมีผลเฉพาะเมื่อmarker.colorตั้งค่าเป็นอาร์เรย์ตัวเลข (บรรทัดที่ 25)

• ที่บรรทัดที่ 29–39 trace 2ให้กำหนดyค่าเป็น[4, 4, 4, 4, 4, 4](บรรทัดที่ 31) เนื่องจากmarker.colorscaleไม่ได้กำหนดไว้colorscaleจึงใช้ ค่าเริ่มต้น marker.cmin(บรรทัดที่ 35) กำหนดขอบเขตล่างของโดเมนสี และmarker.cmax(บรรทัดที่ 36) กำหนดขอบเขตบนของโดเมนสี มิฉะนั้นmarker.cminจะmarker.cmaxถูกหักออกจากmarker.color(บรรทัดที่ 34)

• ที่บรรทัดที่ 40–49 trace 3ให้กำหนดyค่าเป็น[3, 3, 3, 3, 3, 3](บรรทัดที่ 42) marker.cmid(บรรทัดที่ 46) กำหนดจุดกึ่งกลางของโดเมนสีโดยปรับขนาดmarker.cminและ/หรือmarker.cmaxให้เท่ากันจนถึงจุดนี้

• ที่บรรทัดที่ 50–59 trace 4ให้กำหนดyค่าเป็น[2, 2, 2, 2, 2, 2](บรรทัดที่ 52) นอกจากการกำหนดcolorscaleเราสามารถใช้ชื่อจานสีที่กำหนดไว้ล่วงหน้าจากรายการ: 'Blackbody', 'Bluered', 'Blues', 'Cividis', 'Earth', 'Electric', 'Greens', 'Greys', 'Hot', 'Jet', 'Picnic', 'Portland', 'Rainbow', 'RdBu', 'Reds', 'Viridis', 'YlGnBu'และ'YlOrRd'. สำหรับ ตั้ง trace 4ค่าmarker.colorscaleเป็น'Greens'(บรรทัดที่ 56)

• ที่บรรทัด 60–69 trace 5ให้กำหนดyค่าที่เป็น[1, 1, 1, 1, 1, 1](บรรทัดที่ 62) และmarker.colorscaleเป็น'YlOrRd'(สีเหลืองหรือสีแดง บรรทัดที่ 66)

• ที่บรรทัด 70–85 trace 6ให้กำหนดyค่าเป็น[0, 0, 0, 0, 0, 0](บรรทัดที่ 72) และmarker.colorscaleเป็น'Jet'(บรรทัดที่ 76)

• ที่บรรทัด 78–83 ในtrace 6, colorbarถูกกำหนดด้วยtitle, orientation, x, yและ colorbarถูกกำหนดด้วยการวางแนวนอน (บรรทัดที่ 80) เพื่อหลีกเลี่ยงการซ้อนทับคำอธิบาย colorbar.xกำหนดxตำแหน่งของแถบสีด้วยตัวเลขระหว่างหรือเท่ากับ -2 และ 3
  ค่าเริ่มต้นคือ 1.02 colorbar.yตั้งค่าตำแหน่ง y ของแถบสี ด้วยตัวเลขระหว่างหรือเท่ากับ -2 และ 3 ค่าเริ่มต้นคือ 0.5 ในตั้งค่าเป็น 0.48 (บรรทัดที่ 81) และตั้งค่าเป็น -0.2 (บรรทัดที่ 82 trace 6) ตำแหน่งถูกย้ายจากด้านบน (ค่าเริ่มต้นสำหรับการวางแนวนอน) ไปที่ด้านล่าง ถัดจาก แสดงให้เห็นว่ามิติสีของจุดที่กระจัดกระจายตรงกันอย่างไรcolorbar.xcolorbar.ytrace 6colorbar

• ที่บรรทัดที่ 94 แผนภูมิกระจายที่มีมิติสีเจ็ดสีจะถูกสร้างขึ้น

colorbar: {
  title: 'y = 0',
  orientation: 'v',
}

เห็นได้ชัดว่าcolorbarทับซ้อนกับตำนาน แทนที่จะสร้างcolorbarแนวนอน เราสามารถเปลี่ยนคำอธิบายเป็นแนวนอนได้

นี่คือไฟล์src/App.js.

• ที่บรรทัด 7–9 legendกำหนดเป็นแนวนอน
• ที่บรรทัด 81–83 การวางแนวของcolorbarจะถูกลบออก ค่าเริ่มต้นคือแนวตั้ง ( 'v')

ตัวอย่างด้านบนแสดงให้เห็นว่ามิติของสีมีความสดใสและใช้งานง่าย

ตัวเลือกการกำหนดค่า

เมื่อวางเมาส์เหนือมุมขวาบนของแผนภูมิmodebarจะแสดงรายการปุ่มต่างๆ จากซ้ายไปขวาคือDownload, Zoom, Pan, Box Select, Lasso Select, Zoom in, Zoom out, Autoscale, , Reset axesและPlotly Logo

• Download: ดาวน์โหลดแผนภูมิผ่านเบราว์เซอร์ 700x450โดยค่าเริ่ม ต้นจะดาวน์โหลดไฟล์ PNG ขนาด นี่คือตัวอย่างการกำหนดค่าให้ดาวน์โหลดไฟล์ SVG ชื่อและ'custom_image'ขนาด800x600

const configObj = {
  toImageButtonOptions: {
    format: 'svg', // one of png, svg, jpeg, webp
    filename: 'custom_image',
    width: 800,
    height: 600,
    scale: 1, // multiply title/legend/axis/canvas sizes by this factor
  },
};

การตั้งค่าscrollZoomเป็น True ช่วยให้ผู้ใช้สามารถซูมเข้าและออกโดยใช้ล้อเลื่อนบนเมาส์

const configObj = {
  scrollZoom: true,
};

• Box Select: อนุญาตให้เลือกส่วนของแผนภูมิด้วยช่อง

• Lasso Select: อนุญาตให้เลือกส่วนของแผนภูมิที่มีขอบเขตอิสระ

• Zoom in: ทำให้ภาพใหญ่ขึ้นและใกล้ขึ้น

• Zoom out: ทำให้ภาพเล็กลงและไกลขึ้น

• Autoscale: ดูที่จุด (ข้อมูล) ทั้งหมดในพล็อตและเปลี่ยนเค้าโครงเพื่อแสดงทั้งหมด
• Reset axes: ย้อนกลับไปยังรายละเอียดเลย์เอาต์ที่ระบุสำหรับแผนภูมิ แม้ว่าจะทิ้งบางประเด็นไว้ก็ตาม
• Plotly Logo: คำแนะนำเครื่องมือแสดงเวอร์ชัน Plotly และการคลิกไปที่https://plotly.com/.

<Plot layout={layoutObj} data={dataArray} config={configObj} />

• ปิดการตอบสนองความกว้างและความสูง:

const configObj = {
  responsive: false,
};

const configObj = {
  staticPlot: true,
};

const configObj = {
  displayModeBar: true,
};

const configObj = {
  displaylogo: false,
};

const configObj = {
  modeBarButtonsToRemove: ['pan', 'lasso'], // Pan and Lasso are removed
};

const configObj = {
  modeBarButtonsToAdd: [
    'drawline',
    'drawopenpath',
    'drawclosedpath',
    'drawcircle',
    'drawrect',
    'eraseshape',
  ],
};

อุปกรณ์ประกอบฉากตัวจัดการเหตุการณ์

ในส่วนก่อนหน้านี้ เราได้แนะนำBox SelectและLasso Selectส่วนที่เลือกเหล่านี้ของแผนภูมิ กรณีการใช้งานคืออะไร

แผนภูมิที่รับฟังเหตุการณ์selectสามารถตอบสนองต่อการเลือกของผู้ใช้

นี่คือการแก้ไขsrc/App.js:

• ที่บรรทัดที่ 10 จะทำให้Box selectเป็นการกระทำเริ่มต้นของmodebar.
• ที่บรรทัดที่ 98–101 จะสร้างวัตถุ config ซึ่งทำให้modebarมองเห็นได้เสมอและซ่อนโลโก้ Plotly บนไฟล์modebar.
• ที่บรรทัด 103–105 ตัวจัดการที่เลือกจะถูกสร้างขึ้นเพื่อบันทึกselectedข้อมูล
• ที่บรรทัดที่ 109 แผนภูมิถูกสร้างขึ้นโดยมีส่วนประกอบของlayout, data, config, onSelectedและ

บนคอนโซลการตรวจสอบselectedข้อมูลจะแสดงขึ้น ซึ่งสามารถใช้ในการสร้างแอปพลิเคชันได้

นี่คือรายการอุปกรณ์สำหรับตัวจัดการเหตุการณ์: onAfterExport, onAfterPlot, onAnimated, onAnimatingFrame, onAnimationInterrupted, onAutoSize, onBeforeExport, , onBeforeHover, onButtonClicked, onClick, onClickAnnotation, onDeselect, onDoubleClick, onError, onFramework, onHover, onInitialized, onLegendClick, onLegendDoubleClick, onPurge, onRelayout, onRelayouting, onRestyle, onRedraw, onSelected, , , , onSelecting, , และonSliderChangeonSliderEndonSliderStartonSunburstClickonTransitioningonTransitionInterruptedonUnhoveronUpdateonWebGlContextLost

บทสรุป

เราได้แสดงวิธีการทำงานของ plotly.js สำหรับแผนภูมิแท่งและแผนภูมิกระจาย นอกจากความสามารถในการแสดงแผนภูมิเต็มรูปแบบแล้ว มิติของสียังสดใสและใช้งานง่ายอีกด้วย ปุ่ม ของมันmodebarมากเกินไปและทรงพลัง อย่างไรก็ตาม มันขาดการเข้าถึง

เมื่อเปรียบเทียบกับHighchartsแล้ว แผนภูมิเชิงสถิติและวิทยาศาสตร์ของ Plotly ได้รับการยอมรับอย่างแพร่หลายโดยชุมชน AI/วิทยาศาสตร์ข้อมูล เราจะยกตัวอย่างในบทความต่อไปนี้

ขอบคุณที่อ่าน.

Want to Connect? 

If you are interested, check out my directory of web development articles.