Skip to main content
Log in
S

soniyaa-dv

@soniyaa-dv·16 public vizzes

Loading thumbnail…

owl of fruit- General Upadate Pattern

This example demonstrates the D3 general update pattern through a row of fruit shapes that change over time. Five apples initially appear, then an apple is removed, a fruit’s type switches to a lemon using `scaleOrdinal` for color and radius, and another apple is deleted via data joins with `selectAll`, `enter`, `merge`, and `exit`. The SVG rendering uses separate selections for groups and text, with `d3.select` and `d3.range` driving the timed state changes.

Aug 8, 2020
Loading thumbnail…

owl of fruit- General Upadate Pattern

A fruit bowl visualization demonstrates D3's general update pattern. Five apples render as green circles at fixed positions. After one second, `fruits.pop()` removes the last apple, causing an exit transition that removes its circle. After two seconds, the fourth fruit's type changes to lemon, updating the circle's fill to yellow and radius from 50 to 30 via `d3.scaleOrdinal` color and radius scales. The code uses `selectAll`, `.enter()`, `.merge()`, and `.exit().remove()` to manage data joins with SVG circles.

Jul 31, 2020
Loading thumbnail…

Smiley face

A yellow smiley face rendered in SVG animates its eyes, eyebrows, and mouth in a looping sequence. The face is built with D3 v5 selections and shapes, including circles for the eyes and an `arc` path for the mouth, all centered within an SVG of 960 by 500 pixels. The animation uses chained `transition` calls to move the eye group horizontally and shift the eyebrows vertically, creating a playful, winking expression. The code defines all dimensions and offsets as variables, and the rendering is fully client-side with no external data source.

Jul 31, 2020
Loading thumbnail…

Line chart

This line chart visualizes temperature readings in San Francisco over time, using a green area fill beneath the curve to emphasize the data range. The chart is rendered with D3 v5 in an SVG, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area` with a basis curve. The data is loaded from a CSV file containing timestamp-temperature pairs, with axes labeled and grid lines styled via CSS.

Jul 27, 2020
Loading thumbnail…

Let's make a line chart with D3.js!

This example demonstrates how to build a line chart using D3.js v5, rendering the visualization as an SVG element within an HTML page. The code initializes an SVG canvas and prepares to map data to x and y coordinates, though the specific data array and line generator are not visible in the provided snippet. The example relies on the core D3 library for DOM manipulation and SVG creation, with the chart’s appearance styled through an external stylesheet. The rendering approach uses standard SVG paths, making it suitable for static or animated line-based data representations.

Jul 27, 2020
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays hourly temperature readings in San Francisco over time, with each data point represented as a green circle. The visualization uses D3 v5 with SVG rendering, featuring axis labels, a title, and a clean margin-based layout. Data is loaded from a CSV file hosted on GitHub, parsed with D3’s `csv` method, and mapped using `scaleTime` and `scaleLinear`. Axes are generated with `axisBottom` and `axisLeft`, and the chart’s styling is defined in an external CSS file. The example demonstrates a simple scatter plot with effective use of D3’s data-binding and scales.

Jul 27, 2020
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays temperature readings over time in San Francisco, with each circle representing a data point from the Auto MPG Data Set hosted by the UCI Machine Learning Repository. The visualization uses d3.csv to load the data and d3.scaleTime and d3.scaleLinear for the x and y axes respectively, rendering as SVG via d3.select. Axis labels, tick marks, and a title are added using d3.axisLeft, d3.axisBottom, and descriptive text elements, with styling controlled through external CSS.

Jul 27, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature readings in San Francisco, plotting temperature against time and filling the area under the curve with a maroon path. The visualization uses D3 v5, employing `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the filled path, and `axisBottom`/`axisLeft` for tick marks. Data is loaded via `csv` from a GitHub-hosted file, with timestamps parsed as dates and temperatures converted to numbers. The SVG rendering includes styled axis labels and a title.

Jul 27, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The area beneath the curve is filled in maroon, and the chart includes labeled axes and a title. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `area` with `curveBasis`, `axisBottom`, and `axisLeft` to render the SVG. Data is loaded as CSV from a GitHub gist, with timestamps parsed as dates and temperatures converted to numbers.

Jul 27, 2020
Loading thumbnail…

Scatter plot with D3.js!

This scatter plot displays the happiness scores of ten countries, showing each nation’s score along the horizontal axis with country names on the vertical axis. The visualization uses D3.js v5 with an SVG rendering approach, loading data from a CSV file. The code employs `d3.csv`, `scaleLinear`, and `scalePoint` to map scores and countries, while `axisBottom` and `axisLeft` generate the axes with tick lines. Circles are appended for each data point, styled with steelblue fill and opacity.

Jul 25, 2020
Loading thumbnail…

Scatter plot with D3.js!

This scatter plot displays the happiness scores of ten countries, with each country positioned along the y-axis and its score plotted on the x-axis. The visualization is rendered as an SVG using D3.js v5, employing `scaleLinear` for the x-axis and `scalePoint` for the categorical y-axis. Data is loaded from a CSV file via `d3.csv`, and axes are generated with `axisBottom` and `axisLeft`. The chart includes labeled axes and a title, with gridlines created through tick sizes.

Jul 25, 2020
Loading thumbnail…

Customising axes with D3.js!

This example shows a horizontal bar chart of the ten happiest countries ranked by their happiness scores. The visualization highlights custom axis styling, where tick marks and lines are recolored, and axis domains are removed for a cleaner look. Built with D3.js v5, it loads data from a CSV file and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The code also leverages `axisLeft` and `axisBottom` to generate axes, with SVG rectangles representing each bar.

Jul 23, 2020
Loading thumbnail…

Customising axes with D3.js!

A horizontal bar chart displays the happiness scores of ten countries, using a steelblue fill for each bar. The visualization customizes the axes with D3.js v5 APIs, including `scaleLinear` for the score axis, `scaleBand` for the country axis, and `axisLeft`/`axisBottom` for rendering the tick marks. The SVG chart, drawn via the `select` and `append` methods, reads data from a local CSV file and sets a large font size for all text labels.

Jul 23, 2020
Loading thumbnail…

Let's make a BAR CHART with D3.js!

A bar chart displays happiness scores for ten countries, with horizontal bars sorted from Finland’s highest score to Austria’s lowest. The visualization loads data from a CSV file and renders SVG rectangles using D3 v5’s `scaleLinear` for bar widths, `scaleBand` for vertical positioning, and `selectAll`–`data`–`enter` joins. The chart fills the entire 960×500 SVG canvas, with no axes or labels, emphasizing raw score comparisons across countries.

Jul 22, 2020
Loading thumbnail…

Let's make a BAR CHART with D3.js!

A horizontal bar chart displays national scores from a CSV dataset, with each bar representing a country and its length corresponding to the score value. The visualization uses D3 v5's `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` to render the axes. Bars are drawn as SVG rectangles filled with steelblue via the `selectAll('rect')` data join, with margins and padding for layout. The code reads `data.csv` asynchronously and converts scores to numbers before rendering.

Jul 22, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered as an SVG in D3.js demonstrates basic DOM manipulation and animation. The face is composed of simple shapes—a circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. The code uses `d3.select` and `d3.append` to build the hierarchy, with a `transition` animating the eyebrows upward and back over two timed intervals. The example shows how D3 can drive SVG element attributes and transformations.

Jul 21, 2020