open source with R and JavaScript
{
const width = 600
const height = 400
const chart = ({ width, height }) => {
const xMax = width - 20;
const yMax = height - 20;
const pWidth = xMax / 4;
const pHeight = yMax / 2;
if (width < 10) return null;
return React.createElement(
'svg',
{ width: width, height: height },
React.createElement("rect", {
x: 0,
y: 0,
width: width,
height: height,
rx: 14,
fill: `rgb(245, 242, 227)`
}),
React.createElement(vx.Group, {
transform: `translate(10,10)`
},
React.createElement(vx.PatternLines, {
id: 'vLines',
height: 6,
width: 6,
stroke: 'black',
strokeWidth: 1
}),
React.createElement(vx.PatternLines, {
id: 'hLines',
height: 6,
width: 6,
stroke: 'black',
strokeWidth: 1,
orientation: ['horizontal']
}),
React.createElement(vx.PatternLines, {
id: 'dLines',
height: 6,
width: 6,
stroke: 'black',
strokeWidth: 1,
orientation: ['diagonal']
}),
React.createElement(vx.PatternLines, {
id: 'dhLines',
height: 6,
width: 6,
stroke: 'black',
strokeWidth: 1,
orientation: ['vertical', 'horizontal']
}),
React.createElement(vx.PatternCircles, {
id: 'Circles',
height: 6,
width: 6,
fill: 'black'
}),
React.createElement(vx.PatternCircles, {
id: 'cCircles',
height: 10,
width: 10,
fill: 'black',
complement: true
}),
React.createElement(vx.PatternWaves, {
id: 'Waves',
height: 6,
width: 6,
fill: 'transparent',
stroke: 'black',
strokeWidth: 1,
complement: true
}),
React.createElement(vx.PatternWaves, {
id: 'bWaves',
height: 12,
width: 12,
fill: 'transparent',
stroke: 'black',
strokeWidth: 1,
complement: true
}),
React.createElement(vx.Bar, {
fill: `url(#vLines)`,
height: pHeight,
width: pWidth,
x: 0,
y: 0,
rx: 14
}),
React.createElement(vx.Bar, {
fill: `url(#hLines)`,
height: pHeight,
width: pWidth,
x: pWidth,
y: 0,
rx: 14
}),
React.createElement(vx.Bar, {
fill: `url(#dLines)`,
height: pHeight,
width: pWidth,
x: pWidth * 2,
y: 0,
rx: 14
}),
React.createElement(vx.Bar, {
fill: `url(#dhLines)`,
height: pHeight,
width: pWidth,
x: pWidth * 3,
y: 0,
rx: 14
}),
React.createElement(vx.Bar, {
fill: `url(#Circles)`,
height: pHeight,
width: pWidth,
x: 0,
y: pHeight,
rx: 14
}),
React.createElement(vx.Bar, {
fill: `url(#cCircles)`,
height: pHeight,
width: pWidth,
x: pWidth,
y: pHeight,
rx: 14
}),
React.createElement(vx.Bar, {
fill: `url(#Waves)`,
height: pHeight,
width: pWidth,
x: pWidth * 2,
y: pHeight,
rx: 14
}),
React.createElement(vx.Bar, {
fill: `url(#bWaves)`,
height: pHeight,
width: pWidth,
x: pWidth * 3,
y: pHeight,
rx: 14
})
)
);
};
ReactDOM.render(
React.createElement(chart, {width: width, height: height}),
document.getElementById("chart")
)
}
// using https://beta.observablehq.com/@tmcw/semiotic-in-observable
r = require.alias({
"react": "react@16/umd/react.production.min.js",
"react-dom": "react-dom@16/umd/react-dom.production.min.js"
})
React = r('react')
ReactDOM = r('react-dom')
PropTypes = require("https://unpkg.com/prop-types@15.7.2/prop-types.min.js")
// forked vx repo and used browserify standalone on vx-vx to make something we can use
// I know this is old school but at least it works
//vx = require("https://timelyportfolio.github.io/vx/vx-vx.es.js").catch(() => window.vx)
//vx = require("https://timelyportfolio.github.io/vx/vx.min.js")
vx = require("https://timelyportfolio.github.io/vx/vx.browserify.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
