JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<body>
<p>This is a d3 tessst</p>
</body>
CSS
/*
// This is datasource.php
<?php
// Allow access from anywhere. Can be domains or * (any)
header('Access-Control-Allow-Origin: *');
// Allow these methods of data retrieval
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
// Allow these header types
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
// Create our data object in that crazy unique PHP way
$arr = array(array("artist" => 1, "artistName" => "AC/DC", "genre" => "Rock", "image" => "acdc.jpg", "description" => "AC/DC are an Australian hard rock band, formed in 1973 by brothers Malcolm and Angus Young. To date they are one of the highest-grossing bands of all time."));
// Return as JSON
echo json_encode($arr);
?>
*/
JavaScript
$(document).ready(function() {
d3.json("https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/master/countries.geojson", function(error, data) {
var myGeoJSON = data.features;
for(i=0;i<myGeoJSON.length;i++){
var path = d3.geo.path();
var width = 960, height = 600;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("d",path)
.attr("fill","#3e429a");
}
});
});