Cannot read my Json file to draw a line chart using D3.js code

Question 1

To use d3.json() you need to set up a webserver. That's easy. Opening files from windows explorer will show static content, but can not handle loading more files via 'HTTP GET'. I guess, that 'string is undefined' is caused, as json file is not loaded and therefore the string inside d3.json is not only empty but undefined.

Download XAMPP - apache webserver, database etc bundled in one simple to install package.
Place the HTML and JSON files in the 'htdocs' folder. Look for the folder called 'htdocs' inside your installation path (e.g. C:\xamppfiles\htdocs).
Start the webserver by the xampp control center.
In your webbrowser navigate to localhost/nameOfTheHtmlFile.html
Post a reply, what you see and what error may be shown.

Question 2

If it should look something like this, keep on reading the 4 tipps. enter image description here

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>