require('lx')
João Palmeiro | @joaompalmeiro | Research Intern @Feedzai
{
"data": {
"url": ".../operations.csv",
"name": "operations"
}
}
{
"data": {
"url": ".../operations.csv",
"name": "operations"
},
"mark": {
"type": "bar",
"color": "#f2af29"
}
}
...
"mark": {
"type": "bar",
"color": "#f2af29"
},
"encoding": {
"x": {
"field": "emoji",
"type": "ordinal",
"axis": {
"title": "Sector",
"labelAngle": 0
}
}
}
}
...
"encoding": {
"x": {
"field": "emoji",
"type": "ordinal",
"axis": {
"title": "Sector",
"labelAngle": 0
},
},
"y": {
"field": "amount",
"type": "quantitative",
"axis": {
"title": "Amount (EUR)",
"format": ".2s"
}
}
}
}
...
"encoding": {
"x": {
"field": "emoji",
"type": "ordinal",
"axis": {
"title": "Sector",
"labelAngle": 0
},
"sort": {
"op": "count",
"field": "amount",
"order": "ascending"
}
},
...
...
"layer": [
{
"mark": {
"type": "bar",
"color": "#f2af29"
},
},
{
"mark": {
"type": "text",
"yOffset": -5
},
"encoding": {
"text": {
"field": "amount",
"type": "quantitative",
"format": ".2s"
}
...
...
"layer": [
{
"mark": {
"type": "bar",
"color": "#f2af29"
},
"encoding": {
"tooltip": {
"field": "sector",
"type": "ordinal"
}
}
...
...
"layer": [
{
"selection": {
"select": {
"type": "multi"
}
},
...
"encoding": {
"fillOpacity": {
"condition": {
"selection": "select",
"value": 1
},
"value": 0.3
},
...
class Histogram extends React.Component {
constructor(props) {
super(props);
this.histogramRef = React.createRef();
}
componentDidMount() {
this._createView();
}
componentDidUpdate() {
this._updateView();
}
componentWillUnmount() {
this._clearView();
}
render() {
return <div ref={this.histogramRef} />;
}
}