จะแสดงภาพไทม์ไลน์ของเหตุการณ์ใน D3 ได้อย่างไร

ฉันต้องการแสดงภาพการประทับเวลาของเหตุการณ์ในข้อมูลของฉันโดยใช้การแสดงภาพดังที่แสดงด้านล่าง:

ป้อนคำอธิบายรูปภาพที่นี่

ฉันเดาว่าสามารถทำได้หลายวิธี และเนื่องจากฉันไม่มีประสบการณ์กับ D3 ฉันจึงอยากได้ยินคำแนะนำสำหรับแนวทางที่ดี บางทีมันอาจจะสำเร็จได้ด้วยการปรับแต่งการแสดงภาพข้อมูลทั่วไปด้วยวิธีที่ซับซ้อนใช่ไหม?

แก้ไข: ตามคำติชมจาก ee2Dev ฉันจะทำ 4 บรรทัดแทนที่จะเป็น 2 บรรทัด โดยแยกการโทร/ข้อความเข้าและออกแยกกัน ในส่วนของรายละเอียด จะเป็นการดีที่สุดหากการแสดงภาพสามารถบันทึกข้อมูลหนึ่งสัปดาห์ในช่วงเวลา 5 นาที (หนึ่งข้อความจะเท่ากับการสนทนา 5 นาที และการโทร 48 นาทีจะถูกปัดเศษเป็นการโทร 50 นาที) นั่นจะเท่ากับ 7*24*12 = 2016 ช่วงเวลาที่เป็นไปได้ ซึ่งดูเหมือนค่อนข้างสมเหตุสมผล บางทีช่วงเวลา 10 นาทีอาจจะเหมาะสมกว่าช่วงเวลา 5 นาที แต่ฉันเดาว่าโค้ดสามารถปรับได้อย่างง่ายดาย สิ่งที่ฉันไม่ได้แสดงคือควรทำเครื่องหมายเที่ยงคืนอย่างไรเพื่อแสดงว่าวันไหนใช้งานและวันใดที่ไม่ใช้งาน

ด้านล่างนี้คือโค้ดและข้อมูลตัวอย่างของฉัน:

// Data:
timestamp (yyyy-MM-dd HH:mm),type
1/1/2015 10:12,inc_call
1/2/2015 10:12,inc_call
1/2/2015 10:12,out_text
1/3/2015 10:12,out_call
1/4/2015 10:12,inc_text
1/5/2015 10:12,inc_text


// Code
<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<body>
<script type="text/javascript" src="d3/d3.js"></script>
<script type="text/javascript" src="papaparse.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.tipsy.js"></script>
<link href="/thtipsy.css" rel="stylesheet" type="text/css" />
<script>

var width = 1000;
var height = 500;

var events;

var results = Papa.parse("events.csv", {
    header: true,
    download: true, // is needed even for local files as this interprets the input value as a path instead of simply the data
    dynamicTyping: true,
    delimiter: ",",
    skipEmptyLines: true,
    complete: function(results) {
        events = results.data;  
        CreateVisualizationFromData();
      }
});


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

var total_interactions;

function CreateVisualizationFromData()
{

    total_interactions = events.length;
    console.log(total_interactions);

    svg
      .append("marker")
      .attr("id", "arrowhead")
      .attr("refX", 6 + 7)
      .attr("refY", 2)
      .attr("markerWidth", 6)
      .attr("markerHeight", 4)
      .attr("orient", "auto")
      .append("path")
      .attr("d", "M 0,0 V 4 L6,2 Z");


 }

javascript d3.js visualization data-visualization temporal
person pir    schedule 06.03.2015    source แหล่งที่มา
comment
ประการแรก: การเลือกการแสดงภาพดูเหมือนจะไม่ดี: สายเรียกเข้าและโทรออกหรือข้อความถูกวาดในลำดับเดียวกัน ก่อนอื่นฉันขอแนะนำให้คุณแยกพวกมันออกเป็นสี่ลำดับ อัลกอริธึมควรเลือกวาดอย่างไรหากมีสายเข้าและโทรออกจำนวนมากในหนึ่งวัน เติมพื้นที่ครึ่งหนึ่งด้วยสีฟ้าอ่อน และครึ่งหลังด้วยสีน้ำเงินเข้ม ? สลับแสงกับสีน้ำเงินเข้ม ? ประการที่สอง ตรวจสอบให้แน่ใจว่าจะแสดงให้ผู้ชมเห็นว่าภาพเวลาใด: ฉันไม่เห็นว่าวันที่ 1/1/2558 สิ้นสุดที่ใด หรือวันที่ 5/1/2558 เริ่มต้นที่ไหน มีวันที่ 2-4 อยู่ระหว่างนั้นหรือเราแสดงแค่ 2 วัน?   -  person ee2Dev    schedule 06.03.2015
comment
คุณอาจเลือกกราฟแยกกัน 4 กราฟเนื่องจากเหมาะกว่าจริงๆ ตัวเลือกอื่นยังใช้การแสดงภาพ CalendarView สี่รายการ bl.ocks.org/mbostock/4063318 และแทน เติมสีเดียวทั้งวัน สร้างสี่เหลี่ยมจัตุรัสรายวันเป็น 24x24 และวาดเส้นแนวตั้ง 1 เส้นในแต่ละชั่วโมง หากการแยกชั่วโมงมีรายละเอียดเพียงพอ   -  person ee2Dev    schedule 06.03.2015
comment
ขอบคุณสำหรับความคิดเห็น ฉันเห็นด้วยอย่างสมบูรณ์ ผลลัพธ์สุดท้ายควรเป็น 4 บรรทัดแทน ข้อมูลจะแสดงติดต่อกันเป็นวันที่ 1 ถึง 5 ฉันกำลังคิดถึงวิธีอธิบายการเปลี่ยนแปลงในแต่ละวัน (เช่น ใช้เส้นสีดำคิดเมื่อข้ามเที่ยงคืน) แต่ฉันยังคงระดมความคิดเกี่ยวกับวิธีการทำให้เข้ากับการแสดงภาพโดยรวม ฉันจะอัปเดตข้อความต้นฉบับตามนั้น   -  person pir    schedule 06.03.2015
comment
คุณต้องการแสดงรายละเอียดเวลาใด โทรใช่/ไม่ใช่ต่อชั่วโมง ? ต่อ 30 นาที ?   -  person ee2Dev    schedule 06.03.2015
comment
ดูข้อความที่อัปเดต คุณคิดว่าการเว้นช่วง 5 นาทีต่อสัปดาห์นั้นทะเยอทะยานเกินไปหรือไม่ เพราะเหตุใด   -  person pir    schedule 06.03.2015
comment
คุณสามารถทำได้ แต่ถ้าคุณใช้ความกว้างเพียง 1 พิกเซลต่อช่วงเวลา คุณจะมีความกว้างรวม 2016px + 30px สำหรับป้ายกำกับ!   -  person ee2Dev    schedule 06.03.2015
comment
อิอิ จริงด้วย ฉันว่าฉันไม่ได้ตั้งใจนะ มันคงจะน่าสนใจที่จะดูว่าบุคคลนั้นใช้งานอยู่ด้วยการโทร 48 นาทีหรือเพียงแค่การโทรที่ยาวนาน 2 นาที.. บางทีตัวเลือกอื่นอาจเป็นการทำช่วงเวลา 1 ชั่วโมงแล้วใช้รหัสสีในช่วงเวลานั้นขึ้นอยู่กับกิจกรรม   -  person pir    schedule 06.03.2015

