TopoJSON drawing solid rectangle despite using turf to rewind - javascript

I am currently trying to draw a map of the US with the counties-albers-10m.json file found on the topojson repo. I initially got a solid rectangle and, after changing fill to none, I am getting specks here and there. Going through stack, I found that the winding order may be wrong so I incorporated turf.js, but nothing is really changing. Here is the code:
var margin = {top: 0, left: 0, right: 0, bottom: 0},
height = 600 - margin.top - margin.bottom,
width = 1200 - margin.left - margin.right;
var svg = d3.select("#map")
.append("svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top +")");
d3.json("counties-albers-10m.json").then(function(data) {
console.log(data);
var projection = d3.geoAlbersUsa();
var path = d3.geoPath()
.projection(projection);
var counties = topojson.feature(data, data.objects.counties).features
console.log(counties)
counties.forEach(function(feature) {
feature.geometry = turf.rewind(feature.geometry, {reverse:true});
})
svg.selectAll(".county")
.data(counties)
.enter().append("path")
.attr("class", "county")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", path);
})
The dreaded black box

Related

How to add "source" caption and a small logo image under a chart in D3.js?

I'm making a chart in D3.js, but I need an expert help how to put a data "source" caption under the chart and a small image/logo.
This is the code:
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 20, right: 30, bottom: 40, left: 90},
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 + ")");
// csv data
d3.csv("XYZ.csv", function(data) {
// Add X axis
var x = d3.scaleLinear()
.domain([0, 100])
.range([ 0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(function(d){
return "$" + d;
}).ticks(10))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
// Y axis
var y = d3.scaleBand()
.range([ 0, height ])
.domain(data.map(function(d) { return d.country; }))
.padding(.1);
svg.append("g")
.call(d3.axisLeft(y))
//Bars
svg.selectAll("myRect")
.data(data)
.enter()
.append("rect")
.attr("x", x(0) )
.attr("y", function(d) { return y(d.country); })
.attr("width", function(d) { return x(d.price); })
.attr("height", y.bandwidth() )
.attr("fill", "red")
})
</script>
the data points from the csv file are as follows: csv file data points with two columns "country" and "price"
Would you be able to help me?
Thanks!
Just add the image and caption as regular HTML. Your HTML will look like this:
<div id="my-dataviz">
<img src="imagefile.jpg">
<svg/>
<p class="caption">Your caption</p>
</div>
And then your d3 selection will look like this:
var svg = d3.select("#my_dataviz svg")

D3.js area chart loading in specific color

I have this area chart going on and I am trying to do a specific color scale with it.
I am not getting any errors in my console so i am assuming i'm loading in the data right something just might be in the wrong place.
I am curious to see what you have to say i am not sure where to go from here. Thank you.
// set the dimensions and margins of the graph
var margin = {top: 80, right: 25, bottom: 30, left: 40},
width = 600 - margin.left - margin.right,
height = 600 - 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 + ")");
//Read the data
d3.csv("https://raw.githubusercontent.com/Nataliemcg18/Data/master/NASA_Surface_Temperature.csv",
// When reading the csv, I must format variables:
function(d){
return { variable : d3.timeParse("%Y")(d.variable), value : d.value }
},
// Now I can use this dataset:
function(data) {
// Add X axis --> it is a date format
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) { return d.variable; }))
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([-1.2, d3.max(data, function(d) { return +d.value; })])
.range([ height, -10 ]);
svg.append("g")
.call(d3.axisLeft(y));
var myColor = d3.scaleSequential()
.interpolator( d3.interpolateRdYlBu)
.domain([1.40, -.80])
// Add the area
svg.append("path")
.datum(data)
.attr("fill", d=>myColor())
.attr("stroke", "#69b3a2")
.attr("stroke-width", 1.5)
.attr("d", d3.area()
.x(function(d) { return x(d.variable) })
.y0(y(0))
.y1(function(d) { return y(d.value) })
)
})
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

