AhmeTyAtakan

@AhmeTyAtakan·11 public vizzes

Untitled

A multi-line chart shows projected US media ad spending from 2016 to 2022 across six categories, including Digital, TV, Print, Radio, Out-of-home, and Directories. Digital spending rises sharply while most others decline or hold steady. Built with D3 v4, the visualization groups data with `d3.nest()`, draws smoothed paths using `d3.line()` with `curveCardinal`, and adds circles for each data point. Axes, labels, a legend, and a title are appended as SVG elements. The data comes from eMarketer, March 2018.

Jun 4, 2022

Loading thumbnail…

Difference between actual and predicted interference levels

This visualization displays the difference between actual and predicted interference levels for a wireless channel over time. It uses d3.line with curveBasis to render smoothed paths for each method, colored via an ordinal scale and organized with d3.nest. The chart includes a color legend generated by a custom colorLegend function, axis labels, and gridlines. Data is loaded from a CSV file containing timestamp and interference values, rendered as an SVG with d3.v5.

Jun 3, 2022

Loading thumbnail…

Untitled

A single linear axis displays values from 0 to 50, with tick marks placed every 10 units. The axis is rendered as an SVG group translated to a fixed position within a 700-by-100 pixel canvas. The example uses D3.js version 3.5.12, specifically `d3.svg.axis()` and `d3.scale.linear()`, to map the domain to a range of 0 to 400 pixels. Explicit `tickValues` are generated via `d3.range()`, and the axis is appended to an SVG container and called on the group.

Jun 3, 2022

Loading thumbnail…

Fork of Stylized Line Chart

A stylized line chart displays daily temperature readings from the San Francisco week temperature dataset, with time on the x-axis and a fixed 0-100 temperature scale on the y-axis. The visualization uses React components to render SVG elements, with d3.scaleTime and d3.scaleLinear handling the scales. The line path is generated using d3.line with a curveNatural interpolation, styled with a 4-pixel teal stroke. Axes are custom-built with tick marks and rotated labels, all rendered inside a single SVG using the Poppins font.

Jun 2, 2022

Loading thumbnail…

Untitled

This visualization maps the global flow of internet traffic between major cities using animated arcs on a world map. It shows real-time data transfers as bright, moving particles along curved paths, highlighting the interconnectedness of global communication networks. The rendering is built with HTML5 Canvas and JavaScript, leveraging the `d3` library for geographic projections and path calculations. The animation is driven by an internal physics engine that simulates particle movement along the arcs, creating a dynamic, continuous stream of data. The underlying dataset is sourced from a public internet exchange point database, displayed in a dark, minimalist style for clarity.

Jun 2, 2022

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart of temperature over time, using data from a CSV file loaded via `d3.csv`. The visualization uses React components to render an SVG with `d3.scaleTime` and `d3.scaleLinear` for axes, and a path generated by `d3.line()` with `curveNatural` for the line. The y-axis is fixed from 0 to 100, and the chart includes labeled axes and tick marks styled with custom CSS.

Jun 2, 2022

Loading thumbnail…

Fork of Stylized Line Chart

This line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, rendered as a smooth, natural curve using React and SVG. The chart displays time on the x-axis with day-of-week labels and temperature on the y-axis, with gridlines and axis labels styled via CSS. Built with React components and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `curveNatural` to generate the path, while axis ticks are created through custom `AxisBottom` and `AxisLeft` components that leverage D3’s scale methods.

May 27, 2022

Loading thumbnail…

Fork of Stylized Scatter Plotasddd

This scatter plot displays the relationship between Channels and Interference from the Iris Dataset. The visualization uses React with D3 v5 scale functions, including scaleLinear for both axes, and renders SVG circles as marks. The code employs D3’s csv loader to fetch remote data, with formatted tick labels that convert units to billions. Axes are built through reusable React components, and hovering over points reveals tooltips via SVG title elements.

May 13, 2022

Loading thumbnail…

Fork of Refactored Bar Chartasd

This example renders a scatterplot of YouTube channel data, plotting channels along the x-axis and their actual subscriber counts along the y-axis. The visualization uses React to structure SVG elements, with D3 v5 providing the linear scales and tick generation through `scaleLinear` and `extent`. The data is loaded asynchronously from a CSV file using `d3.csv` in a custom `useData` hook. Axes are built manually from scale ticks, while the marks are ten-pixel-radius circles positioned via the scales. The source data comes from a GitHub gist containing channel statistics.

May 12, 2022

Loading thumbnail…

Fork of Stylized Scatter Plotahmmt

This example visualizes the Iris dataset with a scatter plot mapping petal length against sepal width. The static SVG chart uses React components to render axes and circular marks, styled with the Poppins font and a teal color scheme. D3’s `scaleLinear` and `extent` compute the scales, while the `csv` loader fetches data from a GitHub gist and parses numeric fields. Axis ticks are generated from the scales with custom formatting, and each point includes a tooltip using SVG `<title>` elements.

May 12, 2022

Loading thumbnail…

Fork of Stylized Line Chartahmmt

This line chart shows weekly temperature readings in San Francisco over time. The visualization uses a smooth, natural curve to connect data points on a time-based x-axis and temperature-based y-axis, with a simple grid and axis labels. Built with React and D3 v5, the chart employs `scaleTime`, `scaleLinear`, and `curveNatural` to generate the path. It reads CSV data from the Data Canvas Sense Your City dataset, with a minimal loading state and no interactive tooltips.

May 12, 2022