คำตอบ (1)


arrow_upward
3
arrow_downward

เพื่อให้คุณมีจุดเริ่มต้นให้ใช้รหัสนี้และไปจากที่นั่น

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 60},
    width = 960 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

var colorOf = d3.scale.category10();

var y = d3.scale.ordinal()
    .rangeRoundBands([height, 0], 0.3);

var x = d3.time.scale()
    .range([5, width]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%m/%d/%Y %Hh"));;

var parseDate = d3.time.format("%m/%d/%Y %H:%M").parse;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("timeseries.csv", type, function(error, data) {
  y.domain(data.map(function(d) { return d.type; }));
  x.domain(d3.extent(data, function(d) { return d.time; }));
  colorOf.domain(data.map(function(d) { return d.type; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("y", function(d) { return y(d.type); })
      .attr("height", y.rangeBand())
      .attr("x", function(d) { return x(d.time); })
      .attr("width", 1)
      .style("fill", function(d) { return colorOf(d.type); })
});

function type(d) {
  d.time = parseDate(d.time);
  return d;
}

</script>

และนี่คือไฟล์ timeseries.csv

time,type
1/1/2015 10:12,inc_call
1/2/2015 10:12,inc_call
1/2/2015 10:12,out_text
1/3/2015 10:12,out_call
1/4/2015 10:12,inc_text
1/5/2015 10:12,inc_text

และนี่คือ JSFiddle: http://jsfiddle.net/ee2todev/6u0a0qnw/ คุณอาจต้องการ ลบแกน y ออก แทนที่ด้วยป้ายกำกับ จัดรูปแบบแกน x...ปรับสี ฯลฯ

person ee2Dev    schedule 06.03.2015
comment
ขอบคุณ นั่นดูเหมือนเป็นจุดเริ่มต้นที่ดี :) คุณช่วยอธิบายรายละเอียดเพิ่มเติมสั้นๆ ว่าโค้ด 3 บรรทัดนี้ทำหน้าที่อะไรได้บ้าง d3.csv("timeseries.csv", type, function(error, data) { y.domain(data.map(function(d) { return d.type; })); x.domain(d3.extent(data, function(d) { return d.time; })); colorOf.domain(data.map(function(d) { return d.type; })); - person pir; 09.03.2015
comment
บางบรรทัดก่อนหน้านั้น ฉันกำหนดตัวแปรสามตัว: colorOf, x และ y ตัวแปรแต่ละตัวชี้ไปที่ฟังก์ชัน โดยเฉพาะฟังก์ชันมาตราส่วน มาตราส่วนคือฟังก์ชันที่แมปจากโดเมนอินพุตไปยังช่วงเอาต์พุต ช่วงของแต่ละมาตราส่วนได้รับการตั้งค่าไว้ด้านบน ดังนั้นในสามบรรทัดนี้ ฉันจึงตั้งค่าโดเมนที่ถูกต้อง - person ee2Dev; 09.03.2015
comment
ดังนั้นบรรทัดแรกจะตั้งค่าโดเมนให้เป็นอาร์เรย์ประเภทต่างๆ จากข้อมูลของคุณ (['inc_call', 'out_text', 'out_call', 'inc_text'] ค่าเหล่านี้ที่คุณต้องการแมปกับพิกัด y ที่แตกต่างกัน บรรทัดที่สอง กำหนดเวลาต่ำสุดและสูงสุดให้เป็นโดเมนสำหรับ x ส่วนสุดท้ายจะแมปทุกประเภทกับสี โปรดทราบว่า y และ colorOf มีโดเมนเดียวกัน (อาร์เรย์ประเภทต่างกัน) แต่มีช่วงต่างกัน (พิกัด y หรือสี) - person ee2Dev; 09.03.2015
comment
คุณอาจดูเอกสารประกอบของเครื่องชั่ง d3 จากนั้นคุณสามารถปรับเปลี่ยนได้อย่างง่ายดาย - person ee2Dev; 09.03.2015