Skip to content

Instantly share code, notes, and snippets.

@drom
Last active March 1, 2018 08:21
Show Gist options
  • Select an option

  • Save drom/38d45d32e4d43e3b8b2517ce803da912 to your computer and use it in GitHub Desktop.

Select an option

Save drom/38d45d32e4d43e3b8b2517ce803da912 to your computer and use it in GitHub Desktop.
Smith-Chart
const genSmithChart = require('smith-chart');
const React = require('react');
const ReactDOM = require('react-dom');
const $ = React.createElement;
const SC = genSmithChart($);
const margin = { bottom: 40, top: 40, left: 40, right: 40 };
const Demo = (config) => {
const size = 1024;
const r = (size - margin.left - margin.right) / 2;
return (
$('svg', {width: size, height: size},
$('defs', {},
$('style', {}, `
.l1 { stroke: black; fill: none; stroke-linecap: round; stroke-width: 3 }
.l2 { stroke: black; fill: none; stroke-linecap: round; }
.trace { stroke: #cd0000; fill: none; stroke-linecap: round; stroke-width: 5 }
`
)
),
$('rect', {
x: 0, y: 0,
width: size, height: size,
fill: '#fffad9',
rx: 8
}),
$('g', {transform: `translate(${ size - margin.left },${ size / 2 })`},
$(SC.Grid.Re, {r: r, lines: SC.grid }),
$(SC.Grid.Im, {r: r, lines: SC.grid }),
$(SC.ReLabels, { r: r, lines: SC.reLabels0 })
)
)
);
};
ReactDOM.render($(Demo, {}), document.getElementById('root'));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Smith Chart test page</title>
</head>
<body style="margin: 0">
<div id="root" style="height: 90vh;"></div>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment