how to create co-ordinates in svg for d3 js map

Question

I referred many links related to my question, but it didn't lead me to expected way. I referred this answer : plot points for image map

My reference js library / demo : http://bl.ocks.org/NPashaP/a74faf20b492ad377312

I'm planning to use this on my website but instead of using map of any country I'll use the floor plan of my building so that hover on any bedrook will give the same effect as it does right now on states of USA.

I noticed that the demo uses uStates.js file : http://bl.ocks.org/NPashaP/raw/a74faf20b492ad377312/3513ad985b2fa93ea35f2fc864cb30540c298171/uStates.js

But I don't know how do I create the co-ordinates given in the file. Can anyone guide me with the process ? Where do I load my layout png ? etc.

I have the AI for floor plan.

In Illustrator, try saving the floor plan as an SVG, which should then give you some coordinates (if you open the SVG in a text editor) that you can write new JSON for, similar to what's in uStates.js. (It looks like it might require `d` attribute values of `` elements, and your floor plan might instead be using `` and `` and such elements instead, in which case you might need to do some finagling in Illustrator to get primitive paths instead.) — Max Starkenburg, Jul 04 '16 at 13:33

score 0 · Answer 1 · answered Jul 04 '16 at 13:39

I don't see a need to use D3 for your application. If you have point locations(x,y) for the various room walls, then create svg polygons. Each polygon has an onmouseover and onmouseout event. See the following basic example.

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
</head>
<body>
<svg width=800 height=800>
<polygon name="My Living Room" onmouseover=showMyRoom(evt) onmouseout=hideMyRoom(evt) stroke-width=1 stroke=black fill=maroon points="100,100 100,300 400,300 400,100" />
</svg>
<div  id=roomNameDiv  style='box-shadow: 4px 4px 4px #888888;-webkit-box-shadow:2px 3px 4px #888888;padding:2px;position:absolute;top:0px;left:0px;visibility:hidden;background-color:linen;border: solid 1px black;border-radius:5px;'></div>
</body>
<script>
function showMyRoom(evt)
{
    var room=evt.target
    room.setAttribute("fill-opacity",".8")
    var roomName=room.getAttribute("name")
    var x=evt.clientX
    var y=evt.clientY
    roomNameDiv.style.left=x+20+"px"
    roomNameDiv.style.top=y+30+"px"
    roomNameDiv.innerHTML=roomName
    roomNameDiv.style.visibility="visible"
}
function hideMyRoom(evt)
{
    var room=evt.target
    room.setAttribute("fill-opacity","1")
    roomNameDiv.style.visibility="hidden"
}
</script>
</html>

how to create co-ordinates in svg for d3 js map

1 Answers1