D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
FergusDevelopmentLLC
Full window
Github gist
Crypto reddit "Scam" occurrances
Built with
blockbuilder.org
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://d3js.org/d3.v4.min.js"></script> <title>Top 100 cryptocoins reddit scam chatter</title> <style> body { margin: 0px; } .domain { display: none; } .tick line { stroke: #C0C0BB; } .tick text { fill: #414141; font-size: 8pt; font-family: sans-serif; } .axis-label { fill: #635F5D; font-size: 15pt; font-family: sans-serif; } .bar { cursor: pointer; } </style> </head> <body> <svg width="960" height="1000" xmlns:xlink="https://www.w3.org/1999/xlink"></svg> <script> const xValue = d => d.ratio; const xLabel = 'Scam index'; const yValue = d => d.label; const yLabel = 'Coin'; const margin = { left: 200, right: 30, top: 5, bottom: 75 }; const svg = d3.select('svg'); const width = svg.attr('width'); const height = svg.attr('height'); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const xAxisG = g.append('g') .attr('transform', `translate(0, ${innerHeight})`); const yAxisG = g.append('g'); xAxisG.append('text') .attr('class', 'axis-label') .attr('x', innerWidth / 2) .attr('y', 55) .text(xLabel); const xScale = d3.scaleLinear(); const yScale = d3.scaleBand() .paddingInner(0.3) .paddingOuter(0); const xTicks = 10; const xAxis = d3.axisBottom() .scale(xScale) .tickPadding(5) .tickSize(-innerHeight); const yAxis = d3.axisLeft() .scale(yScale) .tickPadding(5) .tickSize(-innerWidth); const url = "https://www.reddit.com/search?q=%24symbol+and+scam" const row = d => { return { symbol: d['symbol'], coin_name: d['coin_name'], label: d['coin_name'] + " $" + d['symbol'], comment_cnt: parseInt(d['comment_cnt']), market_cap_usd: parseInt(d['market_cap_usd']), search_url: url.replace('symbol',d['symbol']), ratio: (parseInt(d['comment_cnt']) / parseInt(d['market_cap_usd'])) * 1000000 }; }; d3.csv('scam.csv', row, data => { yScale .domain(data.map(yValue).reverse()) .range([innerHeight, 0]); xScale .domain([0, d3.max(data, xValue)]) .range([0, innerWidth]) .nice(xTicks); g.selectAll('a').data(data) .enter().append('a') .attr("xlink:href", function(d){return d.search_url;}) .attr("target", "_blank") .append('rect') .attr('x', 0) .attr('y', d => yScale(yValue(d))) .attr('width', d => xScale(xValue(d))) .attr('height', d => yScale.bandwidth()) .attr('fill', 'steelblue') .attr('class', 'bar'); xAxisG.call(xAxis); yAxisG.call(yAxis); yAxisG.selectAll('.tick line').remove(); }); </script> </body> </html>
https://d3js.org/d3.v4.min.js