my d3 map of ny will not load. is there any way someone can help?
here is my code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px sans-serif;
}
path {
stroke-width: 1.75px;
stroke: #531b93;
fill: #919191;
cursor: pointer;
}
path:hover, path.highlighted {
fill: #0096ff;
}
div.tooltip {
position: absolute;
background-color: white;
border: 1px solid black;
color: black;
font-weight: bold;
padding: 4px 8px;
display: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
//Map dimensions (in pixels)
var width = 600,
height = 600;
//Map projection
var projection = d3.geo.mercator()
.scale(58722.369041340586)
.center([-73.97768078496284,40.705833704252484]) //projection center
.translate([width/2,height/2]) //translate to center the map in view
//Generate paths based on projection
var path = d3.geo.path()
.projection(projection);
//Create an SVG
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
//Group for the map features
var features = svg.append("g")
.attr("class","features");
//Create zoom/pan listener
//Change [1,Infinity] to adjust the min/max zoom scale
var zoom = d3.behavior.zoom()
.scaleExtent([1, Infinity])
.on("zoom",zoomed);
svg.call(zoom);
//Create a tooltip, hidden at the start
var tooltip = d3.select("body").append("div").attr("class","tooltip");
d3.json("NYC_MapInfos.geojson",function(error,geodata) {
if (error) return console.log(error); //unknown error, check the console
//Create a path for each map feature in the data
features.selectAll("path")
.data(geodata.features)
.enter()
.append("path")
.attr("d",path)
.on("mouseover",showTooltip)
.on("mousemove",moveTooltip)
.on("mouseout",hideTooltip)
.on("click",clicked);
});
// Add optional onClick events for features here
// d.properties contains the attributes (e.g. d.properties.name, d.properties.population)
function clicked(d,i) {
}
//Update map on zoom/pan
function zoomed() {
features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
.selectAll("path").style("stroke-width", 1.75 / zoom.scale() + "px" );
}
//Position of the tooltip relative to the cursor
var tooltipOffset = {x: 5, y: -25};
//Create a tooltip, hidden at the start
function showTooltip(d) {
moveTooltip();
tooltip.style("display","block")
.text(d.properties.PO_NAME);
}
//Move the tooltip to track the mouse
function moveTooltip() {
tooltip.style("top",(d3.event.pageY+tooltipOffset.y)+"px")
.style("left",(d3.event.pageX+tooltipOffset.x)+"px");
}
//Create a tooltip, hidden at the start
function hideTooltip() {
tooltip.style("display","none");
}
</script>
here is the the geojson file: http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7-b983-07402a2c3f90/download/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson
You can try geojson2svg module for SVG map creation with geojson data. As this is just plain JavaScript you'll have more control. Here is your example
Your html page (index.html):
<html>
<head>
<link rel="stylesheet" href="./map.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/geojson2svg/1.0.3/geojson2svg.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geosquare/reproject-spherical-mercator/v0.1.3/dist/reproject-spherical-mercator.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geosquare/geojson-bbox/master/dist/geojson-bbox.min.js"></script>
</head>
<body>
<h2>Example of New York postal code map created with geojson2svg</h2>
<div id="mapArea" style="width:600px;height:600px;">
<svg id="map" xmlns="http://www.w3.org/2000/svg"
width="600" height="600" x="0" y="0" >
</svg>
<div class="tooltip" ></div>
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
Javascript code (main.js):
var dataURI = "http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7-b983-07402a2c3f90/download/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson";
$.get(dataURI,drawGeoJSON);
$('#map').on('mouseover','path',function(ev) {
console.log(ev.target.feature.properties.postalCode);
var tooltip = document.querySelector('.tooltip');
tooltip.style.top = ev.pageY - 30;
tooltip.style.left = ev.pageX + 5;
tooltip.style.display = 'block';
tooltip.innerHTML = ev.target.feature.properties.PO_NAME;
});
$('#map').on('mouseout','path',function(ev) {
var tooltip = document.querySelector('.tooltip');
tooltip.style.display = 'none';
});
function drawGeoJSON(geojson) {
// covert wgs84 data to Web Mercator projection
var geojsonMerc = reproject(geojson);
// reproject: https://github.com/geosquare/reproject-spherical-mercator
var extent = bbox(geojsonMerc);
// bbox: https://github.com/geosquare/geojson-bbox
var mapExtent = {
left: extent[0],
bottom: extent[1],
right: extent[2],
top: extent[3]
};
var svgMap = document.getElementById('map');
// geojson2svg: https://github.com/gagan-bansal/geojson2svg
var convertor = geojson2svg(
{
viewportSize: {width:600,height:600},
mapExtent: mapExtent,
attributes: {
'vector-effect':'non-scaling-stroke'
},
explode: false
}
);
geojsonMerc.features.forEach(function(f) {
var svgStr = convertor.convert(f,{attributes: {id: 'pc-'+f.properties.OBJECTID}});
var svg = parseSVG(svgStr);
svgMap.appendChild(parseSVG(svgStr));
var svgEle = svgMap.querySelector('#' + 'pc-'+f.properties.OBJECTID);
svgEle.feature = f;
});
}
//parseSVG from http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element
function parseSVG(s) {
var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
var frag= document.createDocumentFragment();
while (div.firstChild.firstChild)
frag.appendChild(div.firstChild.firstChild);
return frag;
}
and CSS (map.css):
body {
font: 12px sans-serif;
}
path {
stroke-width: 1px;
stroke: #531b93;
fill: #919191;
cursor: pointer;
}
path:hover, path.highlighted {
fill: #0096ff;
}
div.tooltip {
position: absolute;
background-color: white;
border: 1px solid black;
color: black;
font-weight: bold;
padding: 4px 8px;
display: none;
}
For advance usage please check this blog
Related
I added amCharts chart to OpenLayers map overlay but chart cursor zoom not work like the image provided below:
The example provided below:
// Overlays init variables and function
var container;
var content;
var closer = document.getElementById('popup-closer');
var overlay;
function createOverlay(width) {
container = document.getElementById('popup');
container.style.width = width;
content = document.getElementById('popup-content');
closer = document.getElementById('popup-closer');
return container;
}
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([51.338076, 35.699756]),
zoom: 12
})
});
map.on("click", function(e) {
let coordinates = e.coordinate;
createOverlay("500px");
content.innerHTML = '<div id="chartdiv" class="ltr"></div>';
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
var data = [];
var value = 50;
for(let i = 0; i < 300; i++){
let date = new Date();
date.setHours(0,0,0,0);
date.setDate(i);
value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({date:date, value: value});
}
chart.data = data;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
//chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
$(".ol-popup").show();
overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanMargin: 20,
autoPanAnimation: {
duration: 50
}
});
map.addOverlay(overlay);
overlay.setPosition(coordinates);
});
/* ol PopUp */
.ol-popup {
text-align: right;
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
border-radius: 10px;
bottom: 12px;
transform: translateX(50%);
display: none;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 50%;
transform: translateX(-50%);
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 50%;
transform: translateX(-50%);
}
.ol-popup-closer {
text-decoration: none !important;
font-size: 16px;
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.map {
height: 400px;
width: 100%;
}
#chartdiv {
width: 100%;
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<i class="fas fa-times ol-popup-closer" id="popup-closer"></i>
<div id="popup-content" class="p-4"></div>
</div>
As you can see, I created a dynamic overlay and add it to map and when user click on map then overlay popup will be shown to the user after that chart created and the chart cursor zoom not work but in the other place of my website it works perfectly.
This occurs due to OpenLayers Overlay entity stopping the event propagation (e.g. click & drag event on chart)
This can be disabled very easily via stopEvent: false;
overlay = new ol.Overlay({
element: container,
stopEvent: false,
autoPan: true,
autoPanMargin: 20,
autoPanAnimation: {
duration: 50
}
});
More on OpenLayers Overlay
The problem with this is that, the same click & drag event will be propagated to the map in the back, and the selection of the chart will be impossible to do. Example of this trouble can be seen on this fiddle. Also there is a ticket on Github regarding this exact issue.
To resolve this I've used a very simple idea, to track when the cursor is on the overlay, and disable map events during those times;
var mouseOver = false;
function createOverlay(width) {
container = document.getElementById('popup');
container.style.width = width;
container.onmouseover = function() {
mouseOver = true; // when cursor is targeting overlay we enable this boolean
};
container.onmouseout = function() {
mouseOver = false; // and disable when out
};
...
}
Then using this boolean as following;
map.on("pointerdrag", function(e) {
if (mouseOver) {
e.stopPropagation();
return;
}
});
to disable dragging event, and;
map.on("click", function(e) {
if (mouseOver) {
return;
}
// rest of chart creation logic here
}
to disable a new overlay creation event.
Final perfectly working fiddle can be found
here
Pirooz bashi buddy
I am attempting to create a D3 tooltip, using the d3-tip library, that changes color based on the background color of the element being hovered over. Here is what I have so far:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
chartType: 'shade'
}
}
drawLegend(hexBorderColor, fontColor) {
var effLegend = d3.select('g.legend')
var heatScale = d3.scaleQuantize().domain([0, 1]).range(['#1147FF', '#86D8FF', '#FFEF67', '#FF7D11', '#F30000'])
var hexbin = d3.hexbin()
.radius(1.5)
.x(d => d.key[0])
.y(d => d.key[1]);
const legendHoverText = ['Bot 20%', '20% - 40%', '40% - 60%', '60% - 80%', 'Top 20%'];
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-1, 0])
.html((d,i) => `<p>${legendHoverText[i]}</p>`)
effLegend.call(tip)
// draw the 5 colorful hexagons (add tip.show and .hide here)
effLegend.selectAll('path')
.data(heatScale.range())
.enter().append('path')
.attr("transform", (d,i) => `translate(${10+(1+i*2)},10)`)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.attr('d', hexbin.hexagon(0))
.transition().duration(1000)
.attr('d', hexbin.hexagon(1.1))
.attr('stroke', hexBorderColor)
.attr('stroke-width', 0.175)
.style('fill', d => d)
// =====
}
componentDidMount() {
const chart = d3.select('.chart')
.attr('width', 325)
.attr('height', 300)
.attr("viewBox", "0, 0, " + 30 + ", " + 30 + "")
this.drawLegend('#AAA', '#EEE')
}
render() {
console.log(this.state.chartType);
return(
<div className='container'>
<svg className='chart'>
<g className="legend"></g>
</svg>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
/* D3 ToolTip */
/* ========== */
.d3-tip {
line-height: .5;
font-weight: bold;
padding: 0px 8px;
/* background: rgba(125, 125, 25, 0.8); */
color: #444;
border-radius: 10px;
border: 2px solid #444;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: blue;
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
/* ===== */
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js">
</script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.8.0-alpha.1/d3-tip.js"></script>
<div id='root'>
Work for gods sake!
</div>
The output is 5 hexagons with the 5 colors in the heatScale() range. I would like for the background color (currently all white), and later font color (currently all black) of the tooltip to change conditional on the background color of the hexagon that is being hovered over. For now, I'd simply like the tooltip background color to be the same as the hexagon color that is being hovered over. However, I am struggling to do this, and any help is appreciated!
The easiest solution is just selecting the d3.tip div and setting the background colour to the bound datum:
d3.select(".d3-tip").style("background-color", d);
Here is the updated code:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
chartType: 'shade'
}
}
drawLegend(hexBorderColor, fontColor) {
var effLegend = d3.select('g.legend')
var heatScale = d3.scaleQuantize().domain([0, 1]).range(['#1147FF', '#86D8FF', '#FFEF67', '#FF7D11', '#F30000'])
var hexbin = d3.hexbin()
.radius(1.5)
.x(d => d.key[0])
.y(d => d.key[1]);
const legendHoverText = ['Bot 20%', '20% - 40%', '40% - 60%', '60% - 80%', 'Top 20%'];
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-1, 0])
.html((d,i) => {
d3.select(".d3-tip").style("background-color", d);
return `<p>${legendHoverText[i]}</p>`})
effLegend.call(tip)
// draw the 5 colorful hexagons (add tip.show and .hide here)
effLegend.selectAll('path')
.data(heatScale.range())
.enter().append('path')
.attr("transform", (d,i) => `translate(${10+(1+i*2)},10)`)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.attr('d', hexbin.hexagon(0))
.transition().duration(1000)
.attr('d', hexbin.hexagon(1.1))
.attr('stroke', hexBorderColor)
.attr('stroke-width', 0.175)
.style('fill', d => d)
// =====
}
componentDidMount() {
const chart = d3.select('.chart')
.attr('width', 325)
.attr('height', 300)
.attr("viewBox", "0, 0, " + 30 + ", " + 30 + "")
this.drawLegend('#AAA', '#EEE')
}
render() {
console.log(this.state.chartType);
return(
<div className='container'>
<svg className='chart'>
<g className="legend"></g>
</svg>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
/* D3 ToolTip */
/* ========== */
.d3-tip {
line-height: .5;
font-weight: bold;
padding: 0px 8px;
/* background: rgba(125, 125, 25, 0.8); */
color: #444;
border-radius: 10px;
border: 2px solid #444;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: blue;
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
/* ===== */
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js">
</script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.8.0-alpha.1/d3-tip.js"></script>
<div id='root'>
Work for gods sake!
</div>
PS: Don't use d3.tip for your tooltips, create them yourself. That way you can customise them the way you want.
I have a map created using D3 and JavaScript. I want to translate the names of Spain's provinces to another language, for example, to English. By default it is Spanish.
I would prefer to make these changes manually, however, I don't know which file should I edit. I tried to edit hdi.json and provincias.json, but it does not work (I get the provinces colored in black without any title, like it is not recognized).
Any help is highly appreciated.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.nombre{
stroke: #000;
stroke-width: 0.5px
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.provinceNames
{
font-size: 0.9em;
font-family: "Lato";
}
.legendLinear
{
font-family: "Lato";
fill:#000000;
}
.legendTitle {
font-size: 1em;
}
#tooltip {
position: absolute;
top: 0;
left: 0;
z-index: 10;
margin: 0;
padding: 10px;
width: 200px;
height: 70px;
color: white;
font-family: sans-serif;
font-size: 1.0em;
font-weight: bold;
text-align: center;
background-color: rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
border-radius:5px;
transition: .2s;
}
</style>
<body>
<div id="container">
<div id="tooltip">
</div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.7.0/d3-legend.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.3.5/conicConformalSpain-proj.min.js"></script>
<script>
var width = 1000,
height = 800;
var projection = d3.geo.conicConformalSpain().scale(width*5).translate([200+width/2, 100+height/2]);
var graticule = d3.geo.graticule().step([2, 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#container").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
//var g = svg.append("g");
d3.json("provincias.json", function(error, provincias) {
d3.json("hdi.json", function(error, hdi) {
var land = topojson.feature(provincias, provincias.objects.provincias);
var color = d3.scale.threshold()
.domain([1, 10, 100, 1000, 10000, 100000, 300000])
.range(["#feebe2","#e5d1ff","#ba93ef", "#8D4CE5","#6100E5","#4d00b7","#C94D8C"]);
svg.selectAll(".nombre")
.data(land.features)
.enter()
.append("path")
.attr("d", path)
.attr("class","nombre")
.style("fill",function(d){ return color(hdi[d.properties.nombre]) })
.on("mouseover", function(d){
//Show the tooltip
var x = d3.event.pageX;
var y = d3.event.pageY - 40;
d3.select("#tooltip")
.style("left", x + "px")
.style("top", y + "px")
.style("opacity", 1)
.text( "... " + d.properties.nombre + " ... " + hdi[d.properties.nombre]);
})
.on("mouseout", function(){
//Hide the tooltip
d3.select("#tooltip")
.style("opacity", 0);
});
svg
.append("path")
.style("fill","none")
.style("stroke","#000")
.attr("d", projection.getCompositionBorders());
svg.append("g")
.attr("class", "provinceNames")
.selectAll("text")
.data(land.features)
.enter()
.append("svg:text")
.text(function(d){
return d.properties.nombre;
})
.attr("x", function(d){
return path.centroid(d)[0];
})
.attr("y", function(d){
return path.centroid(d)[1];
})
.attr("text-anchor","middle")
.attr('fill', 'black');
d3.select("svg").append("g")
.attr("class", "legendLinear")
.attr("transform", "translate(240,700)");
var logLegend = d3.legend.color()
.title("...")
.shapeHeight(20)
.shapeWidth(90)
.shapeRadius(10)
.labels([0, 10, 100, 1000, 10000, 100000, 300000])
.orient("horizontal")
.labelFormat(d3.format(".00f"))
.labelAlign("start")
.scale(color);
svg.select(".legendLinear")
.call(logLegend);
});
});
</script>
It seems that you're using this JSON for the provinces in Spain.
If that's correct, the file is "provincias.json" and this is the path for the names:
provincias.objects.provincias.geometries[index].properties.nombre
Where index is the index you want in the geometries array.
Check this demo:
d3.json("https://cdn.rawgit.com/rveciana/5919944/raw//provincias.json", function(provincias) {
provincias.objects.provincias.geometries.forEach(function(d) {
console.log(d.properties.nombre)
})
})
<script src="https://d3js.org/d3.v4.min.js"></script>
I'm trying to draw svg map with d3 from topojson file, but all I got is messed up lines.
I'm using most of the code I found on http://www.tnoda.com/blog/2013-12-07. When I use topojson files from that site, everything works fine. I tought maybe the problem is in my topojson file, but when I import it in mapshaper, I get normal map.
plnkr: http://plnkr.co/edit/TYiT5AoI29nEHC3Fre6D?p=preview
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="//code.jquery.com/jquery-2.0.0.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
</head>
<body>
<div id="map"></div>
<script src="script.js"></script>
</body>
</html>
script.js
var m_width = $("#map").width(),
width = 800,
height = 500
var projection = d3.geo.mercator()
.scale(105)
.translate([width / 2, height / 1.5]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#map").append("svg")
.attr("width", m_width)
.attr("height", m_width * height / width);
var g = svg.append("g");
d3.json("zupanije.max.topo.json", function(error, us) {
g.append("g")
.attr("id", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter()
.append("path")
.attr("id", function(d) { return d.id; })
.attr("d", path)
});
styles.css
#map {
background-color: #fff;
border: 1px solid #ccc;
}
.background {
fill: none;
pointer-events: all;
}
#states{
cursor: pointer;
fill: #cde;
stroke: #fff;
stroke-linejoin: round;
stroke-linecap: round;
}
#states .active {
fill: #89a;
}
pre.prettyprint {
border: 1px solid #ccc;
margin-bottom: 0;
padding: 9.5px;
}
I was having the exact same problem and spent hours re-converting my SHP file to GeoJSON/Topojson in command line with different settings. The solution is quite simple!
- Get QGIS here: https://www.qgis.org/en/site/forusers/download.html
- open your SHP file or GeoJSON file
- Select the layer you want to export
- Go to Layer > Save as
- Format: Geojson
- CSR: WGS 84, EPSG: 4326
- Save.
Enjoy!
I'm trying to create a flow digram using data from the server, I am able to draw the states and connection correctly, states are draggable but same is not working with the connectors.
please see the sample code below.
<html>
<head>
<script src="../../lib/jquery-1.9.0.js"></script>
<script src="../../lib/jquery-ui-1.9.2-min.js"></script>
<script src="../../lib/jquery.jsPlumb-1.4.1-all.js"></script>
<script>
$(document).ready(function() {
var i = 0;
var top = 50;
var left = 500;
for (var j = 0; j <= 5; j++) {
top += 150;
var newState = $('<div>').attr('id', 'state' + j).addClass('item');
var title = $('<div>').addClass('title').text('State ' + j);
newState.css({
'top': top,
'left': left
});
newState.append(title);
$('#container').append(newState);
if (j > 0) {
var firstInstance = jsPlumb.getInstance();
firstInstance.importDefaults({
Connector: ["Flowchart", {curviness: 150}],
Anchors: ["BottomCenter", "TopCenter"]
});
firstInstance.connect({
endpoint: "Rectangle",
source: "state" + (j-1),
target: "state" + (j),
paintStyle: {lineWidth: 3, strokeStyle: 'black'},
overlays: [
"Arrow",
["Label", {location: 0.25, id: "myLabel"}]
]
});
}
jsPlumb.draggable(newState, {
containment: 'parent'
});
}
});
</script>
<style type="text/css">
.item {
border: 1px solid black;
background-color: #ddddff;
}
#container {
border: 1px solid gray;
width: 1500px;
height: 1500px;
}
.title {
padding: 10px;
cursor: move;
}
.item {
position: absolute;
border: 1px solid black;
background-color: #ddddff;
}
</style>
<title>Getting started with jsPlumb</title>
</head>
<body>
<div id="container"></div>
</body>
I need to make the connectors drag-able, any help is apprenticed.
issue is solved
used jsPlumb.connect() instesd of firstInstance.connect().