GDN Websiteleri N Kolay Bono

100%

GDN Websiteleri N Kolay Bono

✓ Published1🌍 Public

Aases1996

Last edited May 11, 2020

Created on Apr 1, 2020

This visualization displays Turkish websites’ click-through rates as horizontal bars, with each bar’s length representing CTR and its position along the y-axis ordered by click count. The bar height reflects the impression volume, creating a comparative view across news, entertainment, sports, and other categories. Built with React and D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the chart, while data from the CSV file is loaded via `csv()`. The rectangular elements are styled with steelblue fill, and the visualization is rendered using WebGL.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart

A bubble chart displays advertising performance metrics for Turkish websites, with impressions on the x-axis and website categories on the y-axis. Each rectangle's width encodes the impression count for that site. The visualization uses D3 v5 with `scaleLinear` and `scaleBand` axes, rendering SVG rectangles from CSV data loaded via `d3.csv`. Axis ticks are formatted with `d3.format` to display values in millions, and gridlines are generated through tick size adjustments.

Aases1996

67% match

Loading thumbnail…

Bubble Chart

A bubble chart visualizes the relationship between impressions and clicks for various websites, with each black circle representing a site. The data, sourced from a CSV file, is plotted using D3 v5's `scaleLinear` for both axes, with `axisBottom` and `axisLeft` providing labeled tick marks and gridlines. The chart is rendered as an SVG, with circles positioned via `cx` and `cy` attributes, and a title displayed. The visualization focuses on raw counts rather than the derived CTR metric.

Aases1996

63% match

Loading thumbnail…

D3.js

A bar chart displays population counts for ten countries, using horizontal bars to compare values from a CSV dataset. The visualization renders as an SVG element with a light gray background, where bar lengths correspond to population magnitudes via a linear scale. Built with React and D3 v5, the code uses `d3.csv` to load data, `d3.max` for domain calculation, and SVG `rect` elements styled with steelblue fills. The y-axis positions are mapped using `d3.scaleBand`, though no axis labels or tick marks are rendered in the final output.

Aaizazhussain234

63% match

Loading thumbnail…

Charts Web Component

This React web component renders a horizontal bar chart where a blue rectangle represents each data category, with the bar’s width proportional to its score value. The code defines the bars through D3’s `svg.selectAll`, `enter()`, and `.append("rect")` operations, while explicitly using `x`, `y`, `d3.scaleBand`, `d3.scaleLinear` (implied by the x/y domains) and `d3.axisBottom` for the time-scaled axes. The example includes commented-out D3 code for loading CSV data via `d3.csv`, though the active implementation relies on hard-coded data passed to React’s `ReactDOM.render`.

AAlexCamp2112

62% match

Loading thumbnail…

Untitled

This interactive bar chart displays NBA team statistics for the 2021 regular season, with eight buttons letting viewers switch between metrics such as field goals made, assists, and rebounds. The visualization uses d3.csv to load data from a GitHub-hosted dataset and renders SVG line and circle marks, where each team’s value is shown as a point on a vertical baseline. The d3 scaleBand and scaleLinear axes update with smooth transitions on button clicks, changing the Y-axis domain to fit the selected statistic while coloring points by conference (Western or Eastern).

LLinhao Yu

62% match

Loading thumbnail…

Online Sales

This visualization displays the number of purchases for the top fifteen revenue-generating brands in an online sales dataset, using a horizontal bar chart. The revenue totals appear on the y-axis, while purchase counts are mapped on the x-axis. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` for positioning, with SVG `rect` elements for bars and custom tick rendering. Data is loaded asynchronously from a CSV file via `d3.csv`, and the visualization includes blue grid lines to aid value comparison.

MManideeprenikindi

62% match

Loading thumbnail…

Nagalakshmi_que 1.2

This visualization displays a horizontal bar chart of population figures for 20 countries in 2010, with each bar’s length proportional to the population value. The chart loads CSV data from a GitHub repository using d3.csv and renders with React and SVG. It uses d3.scaleBand for the categorical country axis, d3.scaleLinear for the numeric population axis, and d3.format to abbreviate tick labels (for example, converting billions to “B”). Axes and marks are built through reusable local ES6 modules (AxisBottom, AxisLeft, Marks), with light green bars and styled tick labels.

NNagalakshmi Thota

61% match

Loading thumbnail…

Grafico de barras Estilizado

A horizontally oriented bar chart ranks ten countries by 2020 population, using a teal fill and a clean Roboto typeface. The React application, built with D3 v5, loads CSV data via `d3.csv` and renders SVG elements through scaleBand and scaleLinear for the axes. Styled ticks and a formatted axis label display values in billions, while each bar includes a native SVG tooltip. The code is refactored into separate AxisBottom, AxisLeft, and Marks components for clarity.

RRodrigo Zanco

61% match