If it should look something like this, keep on reading the 4 tipps.
I did a few updates:
JSON needs to be an array, so surround it with [ ] if possible (i think, d3 provides some object-to-array converter)
[{
"Id": 2,
"Name": "ukraine",
"Occurrences": [... ]
}] // brackets are important
d3.json(url, callbackFunction)
This only takes two arguments, not three.
d3.json( "soD3Question.json", function ( data ) { ... });
parse time format
You can not add this function to d3.json. You could iterate over the array and alternate the values by your self.
var parse = d3.time.format( "%b %Y" ).parse;
var parseAllDates = function ( ) {
for ( var i = 0; i < data[0].Occurrences.length; i++ ) {
data[0].Occurrences[i].OccurrenceDate = parse( data[0].Occurrences[i].OccurrenceDate );
}
}
d3.json( "soD3Question.json", function ( jsonData ) {
data = jsonData;
parseAllDates( ); // call date parser
...
SVG colors I just could guess, as there is no stylesheet provided and image contains of 3 black overlapping pathes, colors e.g.
path.domain{ fill: lightgrey; }
path.line{ fill: white;}
path.area{ fill: grey; }
---------- so here comes the full code (don't forget brackets in json-file)-----------
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<title></title>
<style>
path.domain {fill: lightgrey;}
path.line {fill: white;}
path.area {fill: grey;}
</style>
</head>
<body>
<script>
var margin = { top: 80, right: 80, bottom: 80, left: 80 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var data;
var parse = d3.time.format( "%b %Y" ).parse;
var parseAllDates = function () {
for ( var i = 0; i < data[0].Occurrences.length; i++ ) {
data[0].Occurrences[i].OccurrenceDate = parse( data[0].Occurrences[i].OccurrenceDate );
}
}
// Scales and axes. Note the inverted domain for the y-scale: bigger is up!
var x = d3.time.scale().range( [0, width] ),
y = d3.scale.linear().range( [height, 0] ),
xAxis = d3.svg.axis().scale( x ).tickSize( -height ).tickSubdivide( true ),
yAxis = d3.svg.axis().scale( y ).ticks( 4 ).orient( "right" );
// An area generator, for the light fill.
var area = d3.svg.area()
.interpolate( "monotone" )
.x( function ( d ) {
return x( d.OccurrenceDate );
} )
.y0( height )
.y1( function ( d ) {
return y( d.OccurrenceFrequency );
} );
// A line generator, for the dark stroke.
var line = d3.svg.line()
.interpolate( "monotone" )
.x( function ( d ) {
return x( d.OccurrenceDate );
} )
.y( function ( d ) {
return y( d.OccurrenceFrequency );
} );
// d3.json( "soD3Question.json", type, function ( error, data ) {
d3.json( "soD3Question.json", function ( jsonData ) {
data = jsonData;
parseAllDates();
// Filter to one Name; ukraine.
var values = data.filter( function ( d ) {
return d.Name == "ukraine";
} );
// Compute the minimum and maximum date, and the maximum OccurrenceFrequency.
values = values[0].Occurrences;
x.domain( [values[0].OccurrenceDate, values[values.length - 1].OccurrenceDate ] );
y.domain( [0, d3.max( values, function ( d ) {
return d.OccurrenceFrequency;
} )] ).nice();
// Add an SVG element with the desired dimensions and margin.
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 + ")" )
.on( "click", click );
// Add the clip path.
svg.append( "clipPath" )
.attr( "id", "clip" )
.append( "rect" )
.attr( "width", width )
.attr( "height", height );
// Add the x-axis.
svg.append( "g" )
.attr( "class", "x axis" )
.attr( "transform", "translate(0," + height + ")" )
.call( xAxis );
// Add the y-axis.
svg.append( "g" )
.attr( "class", "y axis" )
.attr( "transform", "translate(" + width + ",0)" )
.call( yAxis );
// Add the line path.
svg.append( "path" )
.attr( "class", "line" )
.attr( "clip-path", "url(#clip)" )
.attr( "d", line( values ) );
// Add the area path.
svg.append( "path" )
.attr( "class", "area" )
// .attr( "clip-path", "url(#clip)" ) // needs to be defined
.attr( "d", area( values ) );
// Add a small label for the name.
svg.append( "text" )
.attr( "x", width - 6 )
.attr( "y", height - 6 )
.style( "text-anchor", "end" )
.text( values[0].Name );
// On click, update the x-axis.
function click() {
var n = values.length - 1,
i = Math.floor( Math.random() * n / 2 ),
j = i + Math.floor( Math.random() * n / 2 ) + 1;
x.domain( [values[i].OccurrenceDate, values[j].OccurrenceDate] );
var t = svg.transition().duration( 750 );
t.select( ".x.axis" ).call( xAxis );
t.select( ".area" ).attr( "d", area( values ) );
t.select( ".line" ).attr( "d", line( values ) );
}
} );
</script>
</body>
</html>