I think I've hit a wall here. Not sure why my map isn't displaying at all.
I've converted the topojson file to geojson with the topojson client (https://github.com/topojson/topojson-client/blob/master/README.md)
Here's my JS file (I'm seeing my #map and background color, but nothing is rendering inside.)
var width = 900,
height = 600;
var svg = d3.select('#map')
.append('svg')
.attr('width', width)
.attr('height', height);
var projection = d3.geoAlbersUsa()
var path = d3.geoPath()
.projection(projection);
d3.json("https://gist.githubusercontent.com/Lupi7000/d770ce6f2985c3a7bac1099688e4f772/raw/d327f59834fb0f9f2201ad71c3f1711ecb5bf6de/NYTest.json")
.then(function(d) {
console.log(d)
var counties = topojson.feature(d, d.objects.cb_2015_new_york_county_20m)
console.log(counties)
svg.selectAll('path').data(counties.features)
.enter().append('path')
.attr('d', path);
});
Here's my HTML
<html>
<head>
<meta charset="UTF-8">
<title> NYS Map</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/topojson#3.0.2/dist/topojson.min.js"></script>
<script src="https://unpkg.com/topojson-client#3"></script>
<script src="NYmap.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3> NYS MAP CLICKABLE AND SHIT... EVENTUALLY</h3>
<div id="map"><!-- MAP CONTAINER --></div>
</body>
</html>
And my stylesheet
body {
margin: 25px;
}
#map {
width: 900px;
height: 600px;
border: 1px solid black;
background: whitesmoke;
}
path {
fill: black;
}
Any help would be appreciated, thanks!
I've console logged my data so it's coming through, but I'm not sure what I need to do to make it show up.
Related
This question already has an answer here:
D3.js Map with Albers Projection: How to rotate it?
(1 answer)
Closed 3 years ago.
I have been pounding my head for several hours to how does my map shows super small in D3.
I've tried adjusting the scale but it doesn't seam to project correctly.
Here's my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Manda</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<style>
.states :hover {
fill: red;
}
.state-borders {
fill: none;
stroke: #fff;
stroke-width: 0.5px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
svg {
background: rgb(201, 197, 197);
}
</style>
</head>
<body>
<svg></svg>
</body>
<script>
var w = 960,
h = 600;
var svg = d3.select("svg");
svg.attr("width", w).attr("height", h);
var projection = d3
.geoAlbers()
.scale(200)
.translate([w / 2, h / 2]);
var path = d3.geoPath().projection(projection);
d3.queue()
.defer(d3.json, "NCR/Mandaluyong/MandaTopo.json")
.await(ready);
function ready(err, data) {
if (err) return console.log(err);
var brgys = topojson.feature(data, data.objects.Mandaluyong).features;
svg
.selectAll(".brgy")
.data(brgys)
.enter()
.append("path")
.attr("class", "brgy")
.attr("d", path)
.attr("stroke", "black");
}
</script>
</html>
I added an stroke to emphasize the map.
Here's the MandaTopo.json. https://raw.githubusercontent.com/popoy2k/MandaLightMap/master/NCR/Mandaluyong/MandaTopo.json
Here's what i see in the svg
Click me
The projection you're using is d3.geoAlbers, which the documentation says is:
a U.S.-centric configuration of d3.geoConicEqualArea
Since it looks like your data is in the Philippines, maybe a different projection would work better for you.
I tried replacing the line var projection = d3.geoAlbers... with the following, which seemed to work pretty well:
var projection = d3
.geoMercator()
.scale(900000)
.center([121.038505, 14.588329]);
Please,
I need to create an SVG graphic with D3-GraphViz that size fits perfectly to a DIV area. I tried many this but without success.
Here is a sample code:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js#1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz#1.4.0/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
.fade(false)
.renderDot('digraph {a -> b}');
</script>
I saw on D3 website that is a ".fit(true)" property but it simply doesn't work. Any ideas or examples?
You could do it with CSS, scaling the svg that Graphviz produces up to the size of your master element #graph:
#graph svg {
height: 100%;
width: auto;
}
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#graph {
/* Just an example */
height: 250px;
}
#graph svg {
height: 100%;
width: auto;
}
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js#1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz#1.4.0/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
.fade(false)
.renderDot('digraph {a -> b}');
</script>
I had the same issue. Just realised the source js was so out-of-date (I copied that line from an example as well). Simply change the reference to
<script src="https://unpkg.com/d3-graphviz#2.6.1/build/d3-graphviz.min.js"></script>
After that all functionalities listed in README.md of the github repo became available.
I don't know anything about d3, but in pure Graphviz there are tools to control the output size, especially graph attribute size in pair with ratio. They are described in details over the links but let me show just one example:
without size or ratio:
digraph {
c ->d
a -> b
}
with size and ratio=compress:
digraph {
size="10,5"
ratio=compress
c ->d
a -> b
}
If it's js, you can supply the size arguments dynamically, right?
From the documentation of the fit() method:
Note that unless the SVG size has been changed, this options has no effect.
Here's an example showing how to fit the SVG perfectly to a DIV area:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://unpkg.com/#hpcc-js/wasm#0.3.13/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz#3.1.0/build/d3-graphviz.js"></script>
<div id="graph-container" style="width: 50%; height: 500px; margin:auto; border: 1px solid black"></div>
<script>
const graphContainer = d3.select("#graph-container");
const width = graphContainer.node().clientWidth;
const height = graphContainer.node().clientHeight;
graphContainer.graphviz()
.width(width)
.height(height)
.fit(true)
.renderDot('digraph {a -> b}');
</script>
Why the result of bBox.width, bBox.height are both 0? I expect them to be both 500px, how to rectify it?
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js" type="text/JavaScript"></script-->
<style>
rect {
stroke: #9A8B7A;
stroke-width: 1px;
fill: #CF7D1C;
}
svg{
width: 500px;
height: 500px;
background:blue;
}
</style>
<body>
</body>
<script>
var svg = d3.select("body").append("svg");
var bBox = svg.node().getBBox();
console.log(bBox.width + 'x' + bBox.height);
</script>
Try getBoundingClientRect instead of getBBox.
Apologies if this is rudimentary but I am new to D3. I'm having trouble importing my csv data and displaying it as a table that can be opened in a browser. All my data files and code are located in the same folder. Here is the code I have so far and my csv data. Any advice is greatly appreciated!
SublimeFile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<title>Dashboard</title>
<link rel="stylesheet" href="normalize.css">
<style>
table {
border-collapse: collapse;
border: 2px grey solid;
font: 12px sans-serif;
}
td {
border: 1px grey solid;
padding: 5px;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-left:40px;
font-weight: 200;
font-size: 16px;
}
h1 {font-weight: 400;}
p {font-size: 12px;}
text {font-size: 12px;}
</style>
</head>
<body>
<div id = "Chart"></div>
<script>
d3.text("dashboard.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("body")
.append("table")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) { return d; }).enter()
.append("td")
.text(function(d) { return d; });
});
</script>
</body>
</html>
dashboard.csv
Entity,Entity A
Head of Data,Albert Aldridge
DG Lead,Anna Annovo
BIO,April Autumn
Business Participants,"Alfred, Adeline, Amy"
Scope,European Platforms
Scope Trend,Steady
Thanks for your efforts, I was able to figure it out. I was trying to run the .html file in chrome & internet explorer with no luck. It seems to only work in firefox for me.
I have a NVD3 line graph based on a json file. It seems that the interactive guideline is sorted by the order in which each series appears in the JSON file. Is there any way to make this tooltip sorted by y value (at any given x-value) in decending order? One way to do this would be to manually sort the order in which the series data appears in the JSON file but I'm hoping there is perhaps some attributes in the interactiveguideline that would allow me to do this in NVD3 directly?
My html file looks like this:
<html>
<head>
<meta charset="utf-8">
<link href="nvd3/build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="nvd3/build/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="chart" class='with-3d-shadow with-transitions'>
<svg></svg>
</div>
<script>
d3.json("distance.json",function(error,data) {
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart()
.x(function(d,i) { return d[0] })
.y(function(d,i) {return d[1] });
chart.xAxis.tickFormat (function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.x2Axis.tickFormat (function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis.tickFormat(d3.format(',.2f'));
chart.y2Axis.tickFormat(d3.format(',.2f'));
chart.useInteractiveGuideline(true)
;
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
});
</script>
</body>
</html>