D3 Bar Graph Example Not Working Locally

how to draw a d3 bar chart for a local geojson file

I wasn't able to completely solve but a few suggestions. Hope it helps and others can edit this or contribute better answer.

d3.layout.stack() does not have function .sort and has .values
instead of .value
load .geojson file with d3.json
you have .append(text) and should be .append("text")
if you are just trying to create bar chart, then I don't think stack layout is needed

d3 Donut chart does not render

first, you should check the reference to the d3-library, i'm getting an error there. try using

<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>

second, you must position your body-div before the script, so the start of your code should look like

<div id="body" height="50%" width="500px" ></div> 
<script>
var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;
//...and so on

D3js - change Vertical bar chart to Horizontal bar chart

I just did the same thing last night, and I basically ended up rewriting the code as it was quicker than fixing all the bugs but here's the tips I can give you.

The biggest issues with flipping the x and y axis will be with things like return h - yScale(d.global) because height is calculated from the "top" of the page not the bottom.

Another key thing to remember is that when you set .attr("x", ..) make sure you set it to 0 (plus any padding for the left side) so = .attr("x", 0)"

I used this tutorial to help me think about my own code in terms of horizontal bars instead - it really helped

http://hdnrnzk.me/2012/07/04/creating-a-bar-graph-using-d3js/

here's my own code making it horizontal if it helps:

var w = 600;
var h = 600;
var padding = 30;

var xScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d){
                                return d.values[0]; })]) //note I'm using an array here to grab the value hence the [0]
        .range([padding, w - (padding*2)]);

        var yScale = d3.scale.ordinal()
            .domain(d3.range(dataset.length))
            .rangeRoundBands([padding, h- padding], 0.05);

        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)

        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", 0 + padding)
            .attr("y", function(d, i){
            return yScale(i);
            })
            .attr("width", function(d) {
                return xScale(d.values[0]);
            })
            .attr("height", yScale.rangeBand())

Can't display a single bar in D3

There are two problems with what you are doing:

1) Your rectangle doesn't have a width. I added this:

...
.attr("class", "bar")
.attr("width", 10)
.attr("y", function (d) {
...

2) Your data is not an array. D3 expects arrays of data to be provided with the .data() method, and you have data = {Value : 22.5} (effectively). I changed it to this:

...
var data = [{'Value' : 22.5}];
...

Updated fiddle is here.

D3 - line plot from bar chart example

I believe this is a line plot, not sure if it meets your requirements, let me know:

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .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 + ")");

//d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {
//console.log(data);
//});
  var data = [
    { x: 1, y: 2500000 },
    { x: 2, y: 3800000 },
    { x: 3, y: 5000000 },
    { x: 4, y: 6900000 },
    { x: 5, y: 6900000 },
    { x: 6, y: 7500000 },
    { x: 7, y: 10000000 },
    { x: 8, y: 17000000 }
  ];

  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 10])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 20000000])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Add dots - scatter plot
  //svg.append('g')
  //  .selectAll("dot")
  //  .data(data)
  //  .enter()
  //  .append("circle")
  //    .attr("cx", function (d) { return x(d.x); } )
  //    .attr("cy", function (d) { return y(d.y); } )
  //    .attr("r", 1.5)
  //    .style("fill", "#69b3a2")
  svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.x) })
        .y(function(d) { return y(d.y) })
        )

  svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top + 20) + ")")
      .style("text-anchor", "middle")
      .text("season");

  // Add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

  // text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("viewers"); 

</script>

<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

d3 loop through local data variable to make stacked bar chart

There are two glitches in your code:

The structure of your data5_pre does not correspond to the one, which will be provided by d3.csv(). This function will pass the parsed rows as an array of objects to the callback. In your code it is an array of arrays having one object each. This should be corrected as follows:
```
var data5_pre = [{
  'hour': 1,
  'Good': 15000,
  'Bad': 4000
}, {
  'hour': 2,
  'Good': 16000,
  'Bad': 1000
}, {
  'hour': 3,
  'Good': 17000,
  'Bad': 1500
}, {
  'hour': 4,
  'Good': 18000,
  'Bad': 1100
}];
```
Inside your function makeChart(data) you are using a flawed assignment
```
var data5 = data5_pre[0];
```
This needs to be corrected to:
```
var data5 = data5_pre;
```

See the updated JSFiddle for a working example.