JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<div id="textResults">Incidents by Zip Code<br/></div>

CSS

.crappyBar{
    background:#0dff11;
    display:inline-block;
    height:12px;
    border-radius:3px;
    border: 1px solid #555;
    margin-left:10px;
}

#textResults{
    margin-bottom:20px;
    font-family:sans-serif;
    padding:10px;
    border:1px solid #555;
    border-radius:10px;
}

JavaScript

$.getJSON("http://data.cityofnewyork.us/resource/erm2-nwe9.json?$select=incident_zip,count(unique_key)&$where=incident_zip=%2711201%27%20OR%20incident_zip=%2710025%27%20OR%20incident_zip=%2710026%27&$group=incident_zip", function(data) {
  console.log(data);
  $(data).each(function (i, d) {
    $("#textResults").append(d.incident_zip + "<div class = 'crappyBar' style = 'width:" + d.count_unique_key/1000 + "px;'></div><br/>");
  });
     
});