From charlesreid1

No edit summary
 
Line 1: Line 1:
D3 calendar chart
==Notes==
==Notes==


Original example: https://bl.ocks.org/mbostock/4063318
Outline:
* Start with original example: https://bl.ocks.org/mbostock/4063318
* How to go about implementing this ourselves?
* Basically two components:
* Format for the data
* Colormap for the calendar


Basically, chart does all the hard stuff
Lay out these two steps, focusing on these two steps only (ignore rest of code)
* This script visualizes days of the year
* Look at the data provided - what format is it in?
* How are missing values handled - do we need one date for every day of the year? (No)
* Colormap is simple - hard-coded values
* Colormap tools - how to use colorbrewer or Python matplotlib to create custom color maps


You just create a list of formatted dates and times, and provide it a colormap
How the entire visualization is organized:
 
* Colormaps
Main challenge was styling, getting line colors matched up and looking okay, getting colormap figured out
* Canvas data are years, linked to shapes
 
* Write text for years
Colormap script from Python
* Draw a blank tile representing day of the year (use built-in date manipulation to determine which week the date is in, which gives you x, and the day of the week, which gives you y)
 
* Draw outlines of months (probably the most complicated part of this visualization)
==Links==
* Load the data and create colored tiles from the data
 
Some useful tools for the colormaps:
 
webcolors: https://github.com/ubernostrum/webcolors/
 
cmocean: https://matplotlib.org/cmocean/
 
yt volume visualization: http://yt-project.org/doc/index.html
 
text color: change fill attribute https://duckduckgo.com/?q=d3+text+color&t=ffab&ia=qa
 
more colormaps: http://schubert.atmos.colostate.edu/~cslocum/custom_cmap.html


==Other==


Original example: https://bl.ocks.org/mbostock/4063318


==Flags==
==Flags==

Latest revision as of 00:10, 16 February 2018

Notes

Outline:

  • Start with original example: https://bl.ocks.org/mbostock/4063318
  • How to go about implementing this ourselves?
  • Basically two components:
  • Format for the data
  • Colormap for the calendar

Lay out these two steps, focusing on these two steps only (ignore rest of code)

  • This script visualizes days of the year
  • Look at the data provided - what format is it in?
  • How are missing values handled - do we need one date for every day of the year? (No)
  • Colormap is simple - hard-coded values
  • Colormap tools - how to use colorbrewer or Python matplotlib to create custom color maps

How the entire visualization is organized:

  • Colormaps
  • Canvas data are years, linked to shapes
  • Write text for years
  • Draw a blank tile representing day of the year (use built-in date manipulation to determine which week the date is in, which gives you x, and the day of the week, which gives you y)
  • Draw outlines of months (probably the most complicated part of this visualization)
  • Load the data and create colored tiles from the data

Other

Original example: https://bl.ocks.org/mbostock/4063318

Flags