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="https://d3js.org/d3.v3.min.js"></script>
<body>

<h2>Using the API at statistics.gov.scot to pull data into a webpage</h2>  
<p>This table has been generated using the results of SPARQL query from statistics.gov.scot, via an API call</p>  
<table id='sampletable'></table>  
<br /> 
<br />
<p>This simple bar chart has been generated using the results of a SPARQL query from statistics.gov.scot, via 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 ?value WHERE {?obs <http://purl.org/linked-data/cube#dataSet> <http://statistics.gov.scot/data/child-dental-health> . ?obs <http://purl.org/linked-data/sdmx/2009/dimension#refArea> ?areauri . ?obs <http://purl.org/linked-data/sdmx/2009/dimension#refPeriod> <http://reference.data.gov.uk/id/year/2018> . ?obs <http://statistics.gov.scot/def/measure-properties/ratio> ?value . ?areauri rdfs:label ?areaname . }';

var url = 'https://statistics.gov.scot/sparql.json';

$.ajax({
	method: 'POST',
	dataType: 'json',
	url: url,
	data:{query: query},
	success: function(data) {
		var bindings = data.results.bindings
		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: 180, left: 60}, 
				width = 600 - margin.left - margin.right, 
				height = 400 - 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 = d3.select("body").append("svg") 			
				.attr("width", width + margin.left + margin.right) 			
				.attr("height", height + margin.top + margin.bottom) 			
				.append("g") 			
				.attr("transform","translate(" + margin.left + "," + margin.top + ")");

		var data = bindings ; 
		x.domain(data.map(function(d) { return d["areaname"]["value"]; })); 
		y.domain([0, d3.max(data, function(d) { return d["value"]["value"]; })]);

		svg.append("g") 	
			.attr("class", "x axis") 	
			.attr("transform", "translate(0," + height + ")") 	
			.call(xAxis) 	
			.selectAll("text") 	
			.style("text-anchor", "end") 	
			.attr("dx",...