example.html

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="needleplot.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

<style>
  .phosphorylation rect, .phosphorylation path{
    fill: rgb(67, 162, 202)
  }
</style>

<div id="needleplot"></div>

<script>
    var needle_plot = new NeedlePlot({
        element: document.getElementById('needleplot'),
        sequence_length: 393,
        mutations_color_map: {
            proximal: 'orange',
            none: 'grey',
            distal: 'yellow',
            'network-rewiring': 'red'
        },
        data: {
            mutations: [
                {ref: "V", pos: 157, alt: "F", value: 6, category: "proximal"},
                {ref: "Y", pos: 234, alt: "C", value: 18, category: "none"},
                {ref: "R", pos: 273, alt: "H", value: 18, category: "distal"},
                {ref: "R", pos: 282, alt: "W", value: 10, category: "network-rewiring"}
            ],
            sites: [
                {start: 142, end: 167, type: "phosphorylation"},
                {start: 262, end: 276, type: "phosphorylation"}
            ]
        }
    });
</script>