shailajat1998@gmail.com

Tree

Shailu_network

Tree

Fork of Visualization of Spatial Data - Network Graph

Fork of Visualization of Spatial Data - Network Graph

Visualization of Spatial Data - Tree Graph

Fork of Fork of HTML Starter

Fork of Fork of HTML Starter

ice_7 , question 4

This example shows a D3.js area chart that visualizes the trend of average car prices over the years, with a gradient-filled area below the line and interactive tooltips on hover. Data is loaded from a CSV file using `d3.csv`, transformed with `d3.rollups` to compute yearly means, and sorted by year before rendering. The visualization uses SVG elements with `d3.area` and `d3.line` generators, linear scales for the x- and y-axes, and a linear gradient definition for the area fill. Circles for each data point trigger tooltips showing the year and average price.

ice_7 , question 2

This pie chart visualizes the distribution of fuel types in a used-car dataset, with each slice encoded by a distinct color from D3's categorical scaleOrdinal scheme. The visualization is interactive: hovering over a segment displays a tooltip showing the fuel type and its exact count, while a dynamically generated legend maps colors to fuel categories for quick reference. Data is loaded from car_dataset.csv via d3.csv, and the chart is rendered with SVG in D3 v7, featuring smooth animated transitions. The tooltip and legend enhance accessibility and readability, making it easy to compare categorical proportions at a glance.

ice_7 , question 3

This visualization displays the average price of cars by year using a line chart rendered with D3.js v7. The data is loaded from a CSV file containing car listings with attributes such as price, year, and fuel type. After loading, the script aggregates and sorts the data by year, then maps the year to the x-axis and the average price to the y-axis using a monotone X-curve for smoothing. SVG elements draw the line, axes with labels, and gridlines for readability. Hovering over the line reveals an interactive tooltip displaying the exact year and average price. The chart is styled with CSS, and the D3 library is loaded via CDN. The visualization provides a clear, interactive trend of average car prices over time.

ice_7 , question 1

This scatter plot visualizes the relationship between car price and kilometers driven, with each circle representing a car model. The data is loaded from a CSV file using D3’s `d3.csv` method. Points are positioned using dynamic linear scales for the x- and y-axes, and hovering reveals a tooltip with the car’s model year and kilometers driven. The SVG uses a `viewBox` for responsive scaling, and the chart includes axis labels for the two dimensions. Styling is applied via CSS for clarity and accessibility, with the visualization powered by the D3 v7 library loaded from a CDN.

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through four measured attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and updates circle positions via a reusable `scatterPlot` function with a `setInterval` loop. The animation transitions the x-value accessor to reveal different feature relationships, with all rendering done in SVG within a full-screen viewport.

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that cycles through different dimensions of the Iris dataset, animating every two seconds. It visualizes sepal and petal measurements, with the x-axis switching between petal width, sepal width, petal length, and sepal length, while the y-axis remains fixed on sepal length. Built with D3.js v6, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, and the `scatterPlot` function encapsulates the chart’s configuration. The animation leverages `setInterval` to update the `xValue` accessor and re-render the plot, with data loaded from a remote CSV file via `d3.csv`.

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that cycles through different dimensions of the Iris dataset, animating every two seconds. It visualizes sepal and petal measurements, with the x-axis switching between petal width, sepal width, petal length, and sepal length, while the y-axis remains fixed on sepal length. Built with D3.js v6, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, and the `scatterPlot` function encapsulates the chart’s configuration. The animation leverages `setInterval` to update the `xValue` accessor and re-render the plot, with data loaded from a remote CSV file via `d3.csv`.

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that cycles through different dimensions of the Iris dataset, animating every two seconds. It visualizes sepal and petal measurements, with the x-axis switching between petal width, sepal width, petal length, and sepal length, while the y-axis remains fixed on sepal length. Built with D3.js v6, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, and the `scatterPlot` function encapsulates the chart’s configuration. The animation leverages `setInterval` to update the `xValue` accessor and re-render the plot, with data loaded from a remote CSV file via `d3.csv`.

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that cycles through different dimensions of the Iris dataset, animating every two seconds. It visualizes sepal and petal measurements, with the x-axis switching between petal width, sepal width, petal length, and sepal length, while the y-axis remains fixed on sepal length. Built with D3.js v6, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, and the `scatterPlot` function encapsulates the chart’s configuration. The animation leverages `setInterval` to update the `xValue` accessor and re-render the plot, with data loaded from a remote CSV file via `d3.csv`.

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that cycles through different dimensions of the Iris dataset, animating every two seconds. It visualizes sepal and petal measurements, with the x-axis switching between petal width, sepal width, petal length, and sepal length, while the y-axis remains fixed on sepal length. Built with D3.js v6, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, and the `scatterPlot` function encapsulates the chart’s configuration. The animation leverages `setInterval` to update the `xValue` accessor and re-render the plot, with data loaded from a remote CSV file via `d3.csv`.

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, cycling through four numerical attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. It uses D3.js v6 with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, and updates the visualization by re-calling the chart function. The plot renders as SVG circles with animated transitions, and the code dynamically binds new data values to update the x-scale domain and circle positions, showcasing a modular chart pattern for interactive data exploration.

