3f:null 40:["$","title",null,{"children":"Services Bar Chart Race | Censys Workspace | Observable"}] 46:T502,md`The data for the race is a CSV with columns *date* (in [YYYY-MM-DD format](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-date-time-string-format)), *name*, *value* and optionally *category* (which if present determines color). To replace the data, click the file icon in the cell above.`47:T75a,function labels(svg) { let label = svg .append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => (label = label .data(data.slice(0, n), (d) => d.name) .join( (enter) => enter .append("text") .attr( "transform", (d) => `translate(${x((prev.get(d) || d).value)},${y( (prev.get(d) || d).rank )})` ) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text((d) => d.name) .call((text) => text .append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em") ), (update) => update, (exit) => exit .transition(transition) .remove() .attr( "transform", (d) => `translate(${x((next.get(d) || d).value)},${y( (next.get(d) || d).rank )})` ) .call((g) => g .select("tspan") .tween("text", (d) => textTween(d.value, (next.get(d) || d).value) ) ) ) .call((bar) => bar .transition(transition) .attr("transform", (d) => `translate(${x(d.value)},${y(d.rank)})`) .call((g) => g .select("tspan") .tween("text", (d) => textTween((prev.get(d) || d).value, d.value) ) ) )); }48:Ta9f,SERVICE_ICONS = ({ // Unknown UNKNOWN: "question", // Common HTTP: "pages", SSH: "terminal", TELNET: "terminal", // Routing BGP: "global", DNS: "contacts-book-2", DICT: "contacts-book-2", ICAP: "global", IDENT: "global", IKE: "global", KERBEROS: "global", LDAP: "contacts-book-2", MDNS: "contacts-book-2", NATPMP: "direction", NETBIOS: "direction", NTP: "time", POPPASSD: "contacts-book-2", PORTMAP: "direction", RIPV1: "direction", SCCM: "global", // File Transfer FTP: "folder-transfer", TFTP: "folder-transfer", RSYNC: "folder-transfer", SMB: "folder-transfer", // Mail SMTP: "mail", IMAP: "mail", POP3: "mail", PIGEONHOLE: "mail", // Databases MYSQL: "database-2", BOLT: "database-2", CASSANDRA: "database-2", DB2: "database-2", ELASTICSEARCH: "database-2", KAFKA: "database-2", MONGODB: "database-2", MSSQL: "database-2", ORACLE: "database-2", POSTGRES: "database-2", RETHINKDB: "database-2", ZOOKEEPER: "database-2", // Remote Access ANY_CONNECT: "computer", ARD: "computer", CITRIX: "computer", FORTIGATE: "computer", IPMI: "computer", RDP: "computer", VNC: "computer", PC_ANYWHERE: "computer", OPENVPN: "computer", PPTOP: "computer", SENTINEL: "computer", TEAM_VIEWER: "computer", X11: "computer", XDMCP: "computer", // Cameras RTSP: "webcam", // Routers MIKROTIK_BW: "router", PPTP: "router", SLP: "router", DIGI: "router", NETIS: "router", RADIUS: "router", SSDP: "router", UBIQUITI: "router", UPNP: "router", WS_DISCOVERY: "router", // ICS AMQP: "building-3", ATG: "gas-station", BACNET: "building-3", MODBUS: "building-3", CODESYS: "building-3", CWMP: "building-3", DNP3: "building-3", EIP: "building-3", FINS: "building-3", FOX: "building-3", GE_SRTP: "building-3", HART: "building-3", IEC60870_5_104: "building-3", MMS: "building-3", PCWORX: "building-3", PRO_CON_OS: "building-3", S7: "building-3", SNMP: "building-3", // IoT MQTT: "home-gear", BEANSTALKD: "home-gear", COAP: "home-gear", // Phone SIP: "phone", SKINNY: "phone", MURMUR: "phone", TEAMSPEAK: "phone", // Chat IRC: "message", XMPP: "message", // Printers IPP: "printer", PJL: "printer", // Cache MEMCACHE: "database", REDIS: "database", // Game MINECRAFT: "gamepad", TERRARIA: "gamepad", VALVE: "gamepad", // Other ANDROMOUSE: "mouse", BITCOIN: "bit-coin", BITTORRENT_TRACKER: "user-shared", BITTORRENT: "user-shared", CHARGEN: "file-text", IKETTLE: "cup", KUBERNETES: "anchor", PROMETHEUS: "fire", QOTD: "single-quotes-r", STATSD: "bar-chart-2", TORCONTROL: "spy", WDBRPC: "bug-2" })49:T4c5,function icons(svg) { let icon = svg.append("g").selectAll("icon"); return ([date, data], transition) => (icon = icon .data(data.slice(0, n).reverse(), (d) => d.name) // Proper slicing of the icon together with the bar. .join( (enter) => enter .append("svg:image") .attr("xlink:href", (d) => getIconUrl(d.name)) .attr( "transform", (d) => `translate(${x((prev.get(d) || d).value)},${y( (prev.get(d) || d).rank )})` ) .attr("height", barSize * 0.6) .attr("y", "4px") .attr("x", "8px"), (update) => update.attr("xlink:href", (d) => getIconUrl(d.name)), (exit) => exit .transition(transition) .remove() .attr( "transform", (d) => `translate(${x((next.get(d) || d).value)},${y( (next.get(d) || d).rank )})` ) ) .call((bar) => bar .transition(transition) .attr("transform", (d) => `translate(${x(d.value)},${y(d.rank)})`) )); }4a:[{"id":"0381d8a5455e5b1e85a24f58336ef5224410a65e98559c341cbdc963ff2bee74df9f08ea9dcfcf14f0770a1def8bb7e411f9e388f1660ce9dbf01c957d3e92b1","href":"https://static.observableusercontent.com/files/0381d8a5455e5b1e85a24f58336ef5224410a65e98559c341cbdc963ff2bee74df9f08ea9dcfcf14f0770a1def8bb7e411f9e388f1660ce9dbf01c957d3e92b1","name":"bquxjob_30b28bc_18969f94dfa.csv","type":"text/csv","lastModified":1690466967881.682,"size":1185490}] 44:{"id":"aa9fe59b2057adc8","slug":"services-bar-chart-race","title":"Services Bar Chart Race","thumbnail":"ce01a1de7822a892279c2cb5ddfa5ee4f5cd521c3e8548534c586a5ded566141","access_level":"public","create_time":"$D2023-07-27T14:09:27.881Z","update_time":"$D2023-09-08T18:08:27.037Z","view_time":null,"first_public_time":"$D2023-09-27T20:21:12.018Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"b8fb3681ff04dae2","login":"censys-ws","name":"Censys Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d96e197eaa2b62e114c62495f4fbd0e430c97ebc1338f4d6a2df01e4509f2b02","tier":"starter_2024","bio":"","following":false},"version":3291,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"da174358d3260afc","login":"aidan-censys","name":"Aidan H","avatar_url":"https://avatars-next.observableusercontent.com/e0fdd5a037b6309fdd434d069f7ea68ac0079ed0d7f2975f8c2d48b137a2288f","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"da174358d3260afc","login":"aidan-censys","name":"Aidan H","avatar_url":"https://avatars-next.observableusercontent.com/e0fdd5a037b6309fdd434d069f7ea68ac0079ed0d7f2975f8c2d48b137a2288f","tier":null,"role":"editor"},{"type":"team","id":"b8fb3681ff04dae2","login":"censys-ws","name":"Censys Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d96e197eaa2b62e114c62495f4fbd0e430c97ebc1338f4d6a2df01e4509f2b02","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Services Bar Chart Race","cells":[{"id":239,"value":"md`# Services Bar Chart Race\n\nThis is a pedagogical implementation of an animated [bar chart race](/@d3/bar-chart-race). Read on to learn how it works, or fork this notebook and drop in your data!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3061,"value":"OUTLIER_SERVICES = [\"HTTP\", \"CWMP\", \"UNKNOWN\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"data = d3\n .csvParse(\n await FileAttachment(\"bquxjob_30b28bc_18969f94dfa.csv\").text(),\n d3.autoType\n )\n .filter((d) => !OUTLIER_SERVICES.includes(d.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"viewof replay = html`