index page label margin

Author: paulduchesne

static/design.css

@@ -13,7 +13,10 @@
     src: url('../static/geist/fonts/Geist/otf/Geist-Bold.otf');
 }
 
-
+@font-face {
+    font-family: 'geist_medium';
+    src: url('../static/geist/fonts/Geist/otf/Geist-Medium.otf');
+}
 
 .title_text {
     font-size: 24px;
@@ -30,6 +33,11 @@
     font-family: 'geist_light', sans-serif
 }
 
+.type_labels {
+    font-size: 16px;
+    font-family: 'geist_medium', sans-serif
+}
+
 a, a:visited, a:hover, a:active {
     color: lightseagreen;
     text-decoration: underline;

static/nodes.js

@@ -5,7 +5,7 @@ async function drawNodes(nodes) {
     .data(nodes)
     .enter()
     .append("svg")
-    .attr('width', 600)
+    .attr('width', 1200)
     .attr('height', d => {
       const rowCount = Math.ceil(d.instances.length / 24);
       const lowestY = (rowCount - 1) * 25 + 40;
@@ -14,8 +14,8 @@ async function drawNodes(nodes) {
 
   section.append('text')
     .text(d => d.class_label)
-    .attr('x', 0).attr('y', 30)
-    .attr('class', 'regular_text')
+    .attr('x', 300).attr('y', 32)
+    .attr('class', 'type_labels')
 
   section.selectAll("circle")
     .data(d => d.instances)
@@ -24,7 +24,7 @@ async function drawNodes(nodes) {
     .text(d => d.entity_label)
     .attr('class', 'regular_text circle_labels')
     .attr('id', (d, i) => 'text_' + d.entity_link.split('/').pop())
-    .attr("x",(d,i) => ((i % 24)*25)+11+15)
+    .attr("x",(d,i) => ((i % 24)*25)+11+15+300)
     .attr("y", (d, i) => (Math.floor(i / 24) * 25) + 60+5)
     .attr("opacity",0)
 
@@ -35,19 +35,21 @@ async function drawNodes(nodes) {
     .attr('class', 'round')
     .attr('id', (d,i) => d.entity_link.split('/').pop())
     .attr("r", 10)
-    .attr("cx",(d,i) => ((i % 24)*25)+11)
+    .attr("cx",(d,i) => ((i % 24)*25)+11+300)
     .attr("cy", (d,i) => (Math.floor(i / 24)*25)+60)
     .attr('fill', "#dddddd")
     .attr('stroke', "black")
     .attr('stroke-width', '1px')
     .attr('opacity', 0.8)
     .on('mouseover', function (k, d) {
       d3.selectAll('.round').transition().duration(200).attr('opacity', 0.1);
+      d3.selectAll('.type_labels').transition().duration(200).attr('opacity', 0.1);
       d3.select(this).transition().duration(200).attr('opacity', 0.8);;
       d3.select('#'+'text_'+d.entity_link.split('/').pop()).transition().duration(200).attr('opacity', 1)
     })
     .on('mouseout', function (k, d) {
       d3.selectAll('.round').transition().duration(200).attr('opacity', 0.8);
+      d3.selectAll('.type_labels').transition().duration(200).attr('opacity', 0.8);
       d3.selectAll('.circle_labels').transition().duration(200).attr('opacity', 0);
     })
     .on('click', function (k, d) {

templates/index.html

@@ -2,25 +2,12 @@
 
 {% block content %}
 
-<div style="width: 600px; display: block; margin: 0 auto; padding-top:40px">
-
-
+<div style="width: 1200px; display: block; margin: 0 auto; padding-top:40px;">
     <div id="screen"></div>
     <br>
     <br>
     <br>
     <br>
-
-    <!--{% for c in data %}
-    {% if c.instances %}
-    <tspan class="bold_text">{{ c.class_label}}</tspan><br><br>
-    {% for i in c.instances %}
-    <tspan class="regular_text"><a href="{{ i.entity_link }}">{{ i.entity_label }}</a></tspan><br>
-    {% endfor %}
-    <br>
-    {% endif %}
-    {% endfor %}-->
-
 </div>
 
 <script src="https://d3js.org/d3.v7.min.js"></script>