Fork of Reusable D3 Scatter Plot

This interactive scatter plot cycles through four columns of the classic Iris flower dataset, displaying different petal and sepal measurements every two seconds. Using D3.js version 6, the visualization builds a reusable chart component with animated transitions between axes and data points. The code employs scaleLinear, extent, and axis functions to map the quantitative variables, while the Iris dataset is loaded via d3.csv. As the selected x-value changes, the plot updates smoothly, with circles representing individual flower specimens and labeled axes reflecting the current measurement pair.

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through four measured attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and updates circle positions via a reusable `scatterPlot` function with a `setInterval` loop. The animation transitions the x-value accessor to reveal different feature relationships, with all rendering done in SVG within a full-screen viewport.

Fork of HTML Starter

This example shows a horizontal bar chart comparing the number of units produced by various car manufacturers. The bars are drawn as SVG rectangles, with the x-axis representing the count of units and the y-axis listing manufacturer names. The visualization loads its data from a remote CSV file, which is parsed manually into an array of rows. Using D3.js v7, the code applies a linear scale for the x-axis, a band scale for the categorical y-axis, and appends axis labels and a title directly within the SVG container.

Fork of Simple Scatter Plot

This scatter plot displays the relationship between house size in square feet and the number of bedrooms, using data from a Boston Houses dataset loaded as a CSV. It first shows the positive correlation between the two variables, with each point representing a house. The visualization is built with D3 v7, using `d3.csvParse` to parse the data and `d3.scaleLinear` for the x and y axes, while SVG circles are appended to render the points. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Fork of Blank Slate

This example shows a simple CSV file summary interface that fetches a remote dataset and displays its basic properties—file size, row count, and column count—in a styled card. It uses the Fetch API to retrieve the CSV from a GitHub raw link, then parses it with `d3.csvParse` to determine the number of rows and columns. The summary text is injected into the DOM via `innerHTML`, and a helper function formats the file size using logarithmic scaling. The page relies on D3.js v6 for parsing and basic DOM manipulation, with no charting or visualization beyond textual metadata.

Fork of Hello HTML

A simple canvas drawing depicts a dog, a cat, and a plant using basic shapes and colors. The page, titled “Digital Feature Creator,” displays a greeting and renders the scene through the Canvas API, with `getContext('2d')` used for drawing rectangles, paths, and arcs. The scene is static, with no interaction or animation.

Fork of Fork of Create a face with d3.js!

This face visualization created with D3.js v7 renders a stylized cartoon face using SVG shapes, including a radial gradient-filled circle for the face, black eyes with white reflection highlights, a curved nose path, and an arc-based mouth. Interactive hover transitions scale the face radius via `transition().duration()`, while the mouth is drawn using `d3.arc()` with specified inner and outer radii. The code appends all elements to an SVG canvas, using basic SVG attributes and event listeners for mouse interactions.