D3 Map Showing up as Irregular Shape

I am trying to read a .json file into an HTML file using d3.
When I use one .json file -- for the entire US -- the map shows up fine. However, when I tried switching out the US file for a state of Wisconsin .json file it shows up like this...
Anyone know what the issue could be?
Here's the code:
<script>
var margin = {top: 20, left: 20, bottom: 20, right: 20}
height = 600-margin.top - margin.bottom,
width = 960 - margin.left - margin.right;
var svg2 = d3.select("#map2").append("svg")
.attr("height", height)
.attr("width", width)
.append("g")
.attr("transform", "translate(" + margin.left + "," +
margin.right + ")");
d3.queue()
.defer(d3.json, "wiscCountiesGeneralized.json")
.await(ready);
var projection2 = d3.geoAlbers()
.translate([width/2, height/1.5])
.scale(75)
var path2 = d3.geoPath()
.projection(projection2)
function ready (error, data) {
console.log(data)
var counties = topojson.feature(data,
data.objects.counties).features
console.log(counties)
svg2.selectAll(".counties")
.data(counties)
.enter().append("path")
.attr("class", "counties")
.attr("d", path2)
}
</script>

Append text objects in a natural way D3.js

I'm new to D3. I want to display a sentence on screen, I have the words in an array, when i run the code all words are overlapping, I want them displayed in a natural way like normal text.
var margin = {top: 20, right: 20, bottom: 30, left: 20},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svgContainer = 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 cars=["this","is","a","normal","sentence"];
var text = svgContainer.selectAll("text")
.data(cars)
.enter()
.append("text");
//Add SVG Text Element Attributes
var textLabels = text
.text( function (d) { return d; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
One simple way is to use tspan elements within a single text element.
var margin = {top: 20, right: 20, bottom: 30, left: 20},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svgContainer = 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 text = svgContainer.append("text");
var cars=["this","is","a","normal","sentence"];
var text = text.selectAll("tspan")
.data(cars)
.enter()
.append("tspan");
//Add SVG Text Element Attributes
var textLabels = text
.text( function (d) { return d + ' '; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Axis not ligning up to bars

I have this d3 code, but I'm having trouble to align the bars to the x-axis.
I want the number, which represents an hour (range 0h-23h) to appear in the middle of the number of hours, which is the y-value.
The variable times gets instantiated with 24 values (indexes 0 to 23 h).
Any response or ideas are welcome.
What it looks like now;
http://i.imgur.com/PLu7Uv2.png?1
var times = buildTimeTable(data);
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 500- margin.left - margin.right, height = 200- margin.top - margin.bottom;
var x = d3.scale.linear().domain([0, 23]).range([0, width]);
var y = d3.scale.linear().domain([0, Math.max.apply(Math, times)]).range([height, 0]);
var xAxis = d3.svg.axis().orient("bottom").scale(x).ticks(24);
var yAxis = d3.svg.axis().orient("left").scale(y);
d3.select("#statistics-hours > svg").remove();
var svg = d3.select("#statistics-hours").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 bar = svg.selectAll(".bar").data(times).enter().append("rect")
.attr("class", "bar")
.attr("width", (width)/times.length - 5)
.attr("height", function(d){return height - y(d);})
.attr("x", function(d, i){return i * (width/times.length);})
.attr("y", function(d){return y(d);})
.attr("fill", "steelblue");
svg.append("g").attr("class", "axis").attr("transform", "translate("+ margin.left +"," + (height) + ")").call(xAxis);
svg.append("g").attr("class", "axis").attr("transform", "translate(" + (margin.left) + ",0)").call(yAxis);
You probably want to consider using an ordinal scale.
var x = d3.scale.ordinal().domain(d3.range[0,24]).rangeRoundBands([0,width],.1)
Now, x is just
.attr('x',function(d){return x(d);})
And the width is just...
.attr('width',function(d){return x.rangeBand();})

Categories

Resources