ChocoOrange

@ChocoOrange·10 public vizzes

Ball of fruit

Five fruit circles start in a row as red apples. The visualization animates through a sequence: one fruit disappears, the middle apple turns yellow to become a lemon, and another fruit is removed. Using D3 selection transitions, each circle’s radius and fill are interpolated from scales defined with `scaleOrdinal`, including radius values of 50 and 30 and colors red and yellow. The code demonstrates D3’s `.transition()` API with `.duration()` for entering, merging, and exiting elements within an SVG.

Jul 19, 2020

Loading thumbnail…

World population area chart

This visualization shows world population by year as a smooth area chart, with a gradient-filled curve conveying growth over time. The SVG is rendered using D3 v5, employing `scaleTime` and `scaleLinear` for axes, with `area` and `curveBasis` for the path. Data comes from a CSV file loaded via D3’s `csv` function, and axes are customized with `axisBottom`, `axisLeft`, and number formatting that converts values to billions.

Jul 19, 2020

Loading thumbnail…

Temperture in San Francicso Linechart

This line chart visualizes temperature measurements in San Francisco over time, using a filled area to emphasize the range of values. The visualization is rendered as an SVG with D3 v5, employing `d3.scaleTime` and `d3.scaleLinear` to map the timestamp and temperature data. The area is drawn with `d3.area` and a basis curve, while axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data comes from a CSV file hosted on VizHub, with points styled as semi-transparent steel blue circles.

Jul 19, 2020

Loading thumbnail…

Temperture in San Francicso Linechart

This linechart shows daily temperature variations in San Francisco over time, with a smooth curve connecting data points from a CSV dataset. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, while d3.line with curveBasis generates the smoothed path. SVG rendering displays gridlines via d3.axisBottom and d3.axisLeft, with axis labels and a title. The chart emphasizes the temporal trend of temperature, using steelBlue styling for the line and tick marks formatted through d3’s default formatting.

Jul 19, 2020

Loading thumbnail…

Temperture in San Francicso

This visualization displays daily temperature readings in San Francisco as a scatter plot, with time on the x-axis and temperature on the y-axis. The chart uses semi-transparent steel-blue circles to reveal data density. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, pulling data from a CSV file of timestamp and temperature pairs. The SVG rendering includes grid lines and labeled axes, with all styling applied via an external CSS file.

Jul 19, 2020

Loading thumbnail…

Scatter Plot ++

This scatter plot visualizes the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. The D3.js (v5) code uses `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, with gridlines drawn via negative tick sizes. It renders semi-transparent steel-blue circles via SVG, with categorical labels for the axes and title. The visualization applies the `extent` function for domain scaling and parses the CSV data to numeric values before rendering.

Jul 12, 2020

Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

Jul 12, 2020

Loading thumbnail…

Axes customization.

This example demonstrates customizing axes in a bar chart built with D3 v5, loading data from an external CSV file and rendering it as SVG rectangles. It uses `d3.scaleLinear` and `d3.scaleBand` to map numeric and categorical values, while `d3.axisBottom` and `d3.axisLeft` generate the axes with custom tick formatting via `d3.format`. The code removes default domain lines, adds a custom axis label and title, and styles tick marks and text through CSS.

Jul 12, 2020

Loading thumbnail…

My bar chart.

This bar chart displays categorical letters on the y-axis against quantitative numbers on the x-axis using d3.scaleBand and d3.scaleLinear. The SVG rendering uses d3.csv to load data.csv, converting the numbers field to numeric values before binding the data to rectangles. d3.axisLeft and d3.axisBottom generate the axes, while the bar height derives from the scale band’s bandwidth.

Jul 11, 2020

Loading thumbnail…

Funny Face with d3

A yellow circle with a black outline serves as a face, featuring two eyes, animated eyebrows, and a mouth drawn as a path. The eyebrows move up and down repeatedly using chained `transition()` calls with a 2000-millisecond duration. The example uses D3 v5's `select`, `arc`, and `transition` APIs, rendering everything as SVG elements within a fixed 960×500 viewport. The `arc` generator creates the mouth shape with specified inner and outer radii and angular extents.

Jul 11, 2020