JSFiddle - React, Tailwind, and code Playground

by Jamie Whyte

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
  <body>
    <h2>Using the OpenData Communities API to pull data into a webpage</h2>
    <p>This table has been generated using the results of SPARQL query using an API call</p>
    <h3></h3>
    <table id='sampletable'></table>
    <br />
    <br />

    <p>This simple bar chart has been generated using the results of a SPARQL query from OpenDataCommunities, using an API call</p>
    <br />
    <br />
</body>

CSS

body {
                font-family: sans-serif;
            }
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }

            .sampletable th, td {
                border-bottom: 1px solid #ddd;

            }

            .bar {
                fill: steelblue;
            }

            .bar:hover {
                fill: brown;
            }

JavaScript

var query = 'PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> SELECT ?areaname ?periodlabel ?value WHERE { ?obs <http://purl.org/linked-data/cube#dataSet> <http://opendatacommunities.org/data/homelessness/rough-sleeping/count> .?obs <http://opendatacommunities.org/def/ontology/geography/refArea> ?areauri . ?obs <http://opendatacommunities.org/def/ontology/time/refPeriod> ?perioduri . ?obs <http://opendatacommunities.org/def/ontology/homelessness/roughSleepingObs> ?value . ?areauri rdfs:label ?areaname . ?perioduri rdfs:label ?periodlabel . FILTER (?periodlabel = "2016" && regex(?areaname,"^P"))} ORDER BY ?areaname';
        var url = 'http://opendatacommunities.org/sparql.json';
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: url,
            data: {query: query},
            success: function(data) {
                var bindings = data.results.bindings
                //console.log(bindings[1]["areaname"]["value"]);
                //alert('success: ' + data.results.bindings.length + ' results');
                //console.log(data);
        
        var tableContent = ""
            for (var i = 0; i < bindings.length; i++) {
                tableContent += '<tr><td>' + bindings[i]["areaname"]["value"] + '</td><td>' + bindings[i]["value"]["value"] + '</td></tr>'
            }
            $('#sampletable').html(tableContent);

            var margin = {top: 20, right: 20, bottom: 70, left: 40},
                width = 600 - margin.left - margin.right,
                height = 300 - margin.top - margin.bottom;
            

            var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

            var y = d3.scale.linear().range([height, 0]);

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");

            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .ticks(10);

            var svg =...