react-d3/react-d3-mobile-card

Name: react-d3-mobile-card

Owner: react-d3

Description: card visualization in mobile

Created: 2015-12-05 12:26:01.0

Updated: 2015-12-05 12:35:04.0

Pushed: 2015-12-21 12:53:45.0

Homepage: null

Size: 704

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-d3-mobile-card

react-d3 mobile card data visualization.

Quick example

Ordinal Card (you can use pictures as ordinal scale)

 strict";

React = require('react');
ReactDOM = require('react-dom');

OrdinalCard = require('react-d3-mobile-card').OrdinalCard;

xample
ction() {
r width = 300;
r height = 400;
r data = require('json!../data/air.json');
r title = function(d) { return d.SiteName; }
r value = function(d) { return d.Status; }
r note = function(d) {
return '<div>???' + d.Status + '</div><div>PM2.5?' + d['PM2.5'] + '</div>';


r cards = data.map(function(d, i) {
return (
  <OrdinalCard
    key= {i}
    data= {d}
    width= {width}
    height= {height}
    title= {title}
    value= {value}
    note= {note}
    ordinalRange= {['./img/PSI-1.png', './img/PSI-2.png']}
    ordinalDomain= {['??', '??']}
    titleClass= {"title-test-class"}
    ordinalClass= {"ordinal-test-class"}
    noteClass= {"note-test-class"}
  />
)



actDOM.render(
<div>
  {cards}
</div>
document.getElementById('blank-ordinal')

Donut Card

 strict";

React = require('react');
ReactDOM = require('react-dom');

RatioCard = require('../../lib/index').RatioCard;

xample
ction() {
r width = 300;
r height = 400;
r data = require('json!../data/water.json');
r title = function(d) { return d.name; }
r max = function(d) {return 100; };
r value = function(d) { return d.percentage; }
r note = function(d) {
return '<div><b>?????' + d.updateAt + '</b></div>'
+ '??????' + d.volumn;


r cards= [];

r(var key in data) {
cards.push(
  <RatioCard
    key= {key}
    data= {data[key]}
    width= {width}
    height= {height}
    title= {title}
    max= {max}
    value= {value}
    note= {note}
    colorRange= {['rgb(26,152,80)', 'rgb(165,0,38)']}
    titleClass= {"title-test-class"}
    donutClass= {"donut-test-class"}
    noteClass= {"note-test-class"}
  />
)



actDOM.render(
<div>
  {cards}
</div>
document.getElementById('blank-water')

Tag Card

Card
y= {i}
ta= {d}
dth= {width}
ight= {height}
tle= {titleSet}
rgins= {{left: 30, bottom: 30, right: 30, top: 30}}
lue= {text}
lor= {color}
te= {noteSet}

License

Apache 2.0