Sushanta77

@Sushanta77·9 public vizzes

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It highlights how to customize D3 axes by removing domain lines, adjusting tick sizes, and formatting tick labels with `d3.format`. The chart uses `d3.csv` for data loading, `scaleLinear` and `scaleBand` for scales, and `axisBottom` and `axisLeft` for rendered SVG axes.

Aug 1, 2019

Loading thumbnail…

D3 Page Template

This interactive line chart from D3 v4 displays monthly sales data for three fruits (strawberry, grape, and blueberry) across two years (2015 and 2016), using a dropdown menu to switch between fruits. The visualization uses `d3.line()` to generate smooth paths from the CSV data and `d3.scaleTime()` for the month-based x-axis. A callback on the dropdown's `change` event triggers a transition that animates the paths over one second, enabling dynamic comparison of seasonal sales patterns across different fruit categories.

Aug 1, 2019

Loading thumbnail…

D3 Page Template

This visualization demonstrates the basic D3 page template, showing monthly sales data for three fruit categories across two years. The code loads a CSV file using `d3.csv` and prepares the data for visualization. The page structure includes a dropdown menu for fruit selection and a graph container, with an ES6 module exporting a message. While the HTML and JavaScript scaffolding establish the D3 v4 framework, the current implementation only logs the parsed data to the console without rendering any visual elements.

Aug 1, 2019

Loading thumbnail…

Cars Scatter Plot

This D3.js v5 scatter plot visualizes fuel efficiency data from the cars2017_new.csv dataset, plotting each car model's average city MPG as a horizontal bar. The y-axis displays car makes using a band scale, while the x-axis represents city MPG values with a linear scale. Built with SVG rendering, the visualization uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `scale.category20` APIs. The code reads the CSV file, converts numeric fields, and appends styled rectangles to the SVG canvas to represent each data point.

Jul 31, 2019

Loading thumbnail…

Untitled

This scatter plot displays the relationship between calories and protein content for 77 breakfast cereals, with each dot colored by manufacturer and a tooltip revealing the cereal name and exact values on hover. The visualization is built with D3 v3, using `d3.scale.linear` for axes, `d3.svg.axis` for tick marks, and `d3.scale.category10` for categorical coloring. Data is loaded from a local CSV file containing nutritional information from the UCI Machine Learning Repository. Animated transitions appear on mouseover, and a legend identifies each manufacturer's color.

Jul 31, 2019

Loading thumbnail…

The d3 test

This scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG Data Set, plotting x and y values as red, semi-transparent circles. The example uses D3 v2 with linear scales and SVG circles to render the points. It builds axes with `d3.svg.axis` and positions each circle via `d3.scale.linear` for x and y translation, with margins defining the chart layout.

Jul 31, 2019

Loading thumbnail…

The d3 test

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. It uses d3.v2 to render circles representing individual cars, with styling defined by CSS. The chart displays the relationship between variables through a simple scatter layout, using d3’s basic selection and data-binding methods. The axis labels and title are formatted with custom font sizes, and the SVG update pattern is handled within the d3 framework.

Jul 31, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars in the Auto MPG Data Set from the UCI Machine Learning Repository. Each semi-transparent red circle represents a vehicle, positioned by its horsepower and weight on linear scales. The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the labeled axes with gridlines. The SVG output includes a title and axis labels styled via CSS.

Jul 31, 2019

Loading thumbnail…

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, with each red, semi-transparent circle representing a vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with gridlines via `tickSize`. Data is loaded asynchronously via `csv` and parsed into numeric values before rendering. The SVG output positions circles based on scaled x and y coordinates, while margins and labels are applied through manual transforms and CSS styling.

Jul 31, 2019