Durga Prasad

@durgaprasad1709·8 public vizzes

Fork of Stylized Line Chart

This line chart visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, displaying temperature as a smooth curved path over time. The chart uses React components with D3 v5 scales (scaleTime and scaleLinear) and the d3.line generator with curveNatural to create the stylized curve. The line is rendered in SVG as a single black stroke, with axis tick marks and labels generated by custom React components. The x-axis shows abbreviated weekday labels while the y-axis displays temperature values, with no individual data points marked.

Jun 1, 2021

Loading thumbnail…

Fork of Customizing Axes

This scatterplot displays the relationship between horsepower and weight for various automobile models, with each point representing a vehicle. The chart uses D3 v5's `scaleLinear`, `axisLeft`, and `axisBottom` to construct customized axes with removed domain lines and formatted tick labels, such as converting billions to B. Data is loaded from the auto-mpg.csv dataset. The visualization also adds custom axis labels and a title, demonstrating how to tailor D3's default axes for clearer data presentation.

Apr 24, 2021

Loading thumbnail…

Fork of Cars Scatter Plot

This visualization displays global population trends over time using an area chart, with a title reading “World Population” and axes labeled “Year” and “Population.” The SVG rendering employs D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with a `curveBasis` smoothing. Data comes from a CSV of world population figures, which is parsed with `csv` and formatted in billions using `format('.2s')`. The chart features styled tick labels, grid lines, and a red-filled area path, with margins and layout handled through custom SVG transforms.

Apr 24, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the classic Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each flower is represented as a colored circle, with species distinguished by a d3.scaleOrdinal color scale. The chart is built as a React component using reusable axis and mark components, with d3.csv for data loading and d3.scaleLinear for positioning. Axis ticks and labels are generated procedurally, and SVG tooltips display exact petal length values on hover.

Apr 24, 2021

Loading thumbnail…

Fork of Scatter Plot with Color

A scatter plot of the Iris Dataset, showing sepal width against petal length, with points colored by species and a legend identifying the three species. Built as a React component using D3 v5 scales (scaleLinear, scaleOrdinal) and SVG rendering, it loads data via d3.csv, maps values to axes and fill colors, and includes axis components and a color legend.

Apr 24, 2021

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

This chart displays cumulative COVID-19 deaths over time for each country, plotted on a logarithmic y-axis. The visualization features semi-transparent Voronoi cells overlaid on the line chart, enabling hover interactions that highlight the closest data point to the cursor, emphasizing the active country’s line in black. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLog`, `d3.line`, and `d3.Delaunay` for the Voronoi overlay. Data comes from the Johns Hopkins Coronavirus Dataset, rendered as an SVG.

Apr 20, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset using React and SVG. Users can dynamically select which attribute to display on the x-axis via a dropdown menu, while sepal width remains fixed on the y-axis. The visualization uses d3.scaleLinear for both axes and d3.extent to compute domains, with d3.csv loading the data. Circles are rendered as marks with tooltips, and the chart features axis labels and tick marks styled with Poppins font.

Apr 16, 2021

Loading thumbnail…

Fork of Hello HTML

This example is a minimal HTML page that renders a single SVG circle. It demonstrates the foundational structure of an HTML document and the use of inline SVG markup to display a simple graphic element. The page's source code shows a basic `<!DOCTYPE html>` declaration, a `<head>` section with a title, and a `<body>` containing an `<svg>` element with a `<circle>` tag. The visualization solely relies on the browser's native rendering of the SVG, with no external libraries or additional styling.

Apr 13, 2021