Skip to main content
Log in
K

kalyanikotha

@kalyanikotha·28 public vizzes

Loading thumbnail…

Fork of Social Network

This network visualization displays a small social graph with six named nodes and five weighted links connecting them. The visualization uses a force-directed layout to position nodes, with link thickness scaled to the square root of each link's weight. The code relies on d3.v4.js and the older d3.layout.force API to calculate node positions and handle dragging. Links are rendered as orange SVG lines, while nodes appear as blue circles with purple labels taken from the data.json file.

Apr 3, 2022
Loading thumbnail…

Fork of Family Tree

This example shows a family tree visualization with color-coded nodes for each person, arranged hierarchically from a single root ancestor down through multiple generations. The tree renders as an SVG, with horizontal links connecting parent and child nodes, and labels sized according to depth in the hierarchy. The code uses d3.hierarchy and d3.tree to compute the layout, and d3.linkHorizontal for the curved connecting paths. A d3.zoom handler enables panning and zooming the entire visualization. Node colors and text are drawn from the JSON data, with a custom Playfair Display font applied via CSS.

Apr 3, 2022
Loading thumbnail…

Fork of country map

This choropleth-style map displays the regions of India, colored with a categorical palette based on data values. Built with D3 v5 and the TopoJSON library, it loads geographic data from a GitHub Gist and applies the Mercator projection using `d3.geoMercator` and `d3.geoPath`. The SVG rendering includes a header and hover effects that change the fill color of each region to purple.

Apr 3, 2022
Loading thumbnail…

Fork of ICE 8 world map

This map shows all countries of the world as solid green shapes with black outlines, projected using a natural Earth projection. It fetches geographic data from the world-atlas TopoJSON file and renders the features as SVG paths via d3.geoPath, d3.geoNaturalEarth1, and the topojson feature API. The page uses D3 v5 to select the SVG element and bind country features as data.

Apr 3, 2022
Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, using a circle for each iris flower to emphasize clustering by petal and sepal length across species. The SVG rendering uses D3 v5 with `d3.scaleLinear`, `d3.scaleOrdinal`, and the `d3.legendColor` component from the d3-legend library. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, with tick lines extending across the plot. The color scale applies D3’s `schemeCategory10` to differentiate species, and the legend is positioned within the chart’s margin.

Mar 27, 2022
Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes trades from 1950 to 2005, with sales values plotted over time using a smooth curve. The rendering uses SVG, with D3 v5 functions including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to generate a brown stroke line and pink filled region. Axis labels are formatted with `d3.format`, and the data is parsed from a CSV file hosted on GitHub, with dates converted via `d3.timeParse`. The chart includes custom styles for the tick text, axis labels, and the colored line and area paths.

Mar 27, 2022
Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes electronic sales from 2013 to 2021. The SVG graphic uses a green filled area under a black line to show sales trends over time. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, and `line` and `area` generators with `curveBasis` for smooth curves. Data is loaded from a remote CSV file using `csv` and parsed with `timeParse`.

Mar 27, 2022
Loading thumbnail…

Fork of line chart

This line chart, titled "Trades for Data," displays total sales over time, plotting years on the x-axis and totals on the y-axis. The visualization uses D3 v5 to load CSV data from a GitHub gist, parse dates, and render the result as an SVG. It employs `scaleTime` and `scaleLinear` for axes, `line` to generate the path, and `axisBottom` and `axisLeft` to draw the chart’s gridlines and labels.

Mar 27, 2022
Loading thumbnail…

Fork of Pie Chart

This example displays a pie chart of deaths in Canada by state, with each slice colored and labeled, alongside a legend showing state names and death counts. The visualization is built with D3 v5, using `d3.pie()` and `d3.arc()` to generate the chart segments and label positions. Data is loaded asynchronously via `d3.csv()` from a GitHub Gist, with colors assigned through `d3.scaleOrdinal()`. The SVG rendering includes text labels on each slice and a legend with colored rectangles and formatted values, all styled with embedded CSS.

Mar 27, 2022
Loading thumbnail…

Fork of the scatter plot

This interactive scatter plot visualizes the Iris flower dataset using React and D3.js. Two dropdown menus let users select which quantitative attributes (sepal length, sepal width, petal length, petal width) to map to the x and y axes. The plot renders circles using SVG, with axis ticks and labels via the custom `AxisBottom` and `AxisLeft` components. The data is loaded asynchronously from a CSV file using D3’s `csv` function, and scales are computed with `scaleLinear` and `extent`.

Mar 27, 2022
Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements (sepal or petal length/width) appear on the x- and y-axes via dropdown menus. The SVG rendering uses D3 v5 scales and axes, with circles colored by iris species, while React dropdown components manage the axis selections. The visualization updates in real time, re-scaling the axes and repositioning points as the chosen attributes change.

Mar 27, 2022
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization renders a horizontal bar chart of the top 10 most popular drink sales using React and D3 v5, with data loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, drawing SVG `<rect>` marks for each bar. Axes ticks and labels are generated manually by mapping over scale domains and tick values. The page background is styled green with maroon bars, and the visualization updates state asynchronously after data fetching.

Mar 7, 2022
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 11 bookselling categories by population in 1890, sourced from a CSV file. The code uses React hooks to load data with `d3.csv` and renders SVG marks with `scaleBand` and `scaleLinear`. Gridlines and tick labels are manually generated from the scales, while orange vertical lines and steelblue rectangles encode the values.

Mar 6, 2022
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 companies by bicycle sales, rendered as horizontal bars within an SVG. The visualization is built using React and D3, with data loaded from a CSV file. The code uses `d3.csv` to fetch and parse the data, and `d3.scaleBand` and `d3.scaleLinear` to map company names and sales values to visual positions. Each bar’s width is proportional to its sales figure, with gridlines and axis ticks generated from the linear scale.

