- Hung Do; CS725:Information Visualization; Spring 2016;
- Computer Science; Old Dominion University
Using D3 to create visualizations. Detail: /hungvietdo/2c38eed928999266bf0b/example/
I used Tableau to create visualizations.
- Looking at the x-axis (time) of the chart we can compare the period of each task in a project gantt chart.
- Property of discriminability: there are two bins in this type of chart color (type of task) and the width of task (how long).
- This is channel in magnitude which use area to represent different temperature during the week. The smaller of rectange, the lower of temperature.
- Property of discriminability: size and position of the rectanges. But clearly, these two bins are not quite right for human perception of discirminability.
- This channel use hue color to categorize three different temperature groups (high, mean, min).
- Property of discriminability: hue color and position are used to define the data item.
- Using spatial region to show different groups of temperatures.
- Property of discriminability: size of the data item.
xxxxxxxxxx
<html>
<head>
<link type="text/css" href="https://mbostock.github.io/d3/style.css" rel="stylesheet" />
<link type="text/css" href="example.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.8.0/d3-legend.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jiahuang/d3-timeline/src/d3-timeline.js"></script>
</head>
<body>
<div>
<h3 >First Question: magnitude as position on a common scale. </h3>
<div width="100%" id="header1"> </div>
<div class="right">
Sample from: <a href="https://github.com/jiahuang/d3-timeline">https://github.com/jiahuang/d3-timeline</a>
</div>
<br><br><br><br><br><br>
<h3 >Second Question: magnitude as area. </h3>
Norfolk's weather last week (Feb 7-13). Data: <a href="https://www.wunderground.com/history/airport/KORF/2016/2/13/WeeklyHistory.html?req_city=&req_state=&req_statename=&reqdb.zip=&reqdb.magic=&reqdb.wmo=&MR=1" target="_blank">https://www.wunderground.com/history/airport/KORF/2016/2/13/WeeklyHistory.html</a>
<div width="100%" id="header2"> </div>
<br><br><br><br><br><br>
<h3 >Third Question: identity as color hue. </h3>
<div width="100%" id="header3"> </div>
<br><br><br><br><br><br>
<h3 >Fourth Question: identity as spatial region. </h3>
<div width="100%" id="header4"> </div>
<br><br><br><br><br><br>
<h3>Refereces: </h3>
- Gantt chart: <a href="https://github.com/jiahuang/d3-timeline">https://github.com/jiahuang/d3-timeline</a> <br>
- Legend: <a href="https://d3-legend.susielu.com/#color" target="_blank">https://d3-legend.susielu.com/#color</a><br>
- Mouse hover: <a href="https://bl.ocks.org/mbostock/3902569" target="_blank">https://bl.ocks.org/mbostock/3902569</a><br>
- Read csv file: <a href="https://learnjsdata.com/read_data.html" target="_blank">https://learnjsdata.com/read_data.html</a><br>
<script type="text/javascript" src="1stq.js"></script>
<script type="text/javascript" src="2ndq.js"></script>
<script type="text/javascript" src="3rd.js"></script>
<script type="text/javascript" src="4th.js"></script>
<div>
</body>
</html>
Modified http://code.jquery.com/jquery-latest.min.js to a secure url
Modified http://d3js.org/d3.v3.min.js to a secure url
Updated missing url https://raw.githubusercontent.com/jiahuang/d3-timeline/master/src/d3-timeline.js to https://cdn.jsdelivr.net/gh/jiahuang/d3-timeline/src/d3-timeline.js
https://code.jquery.com/jquery-latest.min.js
https://d3js.org/d3.v3.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.8.0/d3-legend.js
https://raw.githubusercontent.com/jiahuang/d3-timeline/master/src/d3-timeline.js