https://embed-goodfire-attr-graph.netlify.app/

1<!DOCTYPE html>
2<meta charset='utf-8'>
3<meta name='viewport' content='width=1000, initial-scale=1'>
4<link rel='stylesheet' href='./style.css'>
5<title>Attribution Graphs</title>
6
7<div class='tooltip tooltip-hidden'></div>
8<div class='cg'></div>
9
10<link rel='stylesheet' href='./attribution_graph/cg.css'>
11<link rel='stylesheet' href='./attribution_graph/gridsnap/gridsnap.css'>
12<link rel='stylesheet' href='./feature_examples/feature-examples.css'>
13

14<script src='https://transformer-circuits.pub/2025/attribution-graphs/static_js/lib/hotserver-client-ws.js'></script>

14

15<script src='https://transformer-circuits.pub/2025/attribution-graphs/static_js/lib/d3.js'></script>

15

16<script src='https://transformer-circuits.pub/2025/attribution-graphs/static_js/lib/jetpack_2024-07-20.js'></script>

16

17<script src='https://transformer-circuits.pub/2025/attribution-graphs/static_js/lib/npy_v0.js'></script>

17
18

19<script src='./feature_examples/init-feature-examples-list.js'></script>

19

20<script src='./feature_examples/init-feature-examples-logits.js'></script>

20

21<script src='./feature_examples/init-feature-examples.js'></script>

21
22

23<script src='./util.js'></script>

23

24<script src='./attribution_graph/util-cg.js'></script>

24

25<script src='./attribution_graph/gridsnap/init-gridsnap.js'></script>

25

26<script src='./attribution_graph/init-cg-button-container.js'></script>

26

27<script src='./attribution_graph/init-cg-link-graph.js'></script>

27

28<script src='./attribution_graph/init-cg-node-connections.js'></script>

28

29<script src='./attribution_graph/init-cg-clerp-list.js'></script>

29

30<script src='./attribution_graph/init-cg-feature-detail.js'></script>

30

31<script src='./attribution_graph/init-cg-feature-scatter.js'></script>

31

32<script src='./attribution_graph/init-cg-subgraph.js'></script>

32

33<script src='./attribution_graph/init-cg.js'></script>

33
34

35<script>
36window.init = async function(){
37  var {graphs} = await util.getFile('/data/graph-metadata.json')
38
39  graphs = graphs.map(g => {
40    g.slug = g.scan + '/' + g.slug
41    return g
42  })
43
44  window.visState = window.visState || {
45    slug: util.params.get('slug') || graphs[0].slug,
46    clickedId: util.params.get('clickedId')?.replace('null', ''),
47    isGridsnap: util.params.get('isGridsnap')?.replace('null', ''),
48  }
49  console.log(visState)
50
51  var selectSel = d3.select('.nav').html('').append('select.graph-prompt-select')
52    .on('change', function() {
53      visState.slug = this.value
54      visState.clickedId = undefined
55      util.params.set('slug', this.value)
56      render()
57    })
58
59  selectSel.appendMany('option', graphs)
60    .text(d => {
61      var scanName = util.nameToPrettyPrint[d.scan] || d.scan
62      var prefix = d.title_prefix ? d.title_prefix + ' ' : ''
63      return prefix + scanName + ' — ' + d.prompt
64    })
65    .attr('value', d => d.slug)
66    .property('selected', d => d.slug === visState.slug)
67
68  function render() {
69    d3.select('.cg').html('')
70    initCg(d3.select('.cg'), visState.slug, {
71      clickedId: visState.clickedId,
72      clickedIdCb: id => util.params.set('clickedId', id),
73      isGridsnap: visState.isGridsnap || true
74    })
75
76    var m = graphs.find(g => g.slug == visState.slug)
77    if (!m) return
78    selectSel.at({title: m.prompt})
79    document.title = 'Attribution Graph: ' + m.prompt
80  }
81  render()
82}
83
84window.init()
85</script>

85