Mar 6, 2022
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of laptop sales for the top ten companies, rendered as SVG elements using React. The code loads CSV data with `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and manually creates axis ticks and gridlines. The bars and labels are generated as React components, with styling applied via CSS in the HTML file.

Mar 6, 2022
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of laptop sales for the top ten companies, rendered as SVG elements using React. The code loads CSV data with `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and manually creates axis ticks and gridlines. The bars and labels are generated as React components, with styling applied via CSS in the HTML file.

Mar 6, 2022
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 11 bicycles alongside their prices, using horizontal bars to compare values. The visualization is built with React and D3 v5, rendering SVG marks and channels through React components. Data is loaded from a CSV file using `d3.csv`, with scales created via `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Grid lines, tick labels, and rectangles are generated programmatically, with bar colors styled via CSS.

Mar 6, 2022
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays a horizontal bar chart of bicycle prices for various countries, using a curated dataset loaded from a CSV file via d3.csv. The chart maps country names to a d3.scaleBand y-axis and numerical prices to a d3.scaleLinear x-axis, rendering rectangles as marks with blue gridlines and tick labels for both axes. Built with React components and D3 scales, the SVG output uses React’s state and effect hooks to fetch and process data, while D3’s scale functions handle positional encoding. The visualization highlights how D3 and React integrate for declarative chart rendering.

Mar 6, 2022
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping sepal and petal measurements from the CSV to colored circular marks. It uses D3 v6’s `scaleLinear` for axes, `extent` for domains, and `axisLeft`/`axisBottom` for tick rendering. The code destructures D3 methods like `csv`, `select`, and `join` to load data and append SVG circles. Species are color-coded (maroon, green, purple) via a switch statement, with point size fixed at a 10-pixel radius. The visualization is rendered dynamically to fill the browser window, using an SVG container.

Mar 6, 2022
Loading thumbnail…

Fork of Fork of Scatter Plot(test_data)

This scatter plot visualizes a dataset with Time on the x-axis and Value on the y-axis, using a connected line and circular marks to show the relationship between the variables. The visualization is built with React and D3 v5, using scaleLinear for both axes and the d3.line generator in the Marks component to draw the path. Data is loaded asynchronously from a CSV file via d3.csv, and the rendered SVG includes reusable AxisBottom and AxisLeft components for tick marks and labels.

Mar 6, 2022
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries, using a React component that fetches CSV data with `d3.csv` and renders SVG marks via JSX. It leverages `scaleBand` for the y-axis country categories, `scaleLinear` for the x-axis population values, and `max` to compute the domain. The chart includes custom tick labels and grid lines generated from `xScale.ticks`, with bars styled as `rect` elements.

Mar 6, 2022
Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting axes from dropdown menus. The SVG visualization uses d3.scaleLinear for axis scaling, d3.axisBottom and d3.axisLeft for gridlines, and color-codes data points by Iris species. The code leverages React through react-dropdown-browser for the menu interface while implementing custom dropdown logic with d3.select. Axis labels update dynamically, and additional text elements annotate the plot area.

Mar 6, 2022
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (red, blue, green). It uses D3.js v6 with `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` to render scales. Circle marks are appended via `selectAll` and `join`, with fill colors assigned through a custom switch function. The SVG canvas fills the browser window, and the code also parses sepal dimensions but uses them only as unused attributes.

Mar 6, 2022
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 most populous countries using a bar chart rendered with React and D3. The bars represent population data loaded from a CSV file, with country names on the y-axis and population values on the x-axis. The code uses `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scaling, and renders SVG rectangles directly through React components. Grid lines are drawn using `xScale.ticks`, with axis labels positioned manually.

Mar 6, 2022
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the top ten bicycle companies by 2018 sales as a horizontal bar chart, styled with pink bars on a red background. The visualization is built with React and D3 v5, using `d3.scaleBand` for the y-axis company labels and `d3.scaleLinear` for the x-axis sales values. Data is loaded asynchronously from a CSV file via `d3.csv`, and the SVG rendering is handled through ReactDOM, with axes and gridlines created using D3's `scale.ticks()` method.

Mar 6, 2022
Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using the D3.js library, displaying a summary of the dataset’s size and structure. The page uses `d3.csv` to fetch a remote CSV file and then reports the file size in kilobytes, row count, and column count within a styled `<pre>` element. The visualization incorporates a decorative SVG snowman image and custom CSS formatting. The code relies on `d3.csvFormat` and `d3.csv` from D3 v7, with the data sourced from a GitHub gist URL.

Feb 27, 2022
Loading thumbnail…

Fork of Smiley Face Part II

This example shows a simple, static smiley face built with React and rendered as an SVG graphic. It uses `ReactDOM.render` to mount the component, with circles and lines defining the face’s features, including a red head, white eye highlights, black eyebrows, and a nose. The code relies on React’s JSX syntax and the SVG `<circle>` and `<line>` elements to create the composition. No interactive behavior or data-driven features are present; it is purely a fixed visual output.

Feb 19, 2022
Loading thumbnail…

Fork of Tweak a Face Assignment by Enze Liu

This example shows a panda face built from D3 shape primitives inside a React component, with an SVG canvas as the rendering target. The code uses `d3.arc()` for the eyes, nose, mouth, and ears, along with circles and ellipses for the face, cheeks, and eye sockets, all positioned via SVG transforms. It relies on React 16 and D3 v6, with hardcoded coordinate values defining the symmetric facial layout. The panda faces the viewer directly, combining geometric shapes to create a stylized, static illustration.

Feb 19, 2022