tarunjada

@tarunjada·8 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. Red, semi-transparent circles represent individual cars, with the x-axis showing horsepower and the y-axis showing weight. The visualization uses D3 v5's `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for grid lines and tick marks, and SVG circle elements for rendering. Axis labels and a title are positioned within the SVG canvas, with data loaded from a CSV file.

Oct 1, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. It showcases custom D3 axis styling, including formatted tick labels using the `format` function and removed domain lines. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` with a custom tick formatter that converts values from millions to billions. The SVG rendering includes a title and axis labels with custom CSS styling.

Oct 1, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays population figures for ten countries, using horizontal bars sorted from largest to smallest. The visualization employs D3 v6 with SVG rendering, using `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. Population data from a CSV file is loaded and converted to numeric values, while rectangles are appended to the chart with heights determined by the band scale’s bandwidth.

Oct 1, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities around the world, sourced from Data Canvas - Sense Your City, with each city rendered as a separate smoothed line using `d3.line` with `curveBasis`. The visualization includes a color legend built with `d3.scaleOrdinal` and `schemeCategory10`, while axes are generated via `d3.axisBottom` and `d3.axisLeft`. Data is loaded with `d3.csv`, grouped using `d3.nest`, and rendered as an SVG with `mix-blend-mode: multiply` for overlapping lines.

Sep 30, 2020

Loading thumbnail…

Temperature in San Franscisco

A line chart visualizes temperature fluctuations over one week in San Francisco, using time on the x-axis and temperature on the y-axis. The code loads comma-separated data from a CSV file, converts timestamps and numeric values, and renders an SVG path with `d3.line` and `curveBasis`. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with scales defined by `d3.scaleTime` and `d3.scaleLinear`. The chart includes labeled axes and grid lines, though the title is commented out.

Sep 30, 2020

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of the ten most populous countries, with each bar's length proportional to the population value. The chart uses custom axes: the y-axis removes domain and tick lines for a cleaner look, while the x-axis formats tick labels using D3's `format` function to abbreviate numbers (e.g., "1.4B"). The code employs `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG visualization from a CSV data source.

Sep 24, 2020

Loading thumbnail…

Lets make a face with D3.js

A yellow circle becomes a cartoon face with eyes and eyebrows, plus an arc-shaped mouth, all built as SVG elements centered in a 960x500 canvas. The code uses D3 v6 selections to append a group translated to the center, then adds circles and rectangles for features. The eyebrows animate upward and back using chained `transition().duration(2000)` calls on the group's transform attribute. D3's `arc()` path generator creates the mouth with specified inner and outer radii and angular extents.

Sep 22, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML” centered in the browser, with the body font size set to 13em via inline CSS. It also includes a script tag that logs “Hello JavaScript!” to the browser’s developer console. The code uses plain HTML, CSS, and JavaScript without any external libraries or frameworks, serving as a bare-bones starting point for web development.

Sep 22, 2020