| <?php | |
| /* | |
| * Converts CSV to JSON | |
| * Example uses Google Spreadsheet CSV feed | |
| * csvToArray function I think I found on php.net | |
| */ | |
| header('Content-type: application/json'); | |
| // Set your CSV feed |
Horizon charts combine position and color to reduce vertical space. Start with a standard area chart, then mirror negative values (in blue) or offset them vertically. Click the + button above to increase the number of bands, turning the area into a horizon.
Implemented with the d3.horizon plugin.
| if (!require(quantmod)) { | |
| stop("This app requires the quantmod package. To install it, run 'install.packages(\"quantmod\")'.\n") | |
| } | |
| # Download data for a stock, if needed | |
| require_symbol <- function(symbol) { | |
| if (!exists(symbol)) | |
| getSymbols(symbol, from = "1900-01-01") | |
| } |
This example demonstrates loading of CSV data, which is then quantized into a diverging color scale. The values are visualized as colored cells per day. Days are arranged into columns by week, then grouped by month and years. Colors by Cynthia Brewer. Layout inspired by Rick Wicklin and Robert Allison. Dow Jones historical data copyright Yahoo! Finance or independent data provider; fair use for educational purposes.
##Fork of Mike Bostock's original force-directed example. This fork uses an ugly csv which unfortunately is just a fact of life in my world. JSON is highly recommended unless it is unavailable.
##Original readme.md is below and does a very nice job of explaining the graph.
This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.
| source | target | value | |
|---|---|---|---|
| Agricultural Energy Use | Carbon Dioxide | 1.4 | |
| Agriculture | Agriculture Soils | 5.2 | |
| Agriculture | Livestock and Manure | 5.4 | |
| Agriculture | Other Agriculture | 1.7 | |
| Agriculture | Rice Cultivation | 1.5 | |
| Agriculture Soils | Nitrous Oxide | 5.2 | |
| Air | Carbon Dioxide | 1.7 | |
| Aluminium Non-Ferrous Metals | Carbon Dioxide | 1 | |
| Aluminium Non-Ferrous Metals | HFCs - PFCs | 0.2 |
| <!DOCTYPE html> | |
| <script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| rect { |
###d3 inside a resizable and draggable jquery ui element This offers an example of how we might use the jquery ui interactions to act as a container for a d3 graph. I randomly chose this example from Mike Bostock, but really any d3 could benefit from this behavior. The majority of this code (probably all the good stuff) should be attributed to the following references:
###original readme.md is below describing the d3 portion of the code This example demonstrates how to add visible and draggable handles to D3’s d3.svg.brush component, rather than that relying on the invisible boundary of the brush extent. The handle sizes here are exaggerated for demonstration purposes!
This chart compares the BRIC countries (Brazil, Russia, India and China) with a new group of upstarts, MIST (Mexico, Indonesia, South Korea, Turkey). The data are from the World Bank. It was my attempt to achieve object constancy for multiple sets of time series data. I used d3.nest() to sort one big CSV file based on each economic indicator, then used d3.key() on the header row (the countries) to make ensure constancy. Check the boxes at the top to highlight the country groups. An interpretation of this visual can be found on my website.
#zui53 Zoom Adaptation of Mike Bostock's Line Chart I have not seen anyone pair zui53 with so I thought I would experiment by adding the zoom and drag functionality to this line chart. I also wanted to test my skills by using a long form csv dataset with two series. zui53 zoom and drag does not work in Internet Explorer. Works best when opened in full window
Original Readme.md is below
A line chart with mouseover so that you can read the y-value based on the closest x-value. The x-value is found using d3.mouse and scale.invert. The y-value is then found by bisecting the data.