public
Created

Network visualization with two searches

  • Download Gist
bind_vis.coffee
CoffeeScript
1 2 3 4 5 6 7
$(".search").keyup () ->
# get which search form is being used
search_id = d3.select(this).attr("id").replace("_search", "")
 
searchTerm = $(this).val()
 
myNetwork.updateSearch(searchTerm, search_id)
index_with_two_searches.html
HTML
1 2 3 4 5 6 7 8 9 10 11
<div class="search_section" class="control">
<form id="name_search_form" class="search_form" action="" method="post">
<p class="search_title">Search <input type="text" class="text-input search" id="name_search" value="" /></p>
</form>
</div>
 
<div class="search_section" class="control">
<form id="year_search_form" class="search_form" action="" method="post">
<p class="search_title">Search <input type="text" class="text-input search" id="year_search" value="" /></p>
</form>
</div>
search_vis.coffee
CoffeeScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
network.updateSearch = (searchTerm, searchId) ->
searchRegEx = new RegExp(searchTerm.toLowerCase())
node.each (d) ->
element = d3.select(this)
# change the search to use searchId input instead of 'name' directly
match = d[searchId].toLowerCase().search(searchRegEx)
if searchTerm.length > 0 and match >= 0
element.style("fill", "#F38630")
.style("stroke-width", 2.0)
.style("stroke", "#555")
d.searched = true
else
d.searched = false
element.style("fill", (d) -> nodeColors(d.artist))
.style("stroke-width", 1.0)

